深刻探討 JavaScript 邏輯賦值運算符

做者：Joe Seifi
譯者：前端小智
移動： https://mp.weixin.qq.com/s/p5...

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

邏輯賦值是對現有數學和二進制邏輯運算符的擴展。咱們先複習一下，而後看看把它們結合在一塊兒能獲得什麼。

首先，咱們來看下 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"]
}

邏輯賦值是一個全新的概念，因此尚未太多相關的知識。若是你有其餘關於邏輯賦值的好用法的例子，請在下面留下評論 😜。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://seifi.org/javascript/...

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。