ES11 增加了 logical assignment 操作符，可以更加方便、简洁地进行一些操作。在此文章中，我们将深入了解这个新的特性，以及如何使用它并改善我们的前端开发技能。
什么是 logical assignment 操作符？
logical assignment 操作符是在原有 logical 操作符的基础上进行的扩展，具体来说有三种形式：&&=, ||=, ??=。它们与对应的 logical 操作符的作用大致相同，不同之处在于它们还同时进行了赋值操作。
我们一般使用的 logical 操作符有以下 3 种：
&&：逻辑与操作符，返回两个操作数中第一个为 false 的值，否则返回第二个操作数。||：逻辑或操作符，返回两个操作数中第一个为 true 的值，否则返回第二个操作数。??：null 判断操作符，返回第一个操作数的值，如果是 null 或 undefined，则返回第二个操作数的值。
如何使用 logical assignment 操作符？
下面我们将通过实例来展示如何使用 logical assignment 操作符。
使用 &&=
我们来看一个使用 &&= 运算的例子：
let a = { b: { c: 0 } };
a.b && (a.b.c = 1);
console.log(a.b.c); // 输出 1上述代码中，我们需要判断 a.b 是否为真，如果为真则给 a.b.c 赋值。使用 &&= 运算符可以简化这个操作，如下所示：
let a = { b: { c: 0 } };
a.b &&= { c: 1 };
console.log(a.b.c); // 输出 1这个例子中，如果 a.b 为真，那么 { c: 1 } 将会被赋值给 a.b，否则不操作。
使用 ||=
我们再来看一个使用 ||= 运算的例子：
let a = { b: { c: 1 } };
a.b = a.b || {};
console.log(a.b.c); // 输出 1上述代码中，我们需要判断 a.b 是否为真，如果为真则不做操作，否则给 a.b 赋值一个空对象 {}。借助 ||= 操作符，我们可以把它简化为以下代码：
let a = { b: { c: 1 } };
a.b ||= {};
console.log(a.b.c); // 输出 1这个例子中，如果 a.b 不为真，那么 {} 将会被赋值给 a.b，否则不操作。
使用 ??=
下面我们将看到使用 ??= 运算符的例子：
let a = { b: null };
a.b ??= {};
console.log(a.b); // 输出 {}在上述代码中，我们需要为一个 null 的对象属性赋值一个空对象 {}。使用 ??= 运算符，我们可以如下简化这个操作，使代码更加精简：
let a = { b: null };
a.b ??= {};
console.log(a.b); // 输出 {}这个例子中，如果 a.b 为 null 或者 undefined，那么 {} 将会被赋值给 a.b，否则不操作。
深入探究
接下来我们来看一个稍微复杂的例子：
let a = { b: { c: 1 } };
let d = null;
(d ||= (a.b || {}).c) += 2;
console.log(d); // 输出 3在这个例子当中，我们将一个 null 值赋给了变量 d，并使用了 logical assignment 操作符，我们首先进行了 d ||= (a.b || {}).c 的计算，将 a.b.c 的值赋给了 d。最后我们使用了 += 操作符将 d 增加了 2。
通过这个例子，我们可以看到如何使用 logical assignment 操作符来精简条件语句，以及如何巧妙地组合运算符达到更方便的操作效果。
结论
以上就是 logical assignment 操作符的介绍和使用总结。使用 logical assignment 操作符可以让代码变得更加简洁、易读，提高开发效率。希望这篇文章能帮助你理解和掌握这一新特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648045e848841e9894fc2b7e