深入探討 JavaScript 邏輯賦值運(yùn)算符
邏輯賦值是對現(xiàn)有數(shù)學(xué)和二進(jìn)制邏輯運(yùn)算符的擴(kuò)展。我們先復(fù)習(xí)一下，然后看看把它們結(jié)合在一起能得到什么。
首先，我們來看下 JS 中條件運(yùn)算符與無條件運(yùn)算符之間的區(qū)別 ??。
無條件 vs 有條件
數(shù)學(xué)運(yùn)算符，例如 +是無條件的。
在const x = 1 + 2中，無論如何，我們總是將LHS添加到RHS中，并將結(jié)果分配給x。
LHS 和 RHS 是數(shù)學(xué)領(lǐng)域內(nèi)的概念，意為等式左邊和等式右邊的意思，在我們現(xiàn)在的場景下就是賦值操作符的左側(cè)和右側(cè)。當(dāng)變量出現(xiàn)在賦值操作符的左邊時(shí)，就進(jìn)行 LHS 查詢;反之進(jìn)行 RHS 查詢 ??。
我們甚至可以編寫一些奇怪的代碼，例如const x = false +2。JS 首先將false的 LHS 轉(zhuǎn)換為Number，因此得到const x = Number(false)+ 2，其結(jié)果為const x = 0 + 2。它將 LHS 添加到RHS，最后將其分配給x，得出2。
邏輯運(yùn)算符，例如 &&是有條件的
在const x = true && 0 + 2中，首先計(jì)算 LHS，它為true。因?yàn)?LHS 的值為true，所以我們接下來運(yùn)行 RHS 操作，它的值為2，同時(shí)也運(yùn)行賦值操作，結(jié)果是2。
與const x = false && 0 + 2相比，LHS 為 false，因此 RHS 被完全忽略。
你可能想知道為什么要避免計(jì)算RHS? 兩個(gè)常見的原因是獲得更好的性能和避免副作用 ??。
二元邏輯運(yùn)算符
&& || ??
在 JSX 中我們經(jīng)常使用&&和||來有條件地渲染界面。??是nullish(空值)合并運(yùn)算符，它是最近剛通過提案的，很快就會(huì)普及。它們都是 二元邏輯運(yùn)算符。
- 使用&&測試 LHS 的結(jié)果是否是真值。
- 使用||測試 LHS 的結(jié)果是否是虛值。
- 用 ?? 測試 LHS 是否無效。
虛值 vs Nullish
在 JS 中有哪些算是虛值呢 ???
- null
- undefined
- false
- NaN
- 0
- "" (空字符串)
下面這兩姐妹被認(rèn)為是 nullish 值 ??。
- null
- undefined
值得注意的是，使用二元邏輯運(yùn)算符不一定返回布爾值，而是返回表達(dá)式的LHS或RHS值。為了明確這些表達(dá)式類型的要點(diǎn)，重看一下 ECMAScript 文檔中的這句話是有幫助的：
&&或||產(chǎn)生的值不一定是布爾型的，而是兩個(gè)操作數(shù)表達(dá)式之中的一個(gè)值。
一些事例
- // &&
- / /如果 LHS 是真值，計(jì)算并返回 RHS，否則返回 LHS
- true && 100**2 // 10000
- "Joe" && "JavaScript" // "JavaScript"
- false && 100**2 // false
- "" && 100**2 // ""
- NaN && 100**2 // NaN
- null && 100**2 // null
- undefined && 100**2 // undefined
邏輯賦值運(yùn)算符
&&= ||= ??=
這個(gè)運(yùn)算符將賦值與條件邏輯運(yùn)算符結(jié)合在一起，因此命名為**“邏輯賦值”** ??。它們只是一種簡寫， 例如，x && = y是x && (x = y) 的簡寫。
從邏輯賦值返回的值不是更新的賦值，而是已計(jì)算表達(dá)式的值。
由于先前的ECMAScript特性，比如默認(rèn)參數(shù)和nullish合并操作符，你可以說在邏輯賦值所提供的功能中肯定存在一些冗余。雖然這種速記看起來很流暢，而且我相信當(dāng)我們發(fā)現(xiàn)更多的用例時(shí)，它會(huì)派上用場的。
邏輯與賦值 ( &&= )
- // 邏輯與
- LHS &&= RHS
- // 等價(jià)于
- LHS && (LHS = RHS)
- // 事例
- // if x is truthy, assign x to y, otherwise return x
- // 如果 x 為真值，則將 y 賦值給 x， 否則返回 x
- let x = 1
- const y = 100
- x &&= y // x 為 100
- // 與上面對應(yīng)的長的寫法
- x && (x = y)
邏輯或賦值 ( ||= )
- // 邏輯或
- LHS ||= RHS
- // 等價(jià)于
- LHS || (LHS = RHS)
- // 事例
- // 如果 x 為真值，返回 x，否則將 y 賦值給 x
- let x = NaN
- const y = 100
- x ||= y // x 為 100
- // 與上面對應(yīng)的長的寫法
- x || (x = y)
邏輯 nullish 賦值 ( ??= )
- // 邏輯 nullish
- LHS ??= RHS
- // 等價(jià)于
- LHS ?? (LHS = RHS)
- // 事例
- // if x.z is nullish, assign x.z to y
- let x = {}
- let y = 100;
- x.z ??= y // x 為 { z: 100 }
- // 與上面對應(yīng)的長的寫法
- x.z ?? (x.z = y)
實(shí)現(xiàn)中邏輯賦值的例子
React中的JSX
- let loading = true
- const spinner = <Spinner />
- loading &&= spinner
DOM
- el.innerHTML ||= 'some default'
對象
- // 如果對象沒有 onLoad 方法，則設(shè)置一個(gè)方法
- const config = {};
- config.onLoad ??= () => console.log('loaded!')
- const myObject = { a: {} }
- myObject.a ||= 'A'; // 被忽略，因?yàn)?nbsp;myObject 中 a 的值為真值
- myObject.b ||= 'B'; // myObject.b 會(huì)被創(chuàng)建，因?yàn)樗回S myObject 中
- // {
- // "a": {}
- // "b": "B"
- // }
- myObject.c &&= 'Am I seen?'; // 這里的 myObject.c 為虛值，所以什么都不會(huì)做
如何在項(xiàng)目中使用邏輯賦值
Chrome 已經(jīng)支持邏輯賦值。為了向后兼容，請使用 transformer。如果您使用的是Babel，請安裝插件：
- npm install @babel/plugin-proposal-logical-assignment-operators
并在 .babelrc 中添加發(fā)下內(nèi)容：
- {
- "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
- }
邏輯賦值是一個(gè)全新的概念，所以還沒有太多相關(guān)的知識(shí)。如果你有其他關(guān)于邏輯賦值的好用法的例子，請?jiān)谙旅媪粝略u論 ??。
作者：Joe Seifi 譯者：前端小智 原文：https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號(hào)。
