在 ECMAScript 2020 中新增加了两个运算符：逻辑赋值运算符和空值合并运算符。这两个运算符在前端开发中有着广泛的应用，可以显著提高我们代码的简洁程度和可读性。本文将详细介绍这两个运算符的使用方法，并通过示例代码进行演示，希望对读者有所帮助。
逻辑赋值运算符
逻辑赋值运算符是在逻辑运算符（&&、||）的基础上进一步发展而来的。它的作用是在变量赋值的同时进行逻辑运算。例如，我们经常需要这样写代码：
if (a) {
x = a;
} else {
x = b;
}而使用逻辑赋值运算符，代码可以写成如下形式：
x ||= a || b;
如果 x 变量已经有值，那么逻辑运算符就不会再去计算 a 和 b 的值，从而提高了代码的效率。如果 x 变量没有值，则 a 和 b 会作为逻辑运算符的操作数进行计算，并将最终的值赋给 x 变量。
逻辑赋值运算符还可以与其他运算符（如加、减、乘、除等）进行组合使用。例如：
x += a ||= b;
相当于：
if (!a) {
a = b;
}
x += a;下面的例子展示了逻辑赋值运算符的使用：
-- -------------------- ---- ------- --- - - ----- --- - - -- - --- ---- --------------- -- -- - --------------- -- -- - - --- ---- --------------- -- -- - --------------- -- -- -
在上面的代码中，第一次调用逻辑赋值运算符时，y 会被赋值为 1，并将其赋给 x。第二次调用逻辑赋值运算符时，由于 x 已经有值了，所以 y 的值不会改变，x 仍然等于 1。
空值合并运算符
空值合并运算符（??）是在对空值进行判断时的一种便捷方式。它的作用是如果左侧的操作数为 null 或 undefined，则使用右侧的操作数。
例如，下面的代码展示了如何使用空值合并运算符：
const x = null; const y = x ?? 1; console.log(y); // 输出 1
在上面的代码中，由于 x 的值为 null，所以 y 将被赋值为 1。
空值合并运算符还可以与逻辑赋值运算符进行组合使用。例如：
-- -------------------- ---- ------- --- - - ----- --- - - -- - --- ---- --------------- -- -- - --------------- -- -- - - --- ---- --------------- -- -- - --------------- -- -- -
在上面的代码中，第一次调用空值合并运算符时，y 会被赋值为 1，并将其赋给 x。第二次调用空值合并运算符时，由于 x 的值不为 null，所以 y 的值不会改变，x 仍然等于 1。
总结
逻辑赋值运算符和空值合并运算符是 ECMAScript 2020 中新增加的两个运算符，它们可以显著提高我们代码的简洁程度和可读性。不过在使用这两个运算符时，我们也要注意它们的一些特殊性质，以免出现错误。在实际开发中，我们应该结合具体的场景选择合适的运算符，以达到更好的效果。
参考代码：
-- -------------------- ---- ------- --- - - ----- --- - - -- - --- ---- --------------- -- -- - --------------- -- -- - - --- ---- --------------- -- -- - --------------- -- -- - ----- -- - ----- ----- -- - -- -- -- ---------------- -- -- - ----- -- - -- ----- -- - -- -- -- ---------------- -- -- - --- -- - ----- --- -- - -- -- --- ----- ---------------- -- -- - ---------------- -- -- - -- --- ----- ---------------- -- -- - ---------------- -- -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496b0e048841e98943ecfcf