ES2021 中的 “logical assignment” 表达式-JavaScript中文网-JavaScript教程资源分享门户

在 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;

逻辑赋值表达式还可以在链式调用中使用，例如：

// javascriptcn.com 代码示例
const obj = {
  foo: {
    bar: null
  }
};

// 传统写法
if (!obj.foo) {
  obj.foo = {};
}
if (!obj.foo.bar) {
  obj.foo.bar = 'baz';
}

// 逻辑赋值表达式
obj.foo ||= {};
obj.foo.bar ??= 'baz';

逻辑赋值表达式的注意事项

逻辑赋值表达式在使用时需要注意以下几点：

逻辑赋值表达式只能用于变量，不能用于属性或数组元素。
逻辑赋值表达式不会修改变量的类型，如果变量的类型与赋值的类型不匹配，则会抛出类型错误。
逻辑赋值表达式的运算顺序是从左到右，与赋值表达式相同。

示例代码

下面是一些使用逻辑赋值表达式的示例代码：

// javascriptcn.com 代码示例
let x = 1;
let y = 2;

x ||= y; // x 的值为 1，不会赋值为 2

let a = null;
let b = 3;

a ??= b; // a 的值为 3，因为 a 的值为 null

const obj = {
  foo: {
    bar: null
  }
};

obj.foo ||= {};
obj.foo.bar ??= 'baz'; // obj.foo.bar 的值为 'baz'

总结

逻辑赋值表达式是 ES2021 中新增的一种表达式，可以简化代码并提高代码的可读性。使用逻辑赋值表达式需要注意其运算顺序和类型匹配问题，但在合适的场景下使用，可以大大提高代码的简洁性和可读性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657ed88cd2f5e1655d9baa42