在 ECMAScript 2021 (ES12) 中，新增了逻辑赋值运算符，包括 &&=、||=、??=，这些运算符可以让我们更方便地进行变量赋值操作。在本篇文章中，我们将介绍如何使用这些逻辑赋值运算符，并通过实际例子来演示它们的用法。
逻辑赋值运算符
逻辑赋值运算符是一种特殊的赋值运算符，它和常规的赋值运算符（如 =）类似，但是它们会在赋值之前对左操作数进行逻辑运算，从而影响最终赋值结果。ES12 中新增了三个逻辑赋值运算符：
&&=：当左操作数为真时，将右操作数赋值给左操作数。||=：当左操作数为假时，将右操作数赋值给左操作数。??=：当左操作数为null或undefined时，将右操作数赋值给左操作数。
使用逻辑赋值运算符
我们来看一个例子，假设我们要统计一段文本中字符的数量，并输出包含字符数量的对象，代码如下：
-- -------------------- ---- -------
----- ---- - ------ --------
----- ----- - ---
--- ---- - - -- - - ------------ ---- -
----- ---- - --------
-- ------------- -
--------------
- ---- -
----------- - --
-
-
-------------------运行以上代码，输出结果如下：
{ H: 1, e: 1, l: 3, o: 2, ' ': 1, w: 1, r: 1, d: 1, '!': 1 }以上代码中，我们使用了一个对象 count 来记录字符数量，对于每个出现过的字符，都会在 count 对象中新增属性，并将该字符的数量赋值给该属性。这个操作可以使用逻辑赋值运算符进行简化。修改代码如下：
const text = 'Hello world!';
const count = {};
for (let i = 0; i < text.length; i++) {
const char = text[i];
count[char] ||= 0;
count[char]++;
}
console.log(count);运行以上代码，输出结果和之前相同。但是，这个代码的写法更加简洁，并且避免了一些无用的判断。我们使用了逻辑赋值运算符 ||=，它将左操作数和右操作数进行逻辑或运算，如果左操作数为假，那么将右操作数赋值给左操作数。因此，当 count[char] 为 undefined 或者 0 时，会将 0 赋值给 count[char]，否则不会有任何操作。
同理，我们也可以使用 &&= 或 ??= 来简化代码，例如：
-- -------------------- ---- ------- --- - - -- - --- -- --------------- -- - --- - - ----- - --- -- --------------- -- - --- - - -- - --- -- --------------- -- -
以上代码分别演示了 ||=、??= 和 &&= 的用法，它们的作用分别为：
||=：如果左操作数为假，那么将右操作数赋值给左操作数，否则不进行任何操作。??=：如果左操作数为null或undefined，那么将右操作数赋值给左操作数，否则不进行任何操作。&&=：如果左操作数为真，那么将右操作数赋值给左操作数，否则不进行任何操作。
总结
逻辑赋值运算符是 ES12 中新增的运算符，它们可以让我们更方便地进行变量赋值操作。使用逻辑赋值运算符可以让代码更加简洁，避免一些无用的判断。我们可以使用 ||=、??= 和 &&= 这三个逻辑赋值运算符，它们分别对应或运算、空值运算和与运算。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fb057ef6b2d6eab31c0e57