Eine eingehende Analyse der logischen Zuweisungsoperatoren in JS

In diesem Artikel erhalten Sie eine ausführliche Erläuterung der logischen Zuweisungsoperatoren in JavaScript. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Logische Zuweisung ist eine Erweiterung bestehender mathematischer und binärer Logikoperatoren. Schauen wir sie uns zunächst an und sehen dann, was wir durch die Kombination erhalten.

Werfen wir zunächst einen Blick auf den Unterschied zwischen bedingtem Operator und unbedingtem Operator in JS. 条件运算符与无条件运算符之间的区别。

无条件 vs 有条件

数学运算符，例如 +是无条件的。

在const x = 1 + 2中，无论如何，我们总是将LHS添加到RHS中，并将结果分配给x。

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。

逻辑运算符，例如 &&是有条件的

在const x = true && 0 + 2中，首先计算 LHS，它为true。因为 LHS 的值为true，所以我们接下来运行 RHS 操作，它的值为2，同时也运行赋值操作，结果是2。

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

你可能想知道为什么要避免计算RHS? 两个常见的原因是获得更好的性能和避免副作用。

二元逻辑运算符

&& || ??

在 JSX 中我们经常使用&&和||来有条件地渲染界面。??是nullish(空值)合并运算符，它是最近刚通过提案的，很快就会普及。它们都是 二元逻辑运算符。

• 使用&&测试 LHS 的结果是否是真值。
• 使用||测试 LHS 的结果是否是虚值。
• 用 ?? 测试 LHS 是否无效。

虚值  vs Nullish

在 JS 中有哪些算是虚值呢？

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

下面这两姐妹被认为是 nullish 值。

• null
• undefined

值得注意的是，使用二元逻辑运算符不一定返回布尔值，而是返回表达式的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 赋值 ( ??= )

// 逻辑 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

Unbedingt vs. bedingt

Mathematische Operatoren wie + sind unbedingt.

In const x = 1 + 2 fügen wir, egal was passiert, immer LHS zu RHS hinzu, und Weisen Sie das Ergebnis x zu.

LHS und RHS sind Konzepte aus dem Bereich der Mathematik, d. h. die linke Seite der Gleichung und die rechte Seite der Gleichung. In unserem aktuellen Szenario sind sie die linke Seite und die rechte Seite des Zuweisungsoperators. Wenn die Variable auf der linken Seite des Zuweisungsoperators erscheint, wird eine LHS-Abfrage durchgeführt; andernfalls wird eine RHS-Abfrage durchgeführt.

Wir können sogar seltsamen Code schreiben, wie zum Beispiel const x = false +2. JS konvertiert zunächst die LHS von false in Number, sodass es const x = Number (false) + 2 und das Ergebnis erhält ist const x = 0 + 2. Es fügt das LHS zum RHS hinzu und weist es schließlich x zu, was zu 2 führt. 🎜

Logische Operatoren wie && sind bedingt

🎜In const x = true && 0 + 2 berechnen Sie zuerst LHS , was true ist. Da der Wert von LHS true ist, führen wir als nächstes die RHS-Operation aus, die den Wert 2 hat, und führen auch die Zuweisungsoperation aus, und das Ergebnis ist 2. 🎜🎜Im Vergleich zu const x = false && 0 + 2 ist LHS false, sodass RHS vollständig ignoriert wird. 🎜🎜Sie fragen sich vielleicht, warum Sie die Berechnung des RHS vermeiden sollten? Zwei häufige Gründe sind, eine bessere Leistung zu erzielen und Nebenwirkungen zu vermeiden. 🎜

Binäre logische Operatoren

&& || ??

🎜In JSX verwenden wir oft && und || zum bedingten Rendern der Schnittstelle. ?? ist der Koaleszenzoperator nullish(null value), der kürzlich genehmigt wurde und bald populär werden wird. Sie alle sind binäre logische Operatoren. 🎜

• Verwenden Sie &&, um zu testen, ob das Ergebnis von LHS wahr ist.
• Verwenden Sie ||, um zu testen, ob das Ergebnis von LHS ein imaginärer Wert ist.
• Verwenden Sie ??, um zu testen, ob das LHS ungültig ist.

Imaginärer Wert vs. Nullish

🎜Was sind die virtuellen Werte in JS? 🎜

• null
• undefiniert
• false
• NaN
• 0
• "" ( Leere Zeichenfolge)

🎜Die folgenden beiden Schwestern gelten als Nullwerte. 🎜

• null
• undefiniert

🎜Es ist erwähnenswert, dass die Verwendung binärer logischer Operatoren nicht unbedingt einen Booleschen Wert zurückgibt, sondern Ist der LHS- oder RHS-Wert des zurückgegebenen Ausdrucks. Um den Sinn dieser Ausdruckstypen zu verdeutlichen, ist es hilfreich, sich diesen Satz aus der ECMAScript-Dokumentation noch einmal anzusehen: 🎜

&& oder || erzeugt Werte, die kein Muss sind vom Typ Boolean sein, sondern einer der Werte in den beiden Operandenausdrücken.

Einige Beispiele

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

Logischer Zuweisungsoperator

&&= ||= ??=

🎜Dieser Operator kombiniert Zuweisung mit bedingten logischen Operatoren, daher der Name "logische Zuweisung". Sie sind nur Abkürzungen, zum Beispiel ist x && = y eine Abkürzung für x && (x = y). 🎜🎜Der von einer logischen Zuweisung zurückgegebene Wert ist nicht die aktualisierte Zuweisung, sondern der Wert des ausgewerteten Ausdrucks. 🎜🎜Aufgrund früherer ECMAScript-Funktionen wie Standardargumente und des Nullish-Koaleszenzoperators könnte man argumentieren, dass es definitiv eine gewisse Redundanz in der durch die logische Zuweisung bereitgestellten Funktionalität gibt. Diese Abkürzung scheint jedoch reibungslos zu sein, und ich bin sicher, dass sie sich als nützlich erweisen wird, wenn wir weitere Anwendungsfälle entdecken. 🎜

Logische UND-Zuordnung ( &&= )

rrreee

Logische ODER-Zuordnung ( ||= )

rrreee

Logische Null-Zuweisung (??=)

rrreee

Beispiele für logische Zuweisung in der Implementierung

🎜 JSX in React🎜rrreee🎜DOM🎜rrreee🎜Object🎜rrreeerrreee

So verwenden Sie es in Ihrem Projekt Logische Zuweisung

🎜Chrome unterstützt bereits logische Zuweisung. Verwenden Sie aus Gründen der Abwärtskompatibilität Transformatoren. Wenn Sie Babel verwenden, installieren Sie bitte das Plug-in: 🎜rrreee🎜 und fügen Sie den folgenden Inhalt in .babelrc hinzu: 🎜rrreee🎜Logische Zuweisung ist ein brandneues Konzept, daher gibt es nicht viel entsprechendes Wissen noch . Wenn Sie weitere Beispiele für die gute Verwendung logischer Zuweisungen haben, hinterlassen Sie bitte unten einen Kommentar. 🎜

Originaladresse: https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html

Autor: Joe Seifi

Übersetzungsadresse: https://segmentfault.com/a/1190000039923017

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse der logischen Zuweisungsoperatoren in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!