Empfohlenes Tutorial: „JavaScript-Video-Tutorial“
Logische Zuweisung ist eine Erweiterung bestehender mathematischer und binärer logischer Operatoren. 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 Conditional Operator und Unconditional Operator in JS. 条件运算符与无条件运算符之间的区别。
+是无条件的。在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 是否无效。在 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
+ sind unbedingt. const x = 1 + 2 fügen wir, egal was passiert, immer LHS zu RHS hinzu und das Ergebnis wird zugewiesen x. LHS und RHS sind Konzepte aus dem Bereich der Mathematik, also die linke und rechte Seite der Gleichung. In unserem aktuellen Szenario sind sie die linke und 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
const x = false +2. JS konvertiert zunächst die LHS vonfalseinNumber, sodass esconst x = Number (false) + 2und das Ergebniserhält ist const x = 0 + 2. Es fügt das LHS zum RHS hinzu und weist es schließlichxzu, was zu2führt.Logische Operatoren wie
&&sind bedingtIn
Im Vergleich zuconst x = true && 0 + 2wird zuerst die LHS berechnet, alsotrue. Da der Wert von LHStrueist, führen wir als nächstes die RHS-Operation aus, die den Wert 2 hat, und führen auch die Zuweisungsoperation aus. Das Ergebnis ist2.const x = false && 0 + 2ist LHSfalse, 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 häufig && und || zum bedingten Rendern die 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.
&&, um zu testen, ob das Ergebnis von LHS wahr ist. ||, um zu testen, ob das Ergebnis von LHS ein imaginärer Wert ist. ??, um zu testen, ob das LHS ungültig ist. Booleschen Wert zurückgibt, sondern Ist der LHS- oder RHS-Wert des zurückgegebenen Ausdrucks. Um den Sinn dieser Ausdruckstypen deutlich zu machen, ist es hilfreich, sich diesen Satz aus der ECMAScript-Dokumentation noch einmal anzusehen: 🎜🎜Der von && oder || erzeugte Wert ist nicht unbedingt boolesch. sondern einer der beiden Operandenausdrücke. 🎜{
"plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}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. 🎜.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. 🎜🎜🎜Englische Originaladresse: https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html🎜🎜Autor: Joe Seifi 🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung logischer Operatoren in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
