做者:Joe Seifi
译者:前端小智
移动: https://mp.weixin.qq.com/s/p5...
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。javascript
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及个人系列文章。html
逻辑赋值是对现有数学和二进制逻辑运算符的扩展。咱们先复习一下,而后看看把它们结合在一块儿能获得什么。前端
首先,咱们来看下 JS 中条件运算符
与无条件运算符
之间的区别 😎。java
+
是无条件的。在const x = 1 + 2
中,不管如何,咱们老是将LHS
添加到RHS
中,并将结果分配给x
。git
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
。github
&&
是有条件的在const x = true && 0 + 2
中,首先计算 LHS,它为true
。由于 LHS 的值为true
,因此咱们接下来运行 RHS 操做,它的值为2,同时也运行赋值操做,结果是2
。面试
与const x = false && 0 + 2
相比,LHS 为 false
,所以 RHS 被彻底忽略。npm
你可能想知道为何要避免计算RHS? 两个常见的缘由是得到更好的性能和避免反作用
💪。微信
在 JSX 中咱们常用&&
和||
来有条件地渲染界面。??
是nullish(空值)
合并运算符,它是最近刚经过提案的,很快就会普及。它们都是 二元逻辑运算符。babel
&&
测试 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
中添加发下内容:
{ "plugins": ["@babel/plugin-proposal-logical-assignment-operators"] }
逻辑赋值是一个全新的概念,因此尚未太多相关的知识。若是你有其余关于逻辑赋值的好用法的例子,请在下面留下评论 😜。
代码部署后可能存在的BUG无法实时知道,过后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。
原文:https://seifi.org/javascript/...
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试完整考点、资料以及个人系列文章。