五個一定要學會的 JavaScript 新特性
作者：前端胖頭魚
JavaScript在不斷地升級迭代，越來越多的新特性讓我們的代碼寫起來變得簡潔有趣，這篇文章會介紹5個新特性，一起研究一下把。
1. 使用"Object.hasOwn"替代“in”操作符
有時，我們想知道對象上是否存在某個屬性，一般會使用“in”操作符或“obj.hasOwnProperty”，但它們都有各自的缺陷。
in
如果指定的屬性位于對象或其原型鏈中，“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) 執(zhí)行函數
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
責任編輯：龐桂玉
來源：
前端大全
