乐趣区

关于javascript:深入探讨-JavaScript-逻辑赋值运算符

jiezi

作者：Joe Seifi
译者：前端小智
挪动：https://mp.weixin.qq.com/s/p5…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

逻辑赋值是对现有数学和二进制逻辑运算符的扩大。咱们先温习一下，而后看看把它们联合在一起能失去什么。

首先，咱们来看下 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 中有哪些算是虚值呢 😏？

  • null
  • undefined
  • false
  • NaN
  • 0
  • “” (空字符串)

上面这两姐妹被认为是 nullish 值 😧。

  • null
  • undefined

值得注意的是，应用二元逻辑运算符不肯定返回 布尔值 ，而是返回表达式的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 赋值 (??=)

// 逻辑 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… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版