ES12 新增操作符：逻辑赋值操作符

最近 JavaScript 发布的版本中新增了逻辑赋值操作符，该操作符的语法简单，功能强大，可以在代码实现上大大精简操作，提高编码效率。本篇文章将介绍逻辑赋值操作符的语法和用法，并给出相关示例代码，希望能对前端开发者有所帮助。

逻辑赋值操作符

逻辑赋值操作符就是一种将逻辑运算和赋值运算结合在一起的赋值操作符，其语法格式如下：

a &&= b;
a ||= b;
a ??= b;

其中，&&= 表示当 a 为 true 时才会执行 b 的赋值；||= 表示当 a 为 false 时才会执行 b 的赋值；??= 表示当 a 为 null 或 undefined 时才会执行 b 的赋值。

下面我们将介绍具体的使用方式。

逻辑赋值操作符的用法

1. &&= 逻辑赋值操作符

&&= 运算符表示当左侧表达式为 true 时，才会将右侧表达式的值赋值给左侧变量。如果左侧表达式为 false，则不执行赋值操作。

下面是一个使用 &&= 逻辑赋值操作符的例子：

let a = 5, b = 10;
a &&= b;
console.log(a);  // 输出 10

这里的 a &&= b 的含义是：当 a 为 true 时，将 b 的值赋给 a，即 a = b。

2. ||= 逻辑赋值操作符

||= 运算符表示当左侧表达式为 false 时，才会将右侧表达式的值赋值给左侧变量。如果左侧表达式为 true，则不执行赋值操作。

下面是一个使用 ||= 逻辑赋值操作符的例子：

let a = 0, b = 10;
a ||= b;
console.log(a);  // 输出 10

这里的 a ||= b 的含义是：当 a 为 false 时，将 b 的值赋给 a，即 a = b。

3. ??= 逻辑赋值操作符

??= 运算符表示当左侧表达式为 null 或 undefined 时，才会将右侧表达式的值赋值给左侧变量。如果左侧表达式不为 null 或 undefined，则不执行赋值操作。

下面是一个使用 ??= 逻辑赋值操作符的例子：

let a = null, b = 10;
a ??= b;
console.log(a);  // 输出 10

这里的 a ??= b 的含义是：当 a 为 null 或 undefined 时，将 b 的值赋给 a，即 a = b。

逻辑赋值操作符的指导意义

逻辑赋值操作符的使用可以大大简化代码，提高开发效率，特别是在一些赋值多次的场景下，使用这种操作符可以省略一些不必要的代码。

但是，过度使用逻辑赋值操作符可能会导致代码可读性下降，不利于代码的维护和调试。因此，在使用逻辑赋值操作符时，需要根据实际情况进行权衡和选择。

本篇文章介绍的是 ES12 新增的操作符之一：逻辑赋值操作符，希望能帮助读者理解其语法和用法，并在实际开发过程中得以应用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6d24c306f20b3a632164a