ES11 中的逻辑赋值运算符详解
在 ECMAScript 2020(也就是 ES11)中,新增了逻辑赋值运算符,即 &&=
、||=
和 ??=
。这三个运算符可以将逻辑运算和赋值运算合并,从而简化代码。
一、逻辑与赋值
逻辑与操作符 &&
表示,当且仅当两个操作数均为 true
时,才返回 true
。如果其中有一个操作数为 false
,或者是假值(比如 null
、undefined
、''
、NaN
或者 0
),则返回它本身。
---------------- -- --------- -- ------- ----------------- -- --------- -- ----- ---------------- -- --------- -- ----
逻辑与赋值运算符 &&=
的意义就是在原有变量的值上,如果该值为真值,则将其与右侧操作数进行与运算,并将结果重新赋值给原有变量。
--- - - ----- - --- -------- --------------- -- ------- --- - - ------ - --- -------- --------------- -- ----- --- - - ----- - --- -------- --------------- -- ----
在上述代码中,变量 a
的值为 true
,因此它与右侧操作数进行了与运算,并将运算结果 hello
重新赋值给 a
。变量 b
的值为 false
,因此与运算后的结果仍为 false
。变量 c
的值为 null
,也是假值,因此不会执行与运算,它的值保持不变。
二、逻辑或赋值
逻辑或操作符 ||
表示,当且仅当两个操作数均为 false
时,才返回 false
。如果其中有一个操作数为 true
,或者是真值(非 null
、undefined
、''
、NaN
或者 0
),则返回它本身。
------------------- -- ------ -- ------- -------------- -- --------- -- ------- --------------------- -- --- -- -
逻辑或赋值运算符 ||=
的意义就是在原有变量的值上,如果该值为假值,则将其与右侧操作数进行或运算,并将结果重新赋值给原有变量。
--- - - ------ - --- -------- --------------- -- ------- --- - - --- - --- -------- --------------- -- ------- --- - - ----- - --- -------- --------------- -- -------
在上述代码中,变量 a
的值为 false
,因此它将与右侧操作数进行或运算,并将运算结果 hello
重新赋值给 a
。变量 b
的值为 ''
,也是假值,因此进行或运算后得到的是 'world'
。变量 c
的值为 null
,也是假值,因此进行或运算后得到的是 'world'
,重新赋值给了 c
。
三、空值合并赋值
空值合并操作符 ??
表示,如果其左侧操作数为 null
或者 undefined
,则返回右侧操作数;否则返回左侧操作数。
---------------- -- --------- -- ------- --------------------- -- --------- -- ------- ------------------- -- --------- -- -------
空值合并赋值运算符 ??=
的意义就是在原有变量的值上,如果该值为 null
或者 undefined
,则将其与右侧操作数进行空值合并,并将结果重新赋值给原有变量。
--- - - ----- - --- -------- --------------- -- ------- --- - - ---------- - --- -------- --------------- -- ------- --- - - -------- - --- -------- --------------- -- -------
在上述代码中,变量 a
的值为 null
,因此它将与右侧操作数进行空值合并,并将运算结果 hello
重新赋值给 a
。变量 b
的值为 undefined
,因此进行空值合并后得到的是 'world'
,重新赋值给了 b
。变量 c
的值为 'hello'
,不是空值,因此它的值保持不变。
总结
逻辑赋值运算符 &&=
、||=
和 ??=
可以让我们更简洁地表达逻辑运算和赋值运算的组合操作。需要注意的是,在使用它们的时候,要考虑短路运算的情况,以免造成意外的结果。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645c9028968c7c53b0efab09