使用 ES12 中的 Logical Assignment 运算符增加代码可读性和简洁度-JavaScript中文网-JavaScript教程资源分享门户

ES12 中新增加的 Logical Assignment 运算符是一种用于简化代码的语法结构，能够让我们在写代码的时候更加高效和清晰明了。通过这个运算符，我们可以在一个赋值结构中同时设置逻辑操作。这篇文章将探讨这种运算符的具体用法，并通过示例代码来展示它的实际应用。

什么是 Logical Assignment 运算符？

Logical Assignment 运算符是 ES12 中新增加的一种运算符，可以用于在一次表达式中同时执行逻辑操作和取值操作。我们可以将逻辑操作（比如 And、Or、Nullish Coalescing 等）和赋值操作同时写在一个表达式中，从而简化我们的代码并提高可读性。

和其他的运算符一样，Logical Assignment 运算符区分大小写，包括三种不同的运算符：And 以及 Or 和 Nullish Coalescing 运算符。这三种运算符的具体用法在下面一一给出。

And 运算符表示 &&，通常用于判断某个变量是否存在并且不为空（truthy）。如果变量存在且不为空，则表达式返回变量的值；否则返回 false，并且不对变量进行赋值。

下面的例子中，我们可以使用 And 运算符检查一个对象中的某个属性是否存在并且不为空：

let obj = {
  prop1: 'Hello, world!'
};

let prop1 = obj.prop1 && console.log(obj.prop1);

在这个例子中，代码使用 And 运算符同时进行了三个操作：

Or 运算符表示 ||，通常用于检查某个变量的值是否为 falsy。如果变量的值为 falsy，则表达式返回赋值操作符右边的值；否则返回变量的值，不对变量进行赋值。

下面的例子中，我们可以使用 Or 运算符为某个变量设置一个默认值：

let foo = null;

foo ||= 10;

console.log(foo); // 输出 10

在这个例子中，我们使用 Or 运算符执行了两个操作：

Nullish Coalescing 运算符表示 ??，它是一种特殊的 Or 运算符。和 Or 运算符不同的是，Nullish Colsceing 运算符只有在变量的值为 null 或 undefined 时才会返回赋值操作符右边的值。

下面的例子中，我们可以使用 Nullish Coalescing 运算符为某个变量设置一个默认值，在变量的值不是 null 或 undefined 时不对变量进行赋值：

let bar = null;

bar ??= 10;

console.log(bar); // 输出 10

在这个例子中，我们使用 Nullish Coalescing 运算符执行了两个操作：

通过使用 ES12 中的 Logical Assignment 运算符，我们可以在代码中同时执行逻辑操作和赋值操作，从而让代码更加简洁明了，并提高其可读性和可维护性。在我们的代码中，应该注意尽量使用这些运算符，从而提高我们的开发效率和代码质量。

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