深入探讨 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 。
逻辑运算符 ， 例如--tt-darkmode-color: #9B9B9B;">在const x = true--tt-darkmode-color: #9B9B9B;">与const x = false--tt-darkmode-color: #9B9B9B;">你可能想知道为什么要避免计算RHS? 两个常见的原因是获得更好的性能和避免副作用。
二元逻辑运算符 --tt-darkmode-color: #9B9B9B;">在 JSX 中我们经常使用 --tt-darkmode-color: #9B9B9B;">在 JS 中有哪些算是虚值呢 ？
- null
- undefined
- false
- NaN
- 0
- "" (空字符串)
- null
- undefined
--tt-darkmode-color: #48B378;">逻辑赋值运算符 --tt-darkmode-color: #9B9B9B;">这个运算符将赋值与条件逻辑运算符结合在一起 ， 因此命名为**“逻辑赋值”**。 它们只是一种简写 ，例如 ， x--tt-darkmode-color: #9B9B9B;">从逻辑赋值返回的值不是更新的赋值 ， 而是已计算表达式的值 。
由于先前的ECMAScript特性 ， 比如默认参数和nullish合并操作符 ， 你可以说在逻辑赋值所提供的功能中肯定存在一些冗余 。 虽然这种速记看起来很流畅 ， 而且我相信当我们发现更多的用例时 ， 它会派上用场的 。
逻辑与赋值 ( x.z ??= y // x 为 { z: 100 } // 与上面对应的长的写法x.z ?? (x.z = y)实现中逻辑赋值的例子React中的JSX
let loading = trueconst spinner = loading--tt-darkmode-color: #9B9B9B;">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// 这里的 myObject.c 为虚值 ， 所以什么都不会做如何在项目中使用逻辑赋值Chrome 已经支持逻辑赋值 。 为了向后兼容 ， 请使用 transformer 。 如果您使用的是Babel ， 请安装插件：
npm install @babel/plugin-proposal-logical-assignment-operators并在 .babelrc 中添加发下内容：
{"plugins": ["@babel/plugin-proposal-logical-assignment-operators"]}逻辑赋值是一个全新的概念 ， 所以还没有太多相关的知识 。 如果你有其他关于逻辑赋值的好用法的例子 ， 请在下面留下评论。
今天给到大家福利是《Vue.js源码全方位深入解析 （含Vue3.0源码分析）》 ， 领取方式 ， 转发+点赞 ， 私信我 "源码" ，即可免费获取 。
- 全新8核国产CPU深入探秘：马上能买到
- 16G运存+256G内存，专业骁龙865旗舰，性价比深入人心
- 城市|《智能城市》：探讨智能城市规划建设新模式
- 深入理解Netty编解码、粘包拆包、心跳机制
- 绿色骑行深入校园，共享单车长途长时需求量提升
- 19位院士齐聚广州，探讨海洋科技发展前沿
- 深入调查SolarWinds黑客事件 微软已查封一个核心服务器
- 《深入理解Java虚拟机》：Java内存区域
- 轻巧无依赖，Javascript简单的轮播插件——Siema
- 关于离心泵智能化及路径探讨