近年来，前端技术发展迅速，在不断寻求更高效、更简洁的编码方式。在 ES2021（ES12）版本中，增加了一种利于代码简洁性的新特性，即 Logical Assignment Operators。
Logical Assignment Operators，即逻辑赋值运算符，是将逻辑运算符和赋值运算符结合在一起的特殊运算符。通过这个运算符，我们可以在给变量赋值的同时做出简单的逻辑判断。
一、Logical Assignment Operators 的使用方法
Logical Assignment Operators 具有下面三种形式：
&&=：如果左侧的运算结果为 truthy，那么将左侧的值赋给变量；否则不进行赋值操作。||=：如果左侧的运算结果为 falsy，那么将左侧的值赋给变量；否则不进行赋值操作。??=：如果左侧的值为 null 或 undefined，那么将右侧的值赋给变量；否则不进行赋值操作。
其中，truthy 表示在 boolean 表达式中被视作真值的值，具体包括字符串、数字（除了 0），任何对象（包括数组和函数）等等。而 falsy 表示在 boolean 表达式中被视作假值的值，仅包括以下几种情况：
- false
- null
- undefined
- 0
- NaN
- ''
要使用 Logical Assignment Operators，我们需要先定义一个变量，然后对其进行逻辑运算和赋值。比如，我们可以用逻辑或赋值运算符（||=）来实现一个变量的默认值：
let x = null; x ||= 'Default value'; console.log(x); // => 'Default value'
在上述代码中，我们在将 'Default value' 赋给 x 的同时，通过逻辑或的运算对 x 进行了判断，保证了变量赋值的安全性。
在使用 Logical Assignment Operators 时，还需要注意运算符的优先级。这些运算符的优先级与 +=、-=、*= 和 /= 相同，比其中的位运算符和关系运算符要低，但高于赋值运算符。
二、Logical Assignment Operators 的应用场景
Logical Assignment Operators 的出现，方便了我们进行繁琐的判断和操作。在以下场景中，我们可以使用 Logical Assignment Operators：
- 为变量设置默认值时。
let userName = 'John'; userName ||= 'Anonymous'; console.log(userName); // => 'John'
- 判断变量是否存在并将其赋值时。
let array = [1, 2, 3]; let index = 0; index ||= 2; // 相当于 if (!index) index = 2; console.log(array[index]); // => 3
- 帮助减少冗余代码。
let name = 'John';
if (!name) {
name = 'Anonymous';
}
// 等价于
name ||= 'Anonymous';通过使用逻辑赋值运算符，我们可以更加高效且美观地编写代码，减少代码冗余，为以后的维护和重构带来了方便。
三、总结
总的来说，Logical Assignment Operators 是一种非常方便实用的技术特性。它可以方便地实现变量的默认值、非空赋值、以及减少冗余代码等操作。通过学习和理解 Logical Assignment Operators，我们可以在实际开发中更加高效和方便地使用 JavaScript 进行编码。
代码示例：
-- -------------------- ---- ------- -- -- --- -------- --- ---- - ----- ---- --- ------------ ------------------ -- -- ----------- -- -- --- ------ --- --- - --- ------- --- ------ --------------------- -- -- --------- -- -- --- ------ --- ---- --- --- --- ----------------- -- -- --
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ea596968c7c53b00ecef3