日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
深入探討 JavaScript 邏輯賦值運算符

邏輯賦值是對現(xiàn)有數(shù)學(xué)和二進(jìn)制邏輯運算符的擴展。我們先復(fù)習(xí)一下，然后看看把它們結(jié)合在一起能得到什么。

“專業(yè)、務(wù)實、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)公司是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都做網(wǎng)站、成都網(wǎng)站制作、軟件開發(fā)、設(shè)計服務(wù)業(yè)務(wù)。我們始終堅持以客戶需求為導(dǎo)向，結(jié)合用戶體驗與視覺傳達(dá)，提供有針對性的項目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！

首先，我們來看下 JS 中條件運算符與無條件運算符之間的區(qū)別 ??。

無條件 vs 有條件

數(shù)學(xué)運算符，例如 +是無條件的。

在const x = 1 + 2中，無論如何，我們總是將LHS添加到RHS中，并將結(jié)果分配給x。

LHS 和 RHS 是數(shù)學(xué)領(lǐng)域內(nèi)的概念，意為等式左邊和等式右邊的意思，在我們現(xiàn)在的場景下就是賦值操作符的左側(cè)和右側(cè)。當(dāng)變量出現(xiàn)在賦值操作符的左邊時，就進(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。

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

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

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

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

二元邏輯運算符

&& || ??

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

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

虛值 vs Nullish

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

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

下面這兩姐妹被認(rèn)為是 nullish 值 ??。

  • null
  • undefined

值得注意的是，使用二元邏輯運算符不一定返回布爾值，而是返回表達(dá)式的LHS或RHS值。為了明確這些表達(dá)式類型的要點，重看一下 ECMAScript 文檔中的這句話是有幫助的：

&&或||產(chǎn)生的值不一定是布爾型的，而是兩個操作數(shù)表達(dá)式之中的一個值。

一些事例

 
 
 
 
      
  
  
  
  1. // && 
    2.   
  
  
  
  2. / /如果 LHS 是真值，計算并返回 RHS，否則返回 LHS 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. true && 100**2 // 10000 
    5.   
  
  
  
  5.   
    6.   
  
  
  
  6. "Joe" && "JavaScript" // "JavaScript" 
    7.   
  
  
  
  7.   
    8.   
  
  
  
  8. false && 100**2 // false 
    9.   
  
  
  
  9.   
    10.   
  
  
  
  10. "" && 100**2 // "" 
    11.   
  
  
  
  11.   
    12.   
  
  
  
  12. NaN && 100**2 // NaN 
    13.   
  
  
  
  13.   
    14.   
  
  
  
  14. null && 100**2 // null 
    15.   
  
  
  
  15.   
    16.   
  
  
  
  16. undefined && 100**2 // undefined 
    17.

邏輯賦值運算符

&&= ||= ??=

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

從邏輯賦值返回的值不是更新的賦值，而是已計算表達(dá)式的值。

由于先前的ECMAScript特性，比如默認(rèn)參數(shù)和nullish合并操作符，你可以說在邏輯賦值所提供的功能中肯定存在一些冗余。雖然這種速記看起來很流暢，而且我相信當(dāng)我們發(fā)現(xiàn)更多的用例時，它會派上用場的。

邏輯與賦值 ( &&= )

 
 
 
 
      
  
  
  
  1. // 邏輯與 
    2.   
  
  
  
  2. LHS &&= RHS 
    3.   
  
  
  
  3. // 等價于  
    4.   
  
  
  
  4. LHS && (LHS = RHS) 
    5.   
  
  
  
  5.   
    6.   
  
  
  
  6. // 事例 
    7.   
  
  
  
  7. // if x is truthy, assign x to y, otherwise return x 
    8.   
  
  
  
  8. // 如果 x 為真值，則將 y 賦值給 x， 否則返回 x 
    9.   
  
  
  
  9. let x = 1 
    10.   
  
  
  
  10. const y = 100 
    11.   
  
  
  
  11. x &&= y // x 為 100 
    12.   
  
  
  
  12.    
    13.   
  
  
  
  13. // 與上面對應(yīng)的長的寫法 
    14.   
  
  
  
  14. x && (x = y) 
    15.

邏輯或賦值 ( ||= )

 
 
 
 
      
  
  
  
  1. // 邏輯或 
    2.   
  
  
  
  2. LHS ||= RHS 
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4. // 等價于 
    5.   
  
  
  
  5. LHS || (LHS = RHS) 
    6.   
  
  
  
  6.   
    7.   
  
  
  
  7. // 事例 
    8.   
  
  
  
  8. // 如果 x 為真值，返回 x，否則將 y 賦值給 x 
    9.   
  
  
  
  9. let x = NaN 
    10.   
  
  
  
  10. const y = 100 
    11.   
  
  
  
  11. x ||= y // x 為 100 
    12.   
  
  
  
  12.   
    13.   
  
  
  
  13. // 與上面對應(yīng)的長的寫法 
    14.   
  
  
  
  14. x || (x = y) 
    15.

邏輯 nullish 賦值 ( ??= )

 
 
 
 
      
  
  
  
  1. // 邏輯 nullish 
    2.   
  
  
  
  2. LHS ??= RHS 
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4. // 等價于 
    5.   
  
  
  
  5. LHS ?? (LHS = RHS) 
    6.   
  
  
  
  6.   
    7.   
  
  
  
  7. // 事例 
    8.   
  
  
  
  8. // if x.z is nullish, assign x.z to y 
    9.   
  
  
  
  9. let x = {} 
    10.   
  
  
  
  10. let y = 100; 
    11.   
  
  
  
  11. x.z ??= y // x 為 { z: 100 } 
    12.   
  
  
  
  12.   
    13.   
  
  
  
  13. // 與上面對應(yīng)的長的寫法 
    14.   
  
  
  
  14. x.z ?? (x.z = y) 
    15.

實現(xiàn)中邏輯賦值的例子

React中的JSX

 
 
 
 
      
  
  
  
  1. let loading = true 
    2.   
  
  
  
  2. const spinner =  
    3.   
  
  
  
  3. loading &&= spinner 
    4.

DOM

 
 
 
 
      
  
  
  
  1. el.innerHTML ||= 'some default' 
    2.

對象

 
 
 
 
      
  
  
  
  1. // 如果對象沒有 onLoad 方法，則設(shè)置一個方法 
    2.   
  
  
  
  2. const config = {}; 
    3.   
  
  
  
  3. config.onLoad ??= () => console.log('loaded!') 
    4.  
 
 

 
 
 
 
      
  
  
  
  1. const myObject = { a: {} } 
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3. myObject.a ||= 'A'; // 被忽略，因為 myObject 中 a 的值為真值 
    4.   
  
  
  
  4. myObject.b ||= 'B'; // myObject.b 會被創(chuàng)建，因為它不豐 myObject 中 
    5.   
  
  
  
  5.   
    6.   
  
  
  
  6. // { 
    7.   
  
  
  
  7. //  "a": {} 
    8.   
  
  
  
  8. //  "b": "B" 
    9.   
  
  
  
  9. // } 
    10.   
  
  
  
  10.   
    11.   
  
  
  
  11. myObject.c &&= 'Am I seen?'; // 這里的 myObject.c 為虛值，所以什么都不會做 
    12.

如何在項目中使用邏輯賦值

Chrome 已經(jīng)支持邏輯賦值。為了向后兼容，請使用 transformer。如果您使用的是Babel，請安裝插件：

 
 
 
 
      
  
  
  
  1. npm install @babel/plugin-proposal-logical-assignment-operators 
    2.

并在 .babelrc 中添加發(fā)下內(nèi)容：

 
 
 
 
      
  
  
  
  1. { 
    2.   
  
  
  
  2.   "plugins": ["@babel/plugin-proposal-logical-assignment-operators"] 
    3.   
  
  
  
  3. } 
    4.

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

作者：Joe Seifi 譯者：前端小智 原文：https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。


標(biāo)題名稱：深入探討 JavaScript 邏輯賦值運算符
分享URL：http://www.5511xx.com/article/cohcsji.html