欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入了解JavaScript中邏輯賦值運(yùn)算符的應(yīng)用

 更新時(shí)間:2022年11月30日 09:20:51   作者:前端小智  
邏輯賦值是對現(xiàn)有數(shù)學(xué)和二進(jìn)制邏輯運(yùn)算符的擴(kuò)展。我們先復(fù)習(xí)一下,然后看看把它們結(jié)合在一起能得到什么,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

無條件 vs 有條件

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

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

LHS 和 RHS 是數(shù)學(xué)領(lǐng)域內(nèi)的概念,意為等式左邊和等式右邊的意思,在我們現(xiàn)在的場景下就是賦值操作符的左側(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,所以我們接下來運(yùn)行 RHS 操作,它的值為2,同時(shí)也運(yùn)行賦值操作,結(jié)果是2

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

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

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

&& || ??

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

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

虛值 vs Nullish

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

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

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

  • null
  • undefined

值得注意的是,使用二元邏輯運(yùn)算符不一定返回布爾值,而是返回表達(dá)式的LHSRHS值。為了明確這些表達(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é)合在一起,因此命名為“邏輯賦值” 。 它們只是一種簡寫, 例如,x && = yx && (x = y) 的簡寫。

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

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

邏輯與賦值 ( &&= )

// 邏輯與
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
  
// 與上面對應(yīng)的長的寫法
x && (x = y)

邏輯或賦值 ( ||= )

// 邏輯或
LHS ||= RHS
 
// 等價(jià)于
LHS || (LHS = RHS)
 
// 事例
// 如果 x 為真值,返回 x,否則將 y 賦值給 x
let x = NaN
const y = 100
x ||= y // x 為 100
 
// 與上面對應(yī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 }
 
// 與上面對應(yīng)的長的寫法
x.z ?? (x.z = y)

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

React中的JSX

let loading = true
const spinner = <Spinner />
loading &&= spinner

DOM

el.innerHTML ||= 'some default'

對象

// 如果對象沒有 onLoad 方法,則設(shè)置一個(gè)方法
const config = {};
config.onLoad ??= () => console.log('loaded!')
const myObject = { a: {} }
 
myObject.a ||= 'A'; // 被忽略,因?yàn)?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)支持邏輯賦值。 為了向后兼容,請使用 transformer。 如果您使用的是Babel,請安裝插件:

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

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

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

邏輯賦值是一個(gè)全新的概念,所以還沒有太多相關(guān)的知識(shí)。

到此這篇關(guān)于深入了解JavaScript中邏輯賦值運(yùn)算符的應(yīng)用的文章就介紹到這了,更多相關(guān)JavaScript邏輯賦值運(yùn)算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論