教程：ES12 的 Nullish coalescing 运算符

什么是 Nullish Coalescing 运算符

Nullish Coalescing 运算符是 ES12 引入的一种新的 JavaScript 运算符，用于判断变量值是否为 null 或 undefined。当变量值为 null 或 undefined 时，它会返回一个默认的值。

Nullish Coalescing 运算符使用两个问号（??）表示。其语法如下所示：

let result = someVar ?? defaultValue;

这个运算符的语法非常直观。如果 someVar 的值为 null 或 undefined，那么 result 将会被赋值为 defaultValue。否则，result 的值将会等于 someVar 的值。

Nullish Coalescing 运算符与 || 运算符有何不同

在 JavaScript 中，|| 运算符是用来进行逻辑或运算的。如果左侧操作数的求值结果为 true，那么返回左侧操作数的值。如果左侧操作数的求值结果为 false，那么返回右侧操作数的值。

但是，|| 运算符在某些情况下会存在隐患。当左侧操作数的值为 falsy 值（false、null、undefined、0、空字符串等）时，|| 运算符会返回右侧操作数的值。这可能会导致一些问题。例如：

let a = 0;
let b = 1;
console.log(a || b); // 1

在上面的示例代码中，a 的值为 0，按照 JavaScript 的类型转换规则，0 是一个 falsy 值。所以，a || b 的结果应该是 b 的值，也就是 1。但是，如果我们有意将 a 的值设置为 0，那么这段代码的输出结果就会出现问题。

使用 Nullish Coalescing 运算符就可以回避这个问题。Nullish Coalescing 运算符只有在变量值为 null 或 undefined 时才会返回默认值。而对于其他类型的值，它会返回变量值本身。因此，我们可以将上面的示例代码用 Nullish Coalescing 运算符进行改写：

let a = 0;
let b = 1;
console.log(a ?? b); // 0

Nullish Coalescing 运算符的使用场景

Nullish Coalescing 运算符最常见的使用场景是在变量赋值时使用。例如：

let myVar = someVar ?? defaultValue;

在上面的示例代码中，当变量 someVar 的值为 null 或 undefined 时，myVar 的值会被赋值为 defaultValue。

除此之外，Nullish Coalescing 运算符也可以用来判断函数参数的默认值。例如：

function sayHello(name) {
  name = name ?? 'world';
  console.log(`Hello, ${name}!`);
}
sayHello(); // Hello, world!
sayHello('John'); // Hello, John!

在上面的示例代码中，当函数的参数值为 null 或 undefined 时，会默认赋值为 world。

总结

Nullish Coalescing 运算符是 ES12 引入的一种新的 JavaScript 运算符，用于判断变量值是否为 null 或 undefined。当变量值为 null 或 undefined 时，它会返回一个默认的值。Nullish Coalescing 运算符的语法非常直观，使用场景很广泛。与 || 运算符相比，Nullish Coalescing 运算符具有更加精确的判断逻辑，可以避免因变量为 falsy 值而造成的问题。

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