随着 JavaScript 语言不断发展，新的语法和特性不断被加入，使得前端开发变得更加高效和便捷。其中，ES12 中的逻辑赋值运算符就是一项非常实用且强大的特性。本文将详细介绍 ES12 中的逻辑赋值运算符，并通过示例代码演示如何使用它来简化代码。
什么是逻辑赋值运算符
逻辑赋值运算符由两部分组成，分别是逻辑运算符和赋值运算符。常见的逻辑运算符包括 && 和 ||，常见的赋值运算符包括 =、+=、-=、*=、/= 等。
在 ES12 中，可以将逻辑运算符和赋值运算符合并为一个运算符，形成逻辑赋值运算符。例如，结合 && 和赋值运算符，就可以得到 &&= 这个逻辑赋值运算符，表示只有左操作数为真时，才对右操作数进行赋值操作。
逻辑赋值运算符包括以下几种：
- &&=：表示只有左操作数为真时，才对右操作数进行赋值操作。
- ||=：表示只有左操作数为假时，才对右操作数进行赋值操作。
- ??=：表示只有左操作数为 null 或 undefined 时，才对右操作数进行赋值操作。
如何使用逻辑赋值运算符
逻辑赋值运算符可以用于简化一些常见的操作，例如判断变量是否为 null 或 undefined，然后给它赋一个默认值。
以 || 运算符为例，我们通常会这样写：
let name;
if (!name) {
name = 'default';
}但是，使用逻辑赋值运算符，可以将上面的代码简化为：
let name; name ||= 'default';
这里的代码表示，如果变量 name 为 falsy 值，也就是 null 或 undefined，那么就将 'default' 赋值给它。这样，代码就变得更加简洁和易于理解。
除了简化判断 null 和 undefined 的操作，逻辑赋值运算符还可以用于合并对象和数组，例如：
const obj1 = { foo: 123 };
const obj2 = { bar: 456 };
obj1 ||= obj2;
console.log(obj1); // { foo: 123, bar: 456 }上面的代码中，||= 运算符将 obj2 合并到了 obj1 中。
注意事项
逻辑赋值运算符虽然很方便，但也有一些需要注意的地方。
首先，逻辑赋值运算符只有在左操作数为 falsy 值时才会执行右操作数的赋值操作，请确保了解 JavaScript 中的 Truthy 和 Falsy 值，以免出现不必要的 bug。
其次，对于不可变变量，逻辑赋值运算符是不会生效的。例如，const 声明的变量无法被重新赋值，所以逻辑赋值运算符也就无法对它进行赋值操作。
最后，逻辑赋值运算符虽然可以让代码更简洁和易于理解，但也可能会对代码的可读性产生一定的负面影响，特别是对于新手来说。因此，在使用逻辑赋值运算符时，我们需要根据实际情况来决定是否使用它。
总结
逻辑赋值运算符是一个非常实用且强大的特性，它可以用于简化一些常见的操作，例如判断变量是否为 null 或 undefined，并给它赋一个默认值。使用逻辑赋值运算符可以让代码更加简洁和易于理解，但也需要注意一些细节，避免出现不必要的 bug。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a12bf148841e9894d70a23