解析 ECMAScript 2021 中的逻辑赋值运算符

逻辑赋值运算符是一种新的 ECMAScript 2021 中的语法特性，它允许我们在一行代码中同时执行逻辑运算和赋值操作。本文将深入介绍逻辑赋值运算符的使用方法，并提供一些示例代码以帮助读者更好地理解。

逻辑赋值运算符的基础

逻辑赋值运算符可以让我们在一行代码中，同时执行逻辑运算符和赋值操作。这意味着我们可以通过一种简单的方法来检查和更新变量的值，同时减少代码量。

逻辑赋值运算符包括以下几种：

• &&=
• ||=
• ??=（双问号赋值运算符，又称 nullish 合并赋值运算符）

这些运算符建立在 JavaScript 中已经存在的原始逻辑运算符的基础上，并且它们都是右结合的。这意味着，当用多个逻辑赋值运算符对同一个变量进行操作时，它们的执行顺序与原始逻辑运算符不同。

逻辑赋值运算符的使用

&&= 运算符

&&= 运算符会先执行逻辑与运算符，然后根据结果将值赋给变量。如果左侧表达式的值是 falsy，则直接返回这个值，不进行赋值操作。

示例代码：

let a = 3;
a &&= 7;
console.log(a); // 输出 7

let b = 0;
b &&= 8;
console.log(b); // 输出 0

||= 运算符

||= 运算符会先执行逻辑或运算符，然后根据结果将值赋给变量。如果左侧表达式的值是 truthy，则直接返回这个值，不进行赋值操作。

示例代码：

let a = 0;
a ||= 2;
console.log(a); // 输出 2

let b = "Hello";
b ||= "World";
console.log(b); // 输出 "Hello"

??= 运算符

??= 运算符会先判断左侧表达式的值是否 null 或 undefined，然后根据结果将值赋给变量。如果左侧表达式的值既不是 null 也不是 undefined，则直接返回这个值，不进行赋值操作。

示例代码：

let a = null;
a ??= 3;
console.log(a); // 输出 3

let b = 5;
b ??= 7;
console.log(b); // 输出 5

使用逻辑赋值运算符的注意事项

1. 逻辑赋值运算符的优先级比赋值运算符低，并且比原始逻辑运算符高。因此，当表达式中既包含逻辑赋值运算符又包含赋值运算符时，我们必须使用括号来明确计算顺序。

示例代码：

let a = 3, b = 5, c = 8;
(a &&= b += c);
console.log(a, b, c); // 输出 5 13 8

1. 当使用逻辑赋值运算符时，需要注意其右侧表达式的值仅在必要时才会被计算。也就是说，如果左侧表达式的结果是 false，则该表达式不会被执行。

示例代码：

let a = false;
(a &&= 5);
console.log(a); // 输出 false

1. 当使用 ||= 运算符时，需要注意其只会在其左侧表达式的值为 null 或 undefined 时才会执行赋值操作。因此，当变量的值为 false、0、"" 或 NaN 时，使用 ||= 运算符将不能更新该变量的值。

示例代码：

let a = "";
(a ||= "default");
console.log(a); // 输出 ""

let b = NaN;
(b ||= 10);
console.log(b); // 输出 NaN

总结

逻辑赋值运算符是 ECMAScript 2021 中一种非常实用的语法特性，它可以使我们在一行代码中同时执行逻辑运算和赋值操作。在使用逻辑赋值运算符时，我们需要注意计算顺序、表达式是否执行以及变量类型等因素。希望本文的介绍和示例代码可以帮助读者更好地了解和应用逻辑赋值运算符。

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