JavaScript在不斷的進(jìn)化和升級(jí)，越來越多的新特性讓我們的代碼變得更加簡潔。因此，今天這篇文章，我將跟大家分享 4 個(gè)不常用的 JavaScript 運(yùn)算符。讓我們一起研究它們。

1.可選的鏈接運(yùn)算符

這個(gè)功能非常好用，它可以防止我的代碼出錯(cuò)，甚至可以大大簡化它。

例如，我們想打印一個(gè)人的名字，我敢打賭這很容易！沒有困難。

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')

你一定是一個(gè)有經(jīng)驗(yàn)的軟件工程師，所以很容易寫出像下面這樣的代碼。

const?showName?=?(data)?=>?{console.log(data?&&?data.user?&&?data.user.name)
}showName('fatfish')

有沒有更優(yōu)雅的方式？如果數(shù)據(jù)層級(jí)嵌套太深，就是一段臭代碼。

const?showName?=?(data)?=>?{console.log(data?&&?data.user?&&?data.user.person?...)
}showName('fatfish')

別擔(dān)心，Optional Chaining Operator 可以幫助我們。下面的代碼不再拋出錯(cuò)誤，這很棒。

const?showName?=?(data)?=>?{console.log(data?.user?.name)
}showName('fatfish')

什么是可選鏈接運(yùn)算符？

來自 mdn的解釋：可選的鏈接運(yùn)算符 (?.) 訪問對象的屬性或調(diào)用函數(shù)。如果對象是 undefined 或 null，它返回 undefined 而不是拋出錯(cuò)誤。

const?adventurer?=?{name:?'Alice',cat:?{name:?'Dinah'}
}const?dogName?=?adventurer?.dog?.nameconsole.log(dogName)
//?expected?output:?undefined
console.log(adventurer.someNonExistentMethod?.())
//?expected?output:?undefined

2.合并賦值 (??=)

來自mdn的解釋：空值合并賦值 (x ??= y) 運(yùn)算符僅在 x 為空值（null 或未定義）時(shí)才賦值。

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)榇鸢?在任何情況下都會(huì)賦值x，而答案1只有在x為真時(shí)才會(huì)賦值。

它能為我們做什么？

那么，我們可以用它做什么呢？是的，它可以做與默認(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 為假時(shí)才賦值。

const?obj?=?{name:?'',age:?0
}obj.name?||=?'fatfish'
obj.age?||=?100console.log(obj.name,?obj.age)?//?fatfish?100

小伙伴們可以看到，當(dāng)x的值為假值時(shí)，賦值成功。

它能為我們做什么？

來自mdn：如果“l(fā)yrics”元素為空，則顯示默認(rèn)值：

document.getElementById("lyrics").textContent?||=?"No?lyrics."

短路在這里特別有用，因?yàn)樵夭粫?huì)進(jìn)行不必要的更新，也不會(huì)導(dǎo)致不必要的副作用，例如，額外的解析或渲染工作，或失去焦點(diǎn)等。

4.邏輯與賦值(&&=)

來自mdn：邏輯與賦值 (x &&= y) 運(yùn)算符僅在 x 為真時(shí)才賦值。

與邏輯或賦值 (||=) 相反，只有 x 為真時(shí)才會(huì)正確賦值。

const?obj?=?{name:?'fatfish',age:?100
}obj.name?&&=?'medium'?//?medium
obj.age?&&=?1000?//?1000
console.log(obj.name,?obj.age)?//?medium?1000