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. 条件运算符与无条件运算符之间的区别。
+是无条件的。在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 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. 🎜&& sind bedingtconst 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. 🎜&& 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. 🎜&&, 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 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.
{
"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. 🎜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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
