這篇文章主要介紹“JavaScript邏輯賦值運(yùn)算符怎么使用”，在日常操作中，相信很多人在JavaScript邏輯賦值運(yùn)算符怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JavaScript邏輯賦值運(yùn)算符怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)是一家專業(yè)提供費(fèi)縣企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、html5、小程序制作等業(yè)務(wù)。10年已為費(fèi)縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

無(wú)條件 vs 有條件

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

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

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

邏輯運(yùn)算符，例如 &&是有條件的

在const x = true && 0 + 2中，首先計(jì)算 LHS，它為true。因?yàn)?LHS 的值為true，所以我們接下來(lái)運(yùn)行  RHS 操作，它的值為2，同時(shí)也運(yùn)行賦值操作，結(jié)果是2。

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

你可能想知道為什么要避免計(jì)算RHS? 兩個(gè)常見(jiàn)的原因是獲得更好的性能和避免副作用 ??。

二元邏輯運(yùn)算符

&& || ??

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

• 使用&&測(cè)試 LHS 的結(jié)果是否是真值。

• 使用||測(cè)試 LHS 的結(jié)果是否是虛值。

• 用 ?? 測(cè)試 LHS 是否無(wú)效。

虛值 vs Nullish

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

• null

• undefined

• false

• NaN

• 0

• "" (空字符串)

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

• null

• undefined

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

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

一些事例

// && / /如果 LHS 是真值，計(jì)算并返回 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

邏輯賦值運(yùn)算符

&&= ||= ??=

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

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

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

邏輯與賦值 ( &&= )

// 邏輯與 LHS &&= RHS // 等價(jià)于  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    // 與上面對(duì)應(yīng)的長(zhǎng)的寫法 x && (x = y)

邏輯或賦值 ( ||= )

// 邏輯或 LHS ||= RHS   // 等價(jià)于 LHS || (LHS = RHS)   // 事例 // 如果 x 為真值，返回 x，否則將 y 賦值給 x let x = NaN const y = 100 x ||= y // x 為 100   // 與上面對(duì)應(yīng)的長(zhǎng)的寫法 x || (x = y)

邏輯 nullish 賦值 ( ??= )

// 邏輯 nullish LHS ??= RHS   // 等價(jià)于 LHS ?? (LHS = RHS)   // 事例 // if x.z is nullish, assign x.z to y let x = {} let y = 100; x.z ??= y // x 為 { z: 100 }   // 與上面對(duì)應(yīng)的長(zhǎng)的寫法 x.z ?? (x.z = y)

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

React中的JSX

let loading = true const spinner =  loading &&= spinner

DOM

el.innerHTML ||= 'some default'

對(duì)象

// 如果對(duì)象沒(méi)有 onLoad 方法，則設(shè)置一個(gè)方法 const config = {}; config.onLoad ??= () => console.log('loaded!')

const myObject = { a: {} }   myObject.a ||= 'A'; // 被忽略，因?yàn)?nbsp;myObject 中 a 的值為真值 myObject.b ||= 'B'; // myObject.b 會(huì)被創(chuàng)建，因?yàn)樗回S myObject 中   // { //  "a": {} //  "b": "B" // }   myObject.c &&= 'Am I seen?'; // 這里的 myObject.c 為虛值，所以什么都不會(huì)做

如何在項(xiàng)目中使用邏輯賦值

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

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

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

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

到此，關(guān)于“JavaScript邏輯賦值運(yùn)算符怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！