本篇文章带大家深入探讨一下 javascript 逻辑赋值运算符。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
逻辑赋值是对现有数学和二进制逻辑运算符的扩展。我们先复习一下，然后看看把它们结合在一起能得到什么。
首先，我们来看下 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 中有哪些算是虚值呢？
nullundefinedfalsenan0 (空字符串)下面这两姐妹被认为是 nullish 值。
nullundefined值得注意的是，使用二元逻辑运算符不一定返回布尔值，而是返回表达式的lhs或rhs值。为了明确这些表达式类型的要点，重看一下 ecmascript 文档中的这句话是有帮助的：
&&或||产生的值不一定是布尔型的，而是两个操作数表达式之中的一个值。一些事例// &&/ /如果 lhs 是真值，计算并返回 rhs，否则返回 lhstrue && 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， 否则返回 xlet x = 1const y = 100x &&= y // x 为 100 // 与上面对应的长的写法x && (x = y)
逻辑或赋值 ( ||= )// 逻辑或lhs ||= rhs // 等价于lhs || (lhs = rhs) // 事例// 如果 x 为真值，返回 x，否则将 y 赋值给 xlet x = nanconst y = 100x ||= y // x 为 100 // 与上面对应的长的写法x || (x = y)
逻辑 nullish 赋值 ( = )// 逻辑 nullishlhs = rhs // 等价于lhs (lhs = rhs) // 事例// if x.z is nullish, assign x.z to ylet x = {}let y = 100;x.z = y // x 为 { z: 100 } // 与上面对应的长的写法x.z (x.z = y)
实现中逻辑赋值的例子react中的jsx
let loading = trueconst 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 中添加发下内容：
{ "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]}
逻辑赋值是一个全新的概念，所以还没有太多相关的知识。如果你有其他关于逻辑赋值的好用法的例子，请在下面留下评论。
原文地址：https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html
作者：joe seifi 
译文地址：https://segmentfault.com/a/1190000039923017
更多编程相关知识，请访问：编程视频！！
以上就是深入浅析js中的逻辑赋值运算符的详细内容。