深入探讨 JavaScript 逻辑赋值运算符

作者: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

值得注意的是,使用二元逻辑运算符不一定返回布尔值,而是返回表达式的LHSRHS值。为了明确这些表达式类型的要点,重看一下 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 && = yx && (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... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。


终身学习者
我要先坚持分享20年,大家来一起见证吧。
66.4k 声望
104.7k 粉丝
0 条评论
推荐阅读
不要用100vh做移动响应
本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。更多开源作品请看 GitHub [链接] ,包含一线大厂面试完整考点、资料以及我的系列文章。

前端小智4阅读 388

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

66.4k 声望
104.7k 粉丝
宣传栏