温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript怎么使用逻辑赋值运算符

发布时间:2022-05-06 15:57:05 来源:亿速云 阅读:149 作者:iii 栏目:大数据

本篇内容主要讲解“JavaScript怎么使用逻辑赋值运算符”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript怎么使用逻辑赋值运算符”吧!

无条件 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"] }

到此,相信大家对“JavaScript怎么使用逻辑赋值运算符”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI