JavaScript在不斷的進(jìn)化和升級，越來越多的新特性讓我們的代碼變得更加簡潔。因此，今天這篇文章，我將跟大家分享 4 個不常用的 JavaScript 運(yùn)算符。讓我們一起研究它們。
1.可選的鏈接運(yùn)算符
這個功能非常好用，它可以防止我的代碼出錯，甚至可以大大簡化它。
例如，我們想打印一個人的名字，我敢打賭這很容易！沒有困難。
const?showName?=?(data)?=>?{
??console.log(data.user.name)
}
showName({
??user:?{
????name:?'fatfish'
??}
})
不幸的是，我太粗心了，沒有按照showName的要求傳合法的參數(shù)，結(jié)果出事了。
const?showName?=?(data)?=>?{
??console.log(data.user.name)
}
showName('fatfish')
你一定是一個有經(jīng)驗(yàn)的軟件工程師，所以很容易寫出像下面這樣的代碼。
const?showName?=?(data)?=>?{
??console.log(data?&&?data.user?&&?data.user.name)
}
showName('fatfish')
有沒有更優(yōu)雅的方式？如果數(shù)據(jù)層級嵌套太深，就是一段臭代碼。
const?showName?=?(data)?=>?{
??console.log(data?&&?data.user?&&?data.user.person?...)
}
showName('fatfish')
別擔(dān)心，Optional Chaining Operator 可以幫助我們。下面的代碼不再拋出錯誤，這很棒。
const?showName?=?(data)?=>?{
??console.log(data?.user?.name)
}
showName('fatfish')
什么是可選鏈接運(yùn)算符？
來自 mdn的解釋：可選的鏈接運(yùn)算符 (?.) 訪問對象的屬性或調(diào)用函數(shù)。如果對象是 undefined 或 null，它返回 undefined 而不是拋出錯誤。
const?adventurer?=?{
??name:?'Alice',
??cat:?{
????name:?'Dinah'
??}
}
const?dogName?=?adventurer?.dog?.name
console.log(dogName)
//?expected?output:?undefined
console.log(adventurer.someNonExistentMethod?.())
//?expected?output:?undefined
2.合并賦值 (??=)
來自mdn的解釋：空值合并賦值 (x ??= y) 運(yùn)算符僅在 x 為空值（null 或未定義）時才賦值。
const?obj?=?{
??name:?'fatfish'
}
obj.name???=?'medium'
obj.age???=?100
console.log(obj.name,?obj.age)
是的，最后只分配了 age 屬性。
小伙伴們，你們覺得哪一行代碼更接近??=?的功能呢？答案1還是答案2？
//?1.
x????(x?=?y)
//?2.
x?=?x????y
我想你猜對了，答案是1。
因?yàn)榇鸢?在任何情況下都會賦值x，而答案1只有在x為真時才會賦值。
它能為我們做什么？
那么，我們可以用它做什么呢？是的，它可以做與默認(rèn)參數(shù)完全相同的事情。
const?showName?=?(name)?=>?{
??name???=?'fatfish'
??console.log(name)
}
showName('medium')?//?medium
showName()?//?fatfish
它幾乎等同于以下代碼。
const?showName?=?(name?=?'fatfish')?=>?{
??console.log(name)
}
showName('medium')?//?medium
showName()?//?fatfish
好吧，我不得不承認(rèn)編寫默認(rèn)參數(shù)讓我更快樂。
3.邏輯或賦值(||=)
來自 mdn的解釋：邏輯或賦值 (x ||= y) 運(yùn)算符僅在 x 為假時才賦值。
const?obj?=?{
??name:?'',
??age:?0
}
obj.name?||=?'fatfish'
obj.age?||=?100
console.log(obj.name,?obj.age)?//?fatfish?100
小伙伴們可以看到，當(dāng)x的值為假值時，賦值成功。
它能為我們做什么？
來自mdn：如果“l(fā)yrics”元素為空，則顯示默認(rèn)值：
document.getElementById("lyrics").textContent?||=?"No?lyrics."
短路在這里特別有用，因?yàn)樵夭粫M(jìn)行不必要的更新，也不會導(dǎo)致不必要的副作用，例如，額外的解析或渲染工作，或失去焦點(diǎn)等。
4.邏輯與賦值(&&=)
來自mdn：邏輯與賦值 (x &&= y) 運(yùn)算符僅在 x 為真時才賦值。文章來源：http://www.zghlxwxcb.cn/news/detail-431520.html
與邏輯或賦值 (||=) 相反，只有 x 為真時才會正確賦值。文章來源地址http://www.zghlxwxcb.cn/news/detail-431520.html
const?obj?=?{
??name:?'fatfish',
??age:?100
}
obj.name?&&=?'medium'?//?medium
obj.age?&&=?1000?//?1000
console.log(obj.name,?obj.age)?//?medium?1000到了這里，關(guān)于4個很多人都不知道的現(xiàn)代JavaScript技巧的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
