ES12 中引入了 Logical Assignment 操作符，它是在逻辑运算符和赋值运算符的基础上进行的一次整合，用于进行逻辑计算，并将结果赋值给一个变量。这个新特性的引入，将会使得前端开发更加方便和高效。
初识 Logical Assignment 操作符
Logical Assignment 操作符分为三类分别为：Or Assignment、And Assignment 和 Nullish Coalescing Assignment，它们分别对应 ||=、&&= 和 ??=。
下面分别介绍这三类操作符的用法及所实现的功能。
Or Assignment
Or Assignment 操作符的用法和意义如下：
x ||= y;
上述代码会判断变量 x 是否有值，如果有值，则返回 x 的值，否则返回 y 的值，并且把返回的值赋给 x。
这个操作符真正的魅力在于，它可以减少代码量，并且让代码更加简洁易懂。例如，下面的代码：
if (!x) {
x = y;
}可以简化成：
x ||= y;
And Assignment
And Assignment 操作符的用法和意义如下：
x &&= y;
上述代码会判断变量 x 是否为真，如果为真，则返回 y 的值，否则返回 x 的值，并且把返回的值赋给 x。
这个操作符也可以使代码更加简洁易懂。例如，下面的代码：
if (x) {
x = y;
}可以简化成：
x &&= y;
Nullish Coalescing Assignment
Nullish Coalescing Assignment 操作符的用法和意义如下：
x ??= y;
上述代码会判断变量 x 是否为 null 或 undefined，如果为真，则返回 y 的值，否则返回 x 的值，并且把返回的值赋给 x。
这个操作符也可以使代码更加简洁易懂。例如，下面的代码：
if (x === null || x === undefined) {
x = y;
}可以简化成：
x ??= y;
使用示例
假设现在有一个需求，需要判断某个变量是否有值，如果没有值，则赋一个默认值给它。在 ES11 以前，我们通常会这样写：
if (!x) {
x = y;
}但是在 ES12 中，我们可以这样写：
x ||= y;
这段代码的意思是：如果 x 为真，则不进行任何操作。如果 x 为假，则把 y 的值赋给 x。
下面再来看一个实际的例子，假设现在我们有一个数组，我们需要判断数组中的元素是否有值，如果没有值，则把一个默认值赋给它，例如：
-- -------------------- ---- -------
----- --- - --- -- ----- ---------- --- ---
--- ---- - - -- - - ----------- ---- -
-- --------- -
------ - ----------
-
-
-----------------
-- ------- - -- -- ---------- ---------- ---------- --------- -可以看到，上述代码使用了传统的条件语句来判断数组中的元素是否有值，如果没有值，则把一个默认值赋给它。
但是在 ES12 中，我们可以使用 Nullish Coalescing Assignment 来实现：
const arr = [1, 2, null, undefined, '', 0];
for (let i = 0; i < arr.length; i++) {
arr[i] ??= 'default';
}
console.log(arr);
// output: [ 1, 2, 'default', 'default', 'default', 0 ]可以看到，上述代码使用了 Nullish Coalescing Assignment 来判断数组中的元素是否有值，如果没有值，则把一个默认值赋给它。
总结
Logical Assignment 操作符是 ES12 中引入的一个新特性，它可以使我们的代码更加简洁易懂，大大提高了我们的开发效率。在实际开发中，我们可以根据自己的需要选择合适的操作符，来优化我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64573097968c7c53b09fed0d