推荐教程：《JavaScript视频教程》
逻辑赋值是对现有数学和二进制逻辑运算符的扩展。我们先复习一下，然后看看把它们结合在一起能得到什么。
首先，我们来看下 JS 中条件运算符与无条件运算符之间的区别。
无条件 vs 有条件
数学运算符，例如 +是无条件的。
在const x = 1 + 2中，无论如何，我们总是将LHS添加到RHS中，并将结果分配给x。
立即学习“Java免费学习笔记（深入）”；
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 = 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
更多编程相关知识，请访问：编程入门！！
以上就是详解javascript中逻辑运算符的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2724462.html
