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

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

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

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

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

showName({
  user: {
    name: 'fatfish'
  }
})

不幸的是，我太粗心了，沒(méi)有按照showName的要求傳合法的參數(shù)，結(jié)果出事了。

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

showName('fatfish')

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

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

showName('fatfish')

有沒(méi)有更優(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)算符？

來(lái)自 mdn的解釋?zhuān)嚎蛇x的鏈接運(yùn)算符 (?.) 訪問(wèn)對(duì)象的屬性或調(diào)用函數(shù)。如果對(duì)象是 undefined 或 null，它返回 undefined 而不是拋出錯(cuò)誤。

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.合并賦值 (??=)

來(lái)自mdn的解釋?zhuān)嚎罩岛喜①x值 (x ??= y) 運(yùn)算符僅在 x 為空值（null 或未定義）時(shí)才賦值。

const obj = {
  name: 'fatfish'
}

obj.name ??= 'medium'
obj.age ??= 100
console.log(obj.name, obj.age)

是的，最后只分配了 age 屬性。

小伙伴們，你們覺(jué)得哪一行代碼更接近??=?的功能呢？答案1還是答案2？

// 1.
x ?? (x = y)
// 2.
x = x ?? y

我想你猜對(duì)了，答案是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)編寫(xiě)默認(rèn)參數(shù)讓我更快樂(lè)。

3.邏輯或賦值(||=)

來(lái)自 mdn的解釋?zhuān)哼壿嫽蛸x值 (x ||= y) 運(yùn)算符僅在 x 為假時(shí)才賦值。

const obj = {
  name: '',
  age: 0
}

obj.name ||= 'fatfish'
obj.age ||= 100

console.log(obj.name, obj.age) // fatfish 1000

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

它能為我們做什么？

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

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

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

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

來(lái)自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

寫(xiě)在最后

以上內(nèi)容，就是我今天跟你分享的4個(gè)關(guān)于JavaScript運(yùn)算符的知識(shí)，如果你覺(jué)得有用的話(huà)，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將這篇文章分享給你的朋友，也許能夠幫助到他。

最后，感謝你的閱讀，編程愉快！