5个实用的JavaScript新特性

更新时间：2022-06-15 10:12:20 作者：佚名我要评论(0)

目录前言1.# 使用"Object.hasOwn"替代“in”操作符2.# 使用"#"声明私有属性3.# 超有用的"数字分隔符"4.# 使用"?."简化"&&"和三元运

前言

JavaScript在不断地升级迭代，越来越多的新特性让我们的代码写起来变得简洁有趣，这篇文章会介绍5个新特性，一起研究一下把。

1.# 使用"Object.hasOwn"替代“in”操作符

有时，我们想知道对象上是否存在某个属性，一般会使用“in”操作符或“obj.hasOwnProperty”，但它们都有各自的缺陷。

如果指定的属性位于对象或其原型链中，“in”运算符将返回true。

const Person = function (age) {
  this.age = age
}
Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log('age' in p1) // true 
console.log('name' in p1) // true  注意这里

obj.hasOwnProperty

hasOwnProperty 方法会返回一个布尔值，表示对象自身属性中是否具有对应的值（原型链上的属性不会读取）。

const Person = function (age) {
  this.age = age
}
Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log(p1.hasOwnProperty('age')) // true 
console.log(p1.hasOwnProperty('name')) // fasle  注意这里

obj.hasOwnProperty已经可以过滤掉原型链上的属性，但在某些情况下，它还是不安全。

Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

Object.hasOwn

别急，我们可以使用Object.hasOwn来避免这两个问题，这比“obj.hasOwnProperty”方法更加方便、安全。

let object = { age: 24 }
Object.hasOwn(object, 'age') // true
let object2 = Object.create({ age: 24 })
Object.hasOwn(object2, 'age') // false  
let object3 = Object.create(null)
Object.hasOwn(object3, 'age') // false

2.# 使用"#"声明私有属性

以前，我们一般用_表示私有属性，但它并不靠谱，还是会被外部修改。

class Person {
  constructor (name) {
    this._money = 1
    this.name = name
  }
  get money () {
    return this._money
  }
  set money (money) {
    this._money = money
  }
  showMoney () {
    console.log(this._money)
  }
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
console.log(p1._money) // 1
p1._money = 2 // 依旧可以从外部修改_money属性，所以这种做法并不安全
console.log(p1.money) // 2
console.log(p1._money) // 2

使用“#”实现真正私有属性

class Person {
  #money=1
  constructor (name) {
    this.name = name
  }
  get money () {
    return this.#money
  }
  set money (money) {
    this.#money = money
  }
  showMoney () {
    console.log(this.#money)
  }
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
// p1.#money = 2 // 没法从外部直接修改
p1.money = 2
console.log(p1.money) // 2
console.log(p1.#money) // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class

3.# 超有用的"数字分隔符"

直接看例子，惊呆了我...

const sixBillion = 6000000000
// ? 难以阅读
const sixBillion2 = 6000_000_000
// ? 更加易于阅读
console.log(sixBillion2) // 6000000000

当然也可以使用"_"用于计算

const sum = 1000 + 6000_000_000 // 6000001000

4.# 使用"?."简化"&&"和三元运算符

这些例子，你一定非常熟悉，咱们有办法可以简化它吗？

const obj = null
console.log(obj && obj.name)
const $title = document.querySelector('.title')
const title = $title ? title.innerText : undefined

“?.”

const obj = null
console.log(obj?.name)
const $title = document.querySelector('.title')
const title = $title?.innerText

Tips

?. 的一般用法

obj?.prop 对象属性
obj?.[expr] 对象属性
func?.(...args) 执行函数

5.# 使用"BigInt"支持大数计算

JS中超过“Number.MAX_SAFE_INTEGER”的数字计算将是不安全的。

Example:

Math.pow(2, 53) === Math.pow(2, 53) + 1 // true
// Math.pow(2, 53) => 9007199254740992
// Math.pow(2, 53) + 1 => 9007199254740992

使用"BigInt"完全可以避免这个问题

BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false

最后

希望能一直给大家分享实用、基础、进阶的知识点，一起早早下班，快乐摸鱼，更多关于JavaScript新特性的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavascriptES6新特性之map和reduce详解
JS ES新特性模板字符串
JS?ES新特性之变量的解耦赋值
基于JavaScript ES新特性let与const关键字
详解JSON.stringify()的5个秘密特性

您可能感兴趣的文章:

5个实用的JavaScript新特性
目录前言1.# 使用"Object.hasOwn"替代“in”操作符2.# 使用"#"声明私有属性3.# 超有用的"数字分隔符"4.# 使用"?."简化"&&"和三元运
2022-06-15
解决@Scope(“prototype“)不生效的问题
目录@Scope(“prototype“)不生效@Scope(“prototype“)正确用法——解决Bean多例问题1.问题，Spring管理的某
2022-06-15
QT实现用户登录注册功能
本文实例为大家分享了QT实现用户登录注册的具体代码，供大家参考，具体内容如下 1、login.h #ifndef LOGIN_H #define LOGIN_H #include <QW
2022-06-15
C#使用LINQ查询操作符实例代码(二)
目录六、连表操作符1、内连接2、左外连接(DefaultIfEmpty)3、组连接七、集合操作八、分区操作符1、Take()：2、TakeWhile()：3、Skip()：4、S
2022-06-15
Golang泛型与反射的应用详解
目录1. 泛型1.1 定义1.2 例子1.3 自定义泛型类型1.4 泛型与switch结合使用1.5 泛型实战2. 反射2.1 定义2.2 方法2.3 反射读取2.4 反射操作2.5
2022-06-15
C#使用Clipboard类实现剪贴板功能
剪贴板是Windows操作系统中最常用的功能之一，它用来从一个应用程序向另一个应用程序传递数据，可以是文本，图象，甚至是程序对象。不过剪贴
2022-06-15
面试手写实现Promise.all
目录前言常见面试手写系列Promise.resolve简要回顾源码实现Promise.reject简要回顾源码实现Promise.all简要回顾源码实现Promise.allSettled简
2022-06-15
Java中String和StringBuffer及StringBuilder?有什么区别
目录String类为什么是immutable(不可变的)如何保证不可变string类为不可变对象的好处前言： String 是 Java 语言非常基础和重要的类，提供了
2022-06-15
C#实现读写CSV文件的方法详解
目录CSV文件标准文件示例RFC 4180简化标准读写CSV文件使用CsvHelper使用自定义方法总结项目中经常遇到CSV文件的读写需求，其中的难点主要是C
2022-06-15
一次性彻底讲透Python中pd.concat与pd.merge
目录数据拼接：pd.concat数据关联:pd.merge两者区别数据的合并与关联是数据处理过程中经常遇到的问题，在SQL、HQL中大家可能都有用到 join、
2022-06-15

软件下载

源码下载

站长学院

网络技术

5个实用的JavaScript新特性

目录

前言

1.# 使用"Object.hasOwn"替代“in”操作符

2.# 使用"#"声明私有属性

3.# 超有用的"数字分隔符"

4.# 使用"?."简化"&&"和三元运算符

5.# 使用"BigInt"支持大数计算

最后

您可能感兴趣的文章:

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

本类推荐