在 ES12 中，新增了三个逻辑运算符：||=、&&=、??=，它们的作用是将变量和表达式与赋值操作符结合起来，可以简化代码并提高编程效率。本文将详细介绍这三个运算符的使用方法和注意事项，帮助读者更好地理解和应用它们。
1. ||= 运算符
||= 运算符可以将一个变量的值与一个表达式的值进行逻辑或运算，然后将结果赋给该变量。如果变量的值为 falsy 值（如 undefined、null、0、false、'' 等），则表达式的值将被赋给该变量；否则，变量的值不会被改变。例如：
let a = 1; a ||= 2; console.log(a); // 输出 1 let b; b ||= 2; console.log(b); // 输出 2
在第一个例子中，变量 a 的值为 1，它不是 falsy 值，所以表达式 2 不会被赋给 a，a 的值仍为 1。在第二个例子中，变量 b 的值为 undefined，它是 falsy 值，所以表达式 2 被赋给 b，b 的值变为 2。
||= 运算符的优先级与赋值操作符相同，是从右到左的结合性运算符。例如：
let a = 1; let b = 2; let c; c ||= a += b; console.log(a, b, c); // 输出 3 2 3
在这个例子中，变量 a 的值为 1，变量 b 的值为 2，变量 c 的值为 undefined。表达式 a += b 的值为 3，它被赋给变量 c，同时变量 a 的值也被改变为 3。
2. &&= 运算符
&&= 运算符可以将一个变量的值与一个表达式的值进行逻辑与运算，然后将结果赋给该变量。如果变量的值为 falsy 值，则表达式的值不会被赋给该变量；否则，变量的值将被改变为表达式的值。例如：
let a = 1; a &&= 2; console.log(a); // 输出 2 let b; b &&= 2; console.log(b); // 输出 undefined
在第一个例子中，变量 a 的值为 1，它不是 falsy 值，所以表达式 2 被赋给 a，a 的值变为 2。在第二个例子中，变量 b 的值为 undefined，它是 falsy 值，所以表达式 2 不会被赋给 b，b 的值不会改变。
&&= 运算符的优先级与赋值操作符相同，是从右到左的结合性运算符。例如：
let a = 1; let b = 2; let c; c &&= a += b; console.log(a, b, c); // 输出 1 2 undefined
在这个例子中，变量 a 的值为 1，变量 b 的值为 2，变量 c 的值为 undefined。因为变量 c 的值为 falsy 值，所以表达式 a += b 不会被执行，变量 a 和 b 的值也不会改变。
3. ??= 运算符
??= 运算符可以将一个变量的值与一个表达式的值进行逻辑或运算，然后将结果赋给该变量。如果变量的值为 null 或 undefined，则表达式的值将被赋给该变量；否则，变量的值不会被改变。例如：
-- -------------------- ---- ------- --- - - -- - --- -- --------------- -- -- - --- -- - --- -- --------------- -- -- - --- - - ----- - --- -- --------------- -- -- -
在第一个例子中，变量 a 的值为 1，它不是 null 或 undefined，所以表达式 2 不会被赋给 a，a 的值不变。在第二个例子中，变量 b 的值为 undefined，它是 null 或 undefined，所以表达式 2 被赋给 b，b 的值变为 2。在第三个例子中，变量 c 的值为 null，它是 null 或 undefined，所以表达式 2 被赋给 c，c 的值变为 2。
??= 运算符的优先级与赋值操作符相同，是从右到左的结合性运算符。例如：
let a = 1; let b = 2; let c; c ??= a += b; console.log(a, b, c); // 输出 3 2 1
在这个例子中，变量 a 的值为 1，变量 b 的值为 2，变量 c 的值为 undefined。因为变量 c 的值为 null 或 undefined，所以表达式 a += b 不会被执行，变量 a 和 b 的值也不会改变。
总结
ES12 中新增的逻辑运算符 ||=、&&=、??= 可以简化代码并提高编程效率，但需要注意它们的使用方法和注意事项。||= 运算符可以将一个变量的值与一个表达式的值进行逻辑或运算；&&= 运算符可以将一个变量的值与一个表达式的值进行逻辑与运算；??= 运算符可以将一个变量的值与一个表达式的值进行逻辑或运算，但只有在变量的值为 null 或 undefined 时才会改变变量的值。这三个运算符的优先级与赋值操作符相同，是从右到左的结合性运算符。在使用时需要注意运算符的优先级和结合性，以避免出现意外的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f5981c2b3ccec22fdaf6dd