Logical Assignment Operators 详解

语法概念

Logical Assignment Operators是一种JavaScript中的运算符，它由逻辑操作符（如&&、||、??）和赋值操作符（如=、+=、-=、*=等）组成。这些运算符的作用是对表达式进行运算，并将结果赋值给指定的变量。

作用

逻辑赋值运算符的作用是将逻辑运算的结果赋值给变量，可以减少写重复代码的工作量，同时增强代码的可读性。例如，在Vue和React的watcher中，我们经常需要对变量进行判断，如果满足一定条件，再将其赋值给另一个变量。使用逻辑赋值运算符可以使代码更加简洁、清晰。

具体用法

逻辑赋值运算符包括三种形式：

&&=：逻辑与赋值运算符，如果左侧表达式为false，则不执行右侧表达式，结果为false；否则执行右侧表达式，并将结果赋值给左侧变量。
||=：逻辑或赋值运算符，如果左侧表达式为true，则不执行右侧表达式，结果为true；否则执行右侧表达式，并将结果赋值给左侧变量。
??=：空值合并赋值运算符，如果左侧变量为null或undefined，则执行右侧表达式，并将结果赋值给左侧变量。
例如：

let a = 0, b = 1;
a ||= b; // a: 1
a &&= b; // a: 1
a ??= b; // a: 1
let c = null;
c ??= b; // c: 1

注意事项

逻辑赋值运算符只能对变量进行赋值操作，而不能对常量或表达式进行赋值操作。另外需要注意的是，变量的类型如果不是boolean或者null时，会先进行类型转换再进行判断运算。

应用场景

逻辑赋值运算符常用于Vue和React的响应式编程中，可以将变量的计算和赋值操作整合在一起，提高代码可读性和可维护性。

例如，在Vue组件中，我们需要实现一个计算属性，如果变量a存在，则返回a的值，否则返回b的值。如果使用传统的if判断语句，代码会比较冗长：

computed: {
  result () {
    let result
    if (this.a) {
      result = this.a
    } else {
      result = this.b
    }
    return result
  }
}

使用逻辑赋值运算符，可以将代码简化为一行：

computed: {
  result () {
    let result = this.a ??= this.b
    return result
  }
}

正如看到的，Logical Assignment Operators可以使我们的代码更加简洁、直观，提高代码的可读性和可维护性。