建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
JavaScript在不斷的進(jìn)化和升級(jí)，越來(lái)越多的新特性讓我們的代碼變得更加簡(jiǎn)潔。因此，今天這篇文章，我將跟大家分享 4 個(gè)不常用的 JavaScript 運(yùn)算符。讓我們一起研究它們。
讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、網(wǎng)站空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、馬尾網(wǎng)站維護(hù)、網(wǎng)站推廣。
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)算符 (?.) 訪(fǎng)問(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)注我，并將這篇文章分享給你的朋友，也許能夠幫助到他。
最后，感謝你的閱讀，編程愉快！
文章名稱(chēng)：四個(gè)很多人都不知道的現(xiàn)代JavaScript技巧
URL標(biāo)題：http://m.fisionsoft.com.cn/article/dhepehc.html
