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)驗的軟件工程師，所以很容易寫出像下面這樣的代碼。
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: undefined2.合并賦值 (??=)
來自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。
因為答案2在任何情況下都會賦值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 1000小伙伴們可以看到，當(dāng)x的值為假值時，賦值成功。
它能為我們做什么？
來自mdn：如果“l(fā)yrics”元素為空，則顯示默認(rèn)值：
document.getElementById("lyrics").textContent ||= "No lyrics."短路在這里特別有用，因為元素不會進(jìn)行不必要的更新，也不會導(dǎo)致不必要的副作用，例如，額外的解析或渲染工作，或失去焦點(diǎn)等。
4.邏輯與賦值(&&=)
來自mdn：邏輯與賦值 (x &&= y) 運(yùn)算符僅在 x 為真時才賦值。
與邏輯或賦值 (||=) 相反，只有 x 為真時才會正確賦值。
const obj = {
name: 'fatfish',
age: 100
}
obj.name &&= 'medium' // medium
obj.age &&= 1000 // 1000
console.log(obj.name, obj.age) // medium 1000
寫在最后
以上內(nèi)容，就是我今天跟你分享的4個關(guān)于JavaScript運(yùn)算符的知識，如果你覺得有用的話，請記得點(diǎn)贊我，關(guān)注我，并將這篇文章分享給你的朋友，也許能夠幫助到他。
最后，感謝你的閱讀，編程愉快！
