新的 JavaScript 新特性来学习一波

共计 2612 个字符，预计需要花费 7 分钟才能阅读完成。

有时，我们想知道对象上是否存在某个属性，一般会使用“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  注意这里 

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 来避免这两个问题，这比“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

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

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

直接看例子，惊呆了我 …

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

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

const sum = 1000 + 6000_000_000 // 6000001000

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

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

?. 的一般用法

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

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

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券