ES11 中的 ??=（猫咪赋值）运算符及其实际用例

在 ES11 中，新增了一个 ??=（猫咪赋值）运算符，它是一种简写形式，用来给变量赋值，当且仅当该变量的值为 null 或 undefined 时才会执行赋值操作。这个新的运算符能够简化代码，提高开发效率，同时也可以帮助我们避免一些常见的错误。

猫咪赋值运算符的语法

猫咪赋值运算符的语法如下：

variable ??= expression;

其中，variable 表示要赋值的变量，expression 表示用来赋值的表达式。如果 variable 的值为 null 或 undefined，则会将 expression 的值赋给 variable，否则不会执行任何操作。

猫咪赋值运算符的实际用例

下面我们来看一些猫咪赋值运算符的实际用例。

1. 给变量赋默认值

我们经常需要给变量赋一个默认值，以防止变量的值为 null 或 undefined。在以前，我们通常使用 || 运算符来实现这个功能。例如：

let name = "Tom";
name = name || "Jerry";
console.log(name); // 输出 "Tom"

上面的代码中，如果 name 的值为 null 或 undefined，那么它会被赋值为 "Jerry"。但是，这种方式有一个问题，就是当 name 的值为 0 或 false 时，也会被认为是 null 或 undefined，从而触发默认值的赋值操作。而猫咪赋值运算符则不会出现这个问题，它只会在变量的值为 null 或 undefined 时才会执行赋值操作。例如：

let name = "Tom";
name ??= "Jerry";
console.log(name); // 输出 "Tom"

上面的代码中，因为 name 的值不为 null 或 undefined，所以不会执行赋值操作，输出的结果仍然是 "Tom"。

2. 给对象赋默认值

除了给变量赋默认值，猫咪赋值运算符还可以用来给对象赋默认值。例如：

let obj = {
  name: "Tom",
  age: 18
};
obj.name ??= "Jerry";
obj.sex ??= "male";
console.log(obj); // 输出 { name: "Tom", age: 18, sex: "male" }

上面的代码中，因为 obj 对象中已经有了 name 属性，所以不会执行赋值操作，输出的结果仍然是 { name: "Tom", age: 18, sex: "male" }。而因为 obj 对象中没有 sex 属性，所以会执行赋值操作，将 sex 属性赋值为 "male"。

3. 简化代码

猫咪赋值运算符还可以用来简化代码。例如：

let num = null;
num ??= 10;
console.log(num); // 输出 10

上面的代码中，因为 num 的值为 null，所以执行了赋值操作，将 num 赋值为 10。这个过程可以用猫咪赋值运算符来简化代码，如下：

let num = null;
num = num ?? 10;
console.log(num); // 输出 10

总结

猫咪赋值运算符是 ES11 中新增的一个运算符，它能够简化代码，提高开发效率，同时也可以帮助我们避免一些常见的错误。我们可以用猫咪赋值运算符来给变量赋默认值，给对象赋默认值，以及简化代码。在实际开发中，我们应该充分利用这个新的运算符，以提高代码的可读性和维护性。

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