您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

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

时间:2020-10-15 10:47:13  来源:  作者:

逻辑赋值是对现有数学和二进制逻辑运算符的扩展。我们先复习一下,然后看看把它们结合在一起能得到什么。

首先,我们来看下 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"]
}

逻辑赋值是一个全新的概念,所以还没有太多相关的知识。如果你有其他关于逻辑赋值的好用法的例子,请在下面留下评论 。



Tags:逻辑赋值   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
逻辑赋值是对现有数学和二进制逻辑运算符的扩展。我们先复习一下,然后看看把它们结合在一起能得到什么。首先,我们来看下 JS 中条件运算符与无条件运算符之间的区别 。无条件...【详细内容】
2020-10-15  Tags: 逻辑赋值  点击:(80)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(39)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条