做者:Joe Seifi
譯者:前端小智
移動: https://mp.weixin.qq.com/s/p5...
有夢想,有乾貨,微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。javascript
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及個人系列文章。html
邏輯賦值是對現有數學和二進制邏輯運算符的擴展。咱們先複習一下,而後看看把它們結合在一塊兒能獲得什麼。前端
首先,咱們來看下 JS 中條件運算符
與無條件運算符
之間的區別 😎。java
+
是無條件的。在const x = 1 + 2
中,不管如何,咱們老是將LHS
添加到RHS
中,並將結果分配給x
。git
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
。github
&&
是有條件的在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 是否無效。在 JS 中有哪些算是虛值呢 😏?
下面這兩姐妹被認爲是 nullish 值 😧。
值得注意的是,使用二元邏輯運算符不必定返回布爾值
,而是返回表達式的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 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... 已收錄,有一線大廠面試完整考點、資料以及個人系列文章。