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

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

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

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

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

首先,咱們來看下 JS 中條件運算符無條件運算符之間的區別 😎。java

無條件 vs 有條件

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

const x = 1 + 2中,不管如何,咱們老是將LHS添加到RHS中,並將結果分配給xgit

LHS 和 RHS 是數學領域內的概念,意爲等式左邊和等式右邊的意思,在咱們如今的場景下就是賦值操做符的左側和右側。當變量出如今賦值操做符的左邊時,就進行 LHS 查詢;反之進行 RHS 查詢 😨。

咱們甚至能夠編寫一些奇怪的代碼,例如const x = false +2。JS 首先將false的 LHS 轉換爲Number,所以獲得const x = Number(false)+ 2,其結果爲const x = 0 + 2。 它將 LHS 添加到RHS,最後將其分配給x,得出2github

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

const x = true && 0 + 2中,首先計算 LHS,它爲true。由於 LHS 的值爲true,因此咱們接下來運行 RHS 操做,它的值爲2,同時也運行賦值操做,結果是2面試

const x = false && 0 + 2相比,LHS 爲 false,所以 RHS 被徹底忽略。npm

你可能想知道爲何要避免計算RHS? 兩個常見的緣由是得到更好的性能和避免反作用 💪。微信

二元邏輯運算符

&& || ??

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

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

虛值 vs Nullish

在 JS 中有哪些算是虛值呢 😏?

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

下面這兩姐妹被認爲是 nullish 值 😧。

  • null
  • undefined

值得注意的是,使用二元邏輯運算符不必定返回布爾值,而是返回表達式的LHSRHS值。爲了明確這些表達式類型的要點,重看一下 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 && = yx && (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... 已收錄,有一線大廠面試完整考點、資料以及個人系列文章。

相關文章
相關標籤/搜索