随着 ES12 的发布，JavaScript 语言又新增了三个逻辑赋值操作符（logical assignment operators）。它们分别是 &&=，||= 和 ??=，相信很多前端工程师已经开始使用它们了。那么，这三个操作符都有什么作用呢？又该如何使用它们呢？本文将为大家详细讲解。
1. 逻辑赋值操作符简介
逻辑赋值操作符是一种新的赋值操作符，它可以将逻辑运算符和赋值运算符结合起来，实现一次性地对某个变量进行逻辑运算和赋值操作，这样可以比较方便地写出简洁的代码，并且可以提高代码的可读性和可维护性。
2. &&= 操作符
&&= 操作符表示“与运算赋值”，它的作用是将左侧的值和右侧的值进行逻辑与运算，并将运算结果赋值给左侧的变量。如果左侧的值为真，那么就执行右侧的运算，否则就不执行。
示例代码：
let a = 5; let b = 10; a &&= b; // 相当于 a = a && b; console.log(a); // 输出 10
在上面的代码中，左侧的变量 a 的值为真，因此会执行右侧的运算，将 a 赋值为 b 的值，也就是 10。
3. ||= 操作符
||= 操作符表示“或运算赋值”，它的作用是将左侧的值和右侧的值进行逻辑或运算，并将运算结果赋值给左侧的变量。如果左侧的值为假，那么就执行右侧的运算，否则就不执行。
示例代码：
let a = 0; let b = 10; a ||= b; // 相当于 a = a || b; console.log(a); // 输出 10
在上面的代码中，左侧的变量 a 的值为假，因此会执行右侧的运算，将 a 赋值为 b 的值，也就是 10。
4. ??= 操作符
??= 操作符表示“空值运算赋值”，它的作用是将左侧的值和右侧的值进行空值运算，并将运算结果赋值给左侧的变量。如果左侧的值为 null 或 undefined，那么就执行右侧的运算，否则就不执行。
示例代码：
let a = null; let b = 10; a ??= b; // 相当于 a = a ?? b; console.log(a); // 输出 10
在上面的代码中，左侧的变量 a 的值为 null，因此会执行右侧的运算，将 a 赋值为 b 的值，也就是 10。
5. 逻辑赋值操作符的使用建议
尽量避免在复杂的表达式中使用逻辑赋值操作符，以免降低可读性。
逻辑赋值操作符并不是在所有的场景下都比其它方式更好，需要根据具体的情况来选择是否使用它们。
6. 总结
本文详细讲解了 ES12 新增的逻辑赋值操作符，分别是 &&=，||= 和 ??=，并通过示例代码讲述了它们的使用方法。逻辑赋值操作符可以帮助我们写出简洁的代码，提高代码的可读性和可维护性，但需要在具体情况下选择是否使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645362c3968c7c53b07ccb33