在 ES2021 中，新增了一种表达式称为“logical assignment”，即逻辑赋值表达式。这种表达式结合了逻辑运算符和赋值运算符，可以简化代码并提高代码的可读性。
什么是逻辑赋值表达式？
逻辑赋值表达式是一种结合了逻辑运算符和赋值运算符的表达式。它可以像普通的赋值表达式一样给变量赋值，并且可以在赋值之前使用逻辑运算符对变量的值进行判断。逻辑赋值表达式的语法如下：
x &&= y x ||= y x ??= y
其中，&&= 表示“如果 x 的值为真，则将 y 的值赋给 x”，||= 表示“如果 x 的值为假，则将 y 的值赋给 x”，??= 表示“如果 x 的值为 null 或 undefined，则将 y 的值赋给 x”。
逻辑赋值表达式的优势
逻辑赋值表达式的优势在于可以简化代码并提高代码的可读性。它可以将一些常见的操作简化为一行代码，例如：
// 传统写法
if (!x) {
x = y;
}
// 逻辑赋值表达式
x ||= y;// 传统写法
if (x === undefined || x === null) {
x = y;
}
// 逻辑赋值表达式
x ??= y;逻辑赋值表达式还可以在链式调用中使用，例如：
-- -------------------- ---- -------
----- --- - -
---- -
---- ----
-
--
-- ----
-- ---------- -
------- - ---
-
-- -------------- -
----------- - ------
-
-- -------
------- --- ---
----------- --- ------逻辑赋值表达式的注意事项
逻辑赋值表达式在使用时需要注意以下几点：
- 逻辑赋值表达式只能用于变量，不能用于属性或数组元素。
- 逻辑赋值表达式不会修改变量的类型，如果变量的类型与赋值的类型不匹配，则会抛出类型错误。
- 逻辑赋值表达式的运算顺序是从左到右，与赋值表达式相同。
示例代码
下面是一些使用逻辑赋值表达式的示例代码：
-- -------------------- ---- -------
--- - - --
--- - - --
- --- -- -- - --- ------- -
--- - - -----
--- - - --
- --- -- -- - --- ---- - --- ----
----- --- - -
---- -
---- ----
-
--
------- --- ---
----------- --- ------ -- ----------- --- -----总结
逻辑赋值表达式是 ES2021 中新增的一种表达式，可以简化代码并提高代码的可读性。使用逻辑赋值表达式需要注意其运算顺序和类型匹配问题，但在合适的场景下使用，可以大大提高代码的简洁性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657ed88cd2f5e1655d9baa42