5個(gè)實(shí)用的JavaScript新特性
前言
JavaScript在不斷地升級(jí)迭代，越來越多的新特性讓我們的代碼寫起來變得簡(jiǎn)潔有趣，這篇文章會(huì)介紹5個(gè)新特性，一起研究一下把。
1.# 使用"Object.hasOwn"替代“in”操作符
有時(shí)，我們想知道對(duì)象上是否存在某個(gè)屬性，一般會(huì)使用“in”操作符或“obj.hasOwnProperty”，但它們都有各自的缺陷。
in
如果指定的屬性位于對(duì)象或其原型鏈中，“in”運(yùn)算符將返回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 方法會(huì)返回一個(gè)布爾值，表示對(duì)象自身屬性中是否具有對(duì)應(yīng)的值（原型鏈上的屬性不會(huì)讀?。?/p>
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已經(jīng)可以過濾掉原型鏈上的屬性，但在某些情況下，它還是不安全。
Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function
Object.hasOwn
別急，我們可以使用Object.hasOwn來避免這兩個(gè)問題，這比“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.# 使用"#"聲明私有屬性
以前，我們一般用_表示私有屬性，但它并不靠譜，還是會(huì)被外部修改。
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
使用“#”實(shí)現(xiàn)真正私有屬性
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.# 超有用的"數(shù)字分隔符"
直接看例子，驚呆了我...
const sixBillion = 6000000000 // ? 難以閱讀 const sixBillion2 = 6000_000_000 // ? 更加易于閱讀 console.log(sixBillion2) // 6000000000
當(dāng)然也可以使用"_"用于計(jì)算
const sum = 1000 + 6000_000_000 // 6000001000
4.# 使用"?."簡(jiǎn)化"&&"和三元運(yùn)算符
這些例子，你一定非常熟悉，咱們有辦法可以簡(jiǎn)化它嗎？
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 對(duì)象屬性
- obj?.[expr] 對(duì)象屬性
- func?.(...args) 執(zhí)行函數(shù)
5.# 使用"BigInt"支持大數(shù)計(jì)算
JS中超過“Number.MAX_SAFE_INTEGER”的數(shù)字計(jì)算將是不安全的。
Example:
Math.pow(2, 53) === Math.pow(2, 53) + 1 // true // Math.pow(2, 53) => 9007199254740992 // Math.pow(2, 53) + 1 => 9007199254740992
使用"BigInt"完全可以避免這個(gè)問題
BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false
最后
希望能一直給大家分享實(shí)用、基礎(chǔ)、進(jìn)階的知識(shí)點(diǎn)，一起早早下班，快樂摸魚，更多關(guān)于JavaScript新特性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript前端實(shí)現(xiàn)小說分頁(yè)功能示例
這篇文章主要為大家介紹了JavaScript前端實(shí)現(xiàn)小說分頁(yè)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Project?Reference優(yōu)化TypeScript編譯性能示例
這篇文章主要為大家介紹了Project?Reference優(yōu)化TypeScript編譯性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了利用javaScript處理常用事件詳解,文章有非常詳細(xì)的代碼實(shí)踐,對(duì)學(xué)習(xí)js的小伙伴們有一定的參考價(jià)值,需要的朋友可以參考下2021-04-04
JS面試中你不知道的call apply bind方法及使用場(chǎng)景詳解
這篇文章主要為大家介紹了JS面試中你不知道的call apply bind方法及使用場(chǎng)景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
微信瀏覽器禁止頁(yè)面下拉查看網(wǎng)址實(shí)例詳解
這篇文章主要介紹了微信瀏覽器禁止頁(yè)面下拉查看網(wǎng)址實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了從ES6開始弱化arguments的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
微信小程序 POST請(qǐng)求（網(wǎng)絡(luò)請(qǐng)求）詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 POST請(qǐng)求（網(wǎng)絡(luò)請(qǐng)求）詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-11-11
AntDesignPro使用electron構(gòu)建桌面應(yīng)用示例詳解
這篇文章主要為大家介紹了AntDesignPro使用electron構(gòu)建桌面應(yīng)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
JavaScript版代碼高亮...2006-06-06
微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04