随着 JavaScript 语言的发展，越来越多的新特性被引入，以提高开发人员的效率。ES11（也称为 ECMAScript 2020）是 JavaScript 中的最新标准版本，其中引入了许多新功能，包括逻辑赋值运算符。
逻辑赋值运算符是使用逻辑运算符和赋值运算符一起使用的一种简洁的语法结构。逻辑运算符是 “与（&&）”、“或（||）”、“非（！）”，赋值运算符是 “=”。通过使用逻辑赋值运算符，可以将逻辑表达式和赋值表达式合并到一起，简化代码。在本文中，我们将探讨 ES11 中的逻辑赋值运算符详细内容以及如何使用逻辑赋值运算符来简化代码。
基础逻辑赋值
基础逻辑赋值包括 “逻辑与赋值（&&=）”和 “逻辑或赋值（||=）”。当我们需要将变量值与其他值进行比较或操作时，我们可能会写出这样的代码：
if (x === undefined) {
x = 10;
}上述代码可以简化为以下逻辑赋值运算符代码：
x ||= 10;
此代码的意思是，如果变量 x 的值为 falsy（包括 undefined、null、false、0、NaN 或空字符串），则将其赋值为 10。
类似地，如果我们需要将变量与其他值比较或操作，并将结果赋值给该变量，则可以使用逻辑与赋值运算符。例如：
let max = 10;
if (val > max) {
max = val;
}可以简化为：
max &&= val;
此代码的意思是，如果变量 max 的值为 truthy（不包括 undefined、null、false、0、NaN 或空字符串），则将其赋值为变量 val 的值。否则不执行任何操作。
空值合并赋值
空值合并赋值是 ES11 中引入的一种逻辑赋值运算符，用于处理变量值为 null 或 undefined 的情况。通常，我们使用三元运算符（?:）在变量值为 null 或 undefined 的情况下设置默认值。例如：
const name = storedName !== null && storedName !== undefined ? storedName : "Default Name";
可以简化为以下空值合并赋值运算符代码：
const name = storedName ?? "Default Name";
此代码的意思是，如果 storedName 的值为 null 或 undefined，则将其赋值为 “Default Name”。
深度逻辑赋值
除了基本逻辑赋值之外，ES11 还引入了一种深度逻辑赋值运算符：逻辑链赋值运算符（||=）和逻辑链 null 合并赋值运算符（??=）。这两种运算符与基本逻辑赋值不同之处在于，它们可以在对象深层属性的级别上执行逻辑赋值操作。例如：
let person = {};
if (!person.address) {
person.address = {};
}
if (!person.address.city) {
person.address.city = "New York";
}可以简化为以下逻辑链赋值运算符代码：
person.address ||= {};
person.address.city ||= "New York";或者直接使用逻辑链 null 合并赋值运算符：
person.address ??= {};
person.address.city ??= "New York";逻辑链赋值运算符的作用是，如果 person.address 属性的值为 falsy，则将其赋值为空对象。然后，在不管城市属性是否存在的情况下，都将其赋值为 "New York"。
逻辑链 null 合并赋值运算符的作用与空值合并赋值运算符类似，只是它可以在对象深度嵌套的属性上设置默认值。
结论
逻辑赋值运算符是一种新的 JavaScript 语言特性，它可以帮助开发人员更简单、更高效地编写代码。使用基础逻辑赋值运算符可以简化代码的比较和赋值操作，使用空值合并赋值运算符可以更轻松地处理 null 和 undefined 变量，而深度逻辑赋值运算符则可以在对象的深层属性级别上执行逻辑赋值操作。
在编写代码时，我们可以考虑使用逻辑赋值运算符来增加代码的简洁性和可读性。当然，有些情况下，我们可能需要更复杂的条件语句来处理逻辑运算，这时候我们应该选择使用传统的 if-else 语句。
下面是一些使用逻辑赋值运算符的示例代码：
-- -------------------- ---- ------- ----- ------ - ------ ------ --- ----- -- ------ -- ---- --- ----- --- - --- -------- --- ---------- ---------------------- -- ------ --------- ----- ------ - --- -------------- --- --- ------------------- --- ---- ------ --------------------------------- -- ------ ---- -----
希望这篇文章能帮助您了解更多关于 ES11 中逻辑赋值的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67171a5cad1e889fe21fd04c