深入淺析JS中的邏輯賦值運算符

本篇文章帶大家深入探討 JavaScript 邏輯賦值運算子。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

邏輯賦值是對現有數學和二進位邏輯運算子的擴充。我們先複習一下，然後看看把它們結合在一起能得到什麼。

首先，我們來看 JS 中條件運算子與無條件運算子之間的差異。

無條件 vs 有條件

數學運算符，例如 是無條件的。

在const x = 1 2中，無論如何，我們總是將LHS新增到RHS中，並將結果分配給x。

LHS 和 RHS 是數學領域內的概念，意為等式左邊和等式右邊的意思，在我們現在的場景下就是賦值運算子的左邊和右邊。當變數出現在賦值運算子的左邊時，就進行 LHS 查詢；反之進行 RHS 查詢。

我們甚至可以寫一些奇怪的程式碼，例如const x = false 2。 JS 先將false的LHS 轉換為Number，因此得到const x = Number（false） 2，其結果為const x = 0 2 。它將 LHS 新增至RHS，最後將其指派給x，得出2。

邏輯運算符，例如&&是有條件的

在const x = true && 0 2中，首先計算LHS，它為true。因為 LHS 的值為true，所以我們接下來執行 RHS 操作，它的值為2，同時也執行賦值操作，結果是2。

與const x = false && 0 2相比，LHS 為 false，因此 RHS 被完全忽略。

你可能想知道為什麼要避免計算RHS? 兩個常見的原因是獲得更好的性能和避免副作用。

二元邏輯運算子

&& || ??

在JSX 中我們經常使用&& 和||來有條件地渲染介面。 ??是nullish(空值)合併運算符，它是最近剛通過提案的，很快就會普及。它們都是 二元邏輯運算子。

• 使用&&測試 LHS 的結果是否為真值。
• 使用||測試 LHS 的結果是否為虛值。
• 用 ?? 測試 LHS 是否無效。

虛值  vs Nullish

在 JS 中有哪些算是虛值呢？

• null
• undefined
• false
• NaN
• 0
• "" (空字串)

下面這兩個姊妹被認為是nullish 值。

• null
• undefined

值得注意的是，使用二元邏輯運算子不一定會傳回布林值，而是傳回表達式的LHS或RHS值。為了明確這些表達式類型的要點，重看一下ECMAScript 文件中的這句話是有幫助的：

&&或||產生的值不一定是布林型的，而是兩個操作數表達式之中的一個值。

一些例子

// &&
/ /如果 LHS 是真值，计算并返回 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

邏輯賦值運算子

&&= ||= ??=

這個運算子將賦值與條件邏輯運算子結合在一起，因此命名為「邏輯賦值」。它們只是一種簡寫， 例如，x && = y是x && (x = y) 的簡寫。

從邏輯賦值傳回的值不是更新的賦值，而是已計算表達式的值。

由於先前的ECMAScript特性，例如預設參數和nullish合併操作符，你可以說在邏輯賦值所提供的功能中肯定存在一些冗餘。雖然這種速記看起來很流暢，而且我相信當我們發現更多的用例時，它會派上用場的。

邏輯與賦值( &&= )

// 逻辑与
LHS &&= RHS
// 等价于 
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
  
// 与上面对应的长的写法
x && (x = y)

邏輯或賦值( ||= )

// 逻辑或
LHS ||= RHS
 
// 等价于
LHS || (LHS = RHS)
 
// 事例
// 如果 x 为真值，返回 x，否则将 y 赋值给 x
let x = NaN
const y = 100
x ||= y // x 为 100
 
// 与上面对应的长的写法
x || (x = y)

#邏輯nullish 賦值( ??= )

// 逻辑 nullish
LHS ??= RHS
 
// 等价于
LHS ?? (LHS = RHS)
 
// 事例
// if x.z is nullish, assign x.z to y
let x = {}
let y = 100;
x.z ??= y // x 为 { z: 100 }
 
// 与上面对应的长的写法
x.z ?? (x.z = y)

實作中邏輯賦值的範例

React中的JSX

#

let loading = true
const spinner = <Spinner />
loading &&= spinner

DOM

el.innerHTML ||= 'some default'

物件

// 如果对象没有 onLoad 方法，则设置一个方法
const config = {};
config.onLoad ??= () => console.log('loaded!')

const myObject = { a: {} }
 
myObject.a ||= 'A'; // 被忽略，因为 myObject 中 a 的值为真值
myObject.b ||= 'B'; // myObject.b 会被创建，因为它不丰 myObject 中
 
// {
//  "a": {}
//  "b": "B"
// }
 
myObject.c &&= 'Am I seen?'; // 这里的 myObject.c 为虚值，所以什么都不会做

如何在專案中使用邏輯賦值

## Chrome 已支援邏輯賦值。為了向後相容，請使用 transformer。如果您使用的是Babel，請安裝外掛：

npm install @babel/plugin-proposal-logical-assignment-operators

並在.babelrc 中加入發佈內容：

{
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}

邏輯賦值是一個全新的概念，所以還沒有太多相關的知識。如果你有其他關於邏輯賦值的好用法的例子，請在下面留下評論。

原文網址：https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html

作者：Joe Seifi 

#譯文地址：https://segmentfault.com/a/1190000039923017

更多程式相關知識，請造訪：程式設計影片！ ！

以上是深入淺析JS中的邏輯賦值運算符的詳細內容。更多資訊請關注PHP中文網其他相關文章！