ES11 全新特性：Nullish Coalescing(空值合并) 运算符-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，处理 null 或 undefined 值是经常遇到的问题，而传统的 || 运算符在某些情况下并不能很好地解决这个问题。因此，ES11 新增了一个 Nullish Coalescing 运算符来解决这个问题。

Nullish Coalescing 运算符的概念

Nullish Coalescing 运算符是一个用于处理 null 或 undefined 值的运算符，它会判断其左侧表达式是否为 null 或 undefined 值，如果是，则返回右侧表达式的值，否则返回左侧表达式的值。

Nullish Coalescing 运算符由两个问号 "??" 组成，例如：

const name = null ?? "default name";
console.log(name); // "default name"

在上面的代码中，因为 name 的值为 null，则运算符左侧表达式返回 null，所以会返回右侧的默认值 "default name"。

Nullish Coalescing 和 || 运算符的比较

在处理 null 或 undefined 值时，我们通常会使用 || 运算符来处理。但 || 运算符在某些情况下并不能很好地解决问题，例如：

const name = "" || "default name";
console.log(name); // ""

上面的代码中，因为 || 运算符会将空字符串视为 false，所以会返回右侧的默认值 "default name"，但是实际上我们需要的是空字符串，而不是默认值。

这时我们就可以使用 Nullish Coalescing 运算符来解决这个问题：

const name = "" ?? "default name";
console.log(name); // ""

在上面的代码中，因为空字符串并不是 null 或 undefined 值，所以左侧表达式不会被 ? 提早终止，而会返回左侧表达式的值。

Nullish Coalescing 的用途

除了处理 null 或 undefined 值外，Nullish Coalescing 运算符还可以用于判断对象中的属性是否存在：

const user = {
  name: "",
  age: 0,
};

const userName = user.name ?? "default name";
console.log(userName); // ""

const userAge = user.age ?? 18;
console.log(userAge); // 0

在上面的代码中，因为空字符串和数字 0 在条件判断时都会被视为 false，所以如果使用 || 运算符来处理，会返回默认值 "default name" 和 18，而不是我们期望的空字符串和数字 0。

总结

Nullish Coalescing 运算符是一个用于处理 null 或 undefined 值的运算符，它和 || 运算符类似，但在判断空字符串和数字 0 时更加准确。在处理 null 或 undefined 值和判断对象属性是否存在时，建议使用 Nullish Coalescing 运算符来取代传统的 || 运算符。

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