了解 ECMAScript 2021 (ES12) 中的逻辑按序执行操作符

ECMAScript 2021，也被称为 ES12，是 JavaScript 编程语言的最新版本。它引入了一些新的特性，以帮助开发人员更有效地编写代码。其中一个重要的特性是逻辑按序执行操作符（Logical Assignment Operators），本文将介绍该操作符的用途、语法及示例代码，并指导如何在代码中应用它来提升开发效率。

逻辑按序执行操作符

逻辑按序执行操作符是一组新的运算符，包括 ||=，&&=，??=。它们允许我们对变量进行逻辑按序执行操作，并且在该操作的结束时将结果赋值给该变量。这对于构建简单和干净的代码非常有用。

这些新的运算符使得我们可以更容易地写出更简洁的代码。举个例子，下面的代码：

if (!x) {
  x = 42;
}

可以被重写为：

x ||= 42;

逻辑或赋值操作符

逻辑或赋值操作符 ||= 用于将变量 x 赋值为 y，只有当 x 是假值时才会生效，否则不做更改。假值包括 false、0、""、null、undefined、NaN 等。

示例代码：

let x = 0;
x ||= 42;
console.log(x);  // 42，因为 0 是一个假值

如果我们更改 x 的初始值，这个值将不会更改：

let x = 42;
x ||= 1337;
console.log(x);  // 42，因为 42 不是一个假值

逻辑与赋值操作符

逻辑与赋值操作符 &&= 用于将变量 x 赋值为 y，只有当 x 是真值时才会生效，否则不做更改。真值包括除了假值以外的所有值。

示例代码：

let x = 42;
x &&= 1337;
console.log(x);  // 1337，因为 42 是一个真值

如果我们更改 x 的初始值，这个值将不会更改：

let x = "";
x &&= 1337;
console.log(x);  // ""，因为 "" 是一个假值

逻辑空值合并赋值操作符

逻辑空值合并赋值操作符 ??= 用于将变量 x 赋值为 y，只有当 x 是 null 或 undefined 时才会生效，否则不做更改。

示例代码：

let x;
x ??= 1337;
console.log(x);  // 1337，因为 x 是 undefined

如果我们将 x 的值设置为一个值，则该值将不会更改：

let x = 42;
x ??= 1337;
console.log(x);  // 42，因为 x 不是 null 或 undefined

总结

逻辑按序执行操作符是 ECMAScript 2021 中引进的新特性之一。它们提供了一种简单和高效的方法，能够改进代码的简洁性和可读性。了解这些新操作符的作用、使用方法以及示例代码，可以帮助你更快速地掌握这个特性，并在开发中使用这些新运算符，提高代码的质量、可读性、可维护性。

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