江苏龙网

  1. 首页 > 人文 > >

深入探讨 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
  • "" (空字符串)
下面这两姐妹被认为是 nullish 值。
  • null
  • undefined
值得注意的是 ， 使用二元逻辑运算符不一定返回布尔值 ， 而是返回表达式的LHS或RHS值 。 为了明确这些表达式类型的要点 ， 重看一下 ECMAScript 文档中的这句话是有帮助的：
--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源码分析）》 ， 领取方式 ， 转发+点赞 ， 私信我 "源码" ，即可免费获取 。


推荐阅读


上一篇：复古风机械键盘？杜伽Fusion这风格你爱了吗？

下一篇：华为正式加大研发“马力”！谁也没想到，5G最大“敌人”是它？