JavaScript 5个新特性

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

in

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

const Person = function (age) {
  this.age = age
}
Person.prototype.name = 'alex'

const person = new Person(24)
console.log('age' in person) // true 
console.log('name' in person) // true  注意这里

obj.hasOwnProperty

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

const Person = function (age) {
  this.age = age
}
Person.prototype.name = 'fatfish'

const person = new Person(24)
console.log(person.hasOwnProperty('age')) // true 
console.log(person.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 objectCA = Object.create({ age: 24 })
Object.hasOwn(objectCA, 'age') // false  
let objectCN = Object.create(null)
Object.hasOwn(objectCN, 'age') // false 

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 person = new Person('alex')
console.log(person.money) // 1
// person.#money = 2 // 没法从外部直接修改
person.money = 2
console.log(person.money) // 2
console.log(person.#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

?.  的一般用法

1. obj?.prop 对象属性
2. obj?.[expr] 对象属性
3. 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