ECMAScript 2020 中的逻辑赋值运算符

在 ECMAScript 2020 规范中，新引入了三个逻辑赋值运算符：||=、&&= 和 ??=。这些运算符可以简化代码并提高开发效率。本文将介绍这些新运算符的用法，讲解它们的应用场景，并提供示例代码。

什么是逻辑赋值运算符

逻辑赋值运算符是一种将逻辑运算符和赋值运算符结合起来的运算符。逻辑运算符包括逻辑或（||）、逻辑与（&&）和空值合并运算符（??）。逻辑赋值运算符简化了代码，可以轻松实现常见的赋值操作，同时避免了重复性的代码。

逻辑或赋值运算符

逻辑或赋值运算符 ||= 可以简化一个变量的条件赋值。如果该变量的值为假（例如 undefined、null、0、NaN、false 或空字符串），则将其赋值为右侧表达式的结果。如果变量的值不为假，那么不执行任何操作，并返回变量原始的值。

下面是一个将变量 foo 的默认值设置为 'bar' 的示例：

let foo;
foo ||= 'bar';
console.log(foo); // 'bar'

在上面的代码中，由于 foo 的值为假，所以将其赋值为 'bar'。因此，console.log(foo) 将会输出 'bar'。

当变量的值不为假时，逻辑或赋值运算符不会执行任何操作，并返回变量原始的值。下面是一个示例：

let foo = 'baz';
foo ||= 'bar';
console.log(foo); // 'baz'

由于 foo 的值不为假，所以不执行任何操作，并返回 foo 的原始值。

逻辑与赋值运算符

逻辑与赋值运算符 &&= 可以将一个变量的值设置为满足指定条件的结果。如果该变量的值为真（例如非 undefined、非 null、非 0、非 NaN、非 false 和非空字符串），则将其改为右侧表达式的结果。如果变量的值为假，则不执行任何操作，并返回变量原始的值。

下面是一个示例，它将数组 arr 中所有小于 10 的数字加 1：

const arr = [1, 2, 3, 10, 15];
arr.forEach((val, i) => {
  val < 10 &&= arr[i]++;
});
console.log(arr); // [ 2, 3, 4, 10, 15 ]

在上面的代码中，我们使用逻辑与运算符来检查每个数组元素是否小于 10。如果是，就将其加 1。由于第一个元素为 1，小于 10，所以会将其加 1。

空值合并赋值运算符

空值合并赋值运算符 ??= 可以将一个变量的值设置为默认值，只有在其原始值为 null 或 undefined 才会生效。如果该变量的值不为 null 或 undefined，则不执行任何操作，并返回变量原始的值。

下面是一个将变量 foo 的默认值设置为 'bar' 的示例：

let foo;
foo ??= 'bar';
console.log(foo); // 'bar'

由于 foo 的值为 undefined，所以将其赋值为 'bar'。因此，console.log(foo) 将会输出 'bar'。

当变量的值不为 null 或 undefined 时，??= 运算符不执行任何操作，并返回变量原始的值。下面是一个示例：

let foo = 'baz';
foo ??= 'bar';
console.log(foo); // 'baz'

由于 foo 的值不为 undefined，所以不执行任何操作，并返回 foo 的原始值。

总结

逻辑赋值运算符在 ECMAScript 2020 中被引入，可以简化代码并提高开发效率。逻辑或赋值运算符 ||= 可以将变量的值设置为默认值；逻辑与赋值运算符 &&= 可以将变量的值根据指定条件进行更改；空值合并赋值运算符 ??= 可以将变量的值设置为默认值，但仅在其原始值为 null 或 undefined 时生效。这些运算符可以节省代码行数，使代码更具可读性。

希望本文内容对你有所帮助，你可以在你的项目中使用这些运算符来提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2bbde48841e9894f340d7