ES11 之 nullish coalescing 操作符详解

前言

JavaScript 是一门动态语言，变量经常会在不同的场景中被赋予不同类型的值。在进行变量值的判断时，我们通常用 if ... else 语句或三目运算符 ? :，但是这些方法在判断变量是否为空或者不存在时，都存在一些问题。在 ES11 中新增了一个 nullish coalescing 操作符，以解决这个问题。

本文将详细介绍 nullish coalescing 操作符的具体使用方法，并通过示例代码的展示，让大家更好地理解。

nullish coalescing 操作符是什么？

nullish coalescing 操作符，也就是 ??，它的作用是用来判断变量是否为空或者未定义。它的判断规则是：如果变量的值为 undefined 或者 null，则返回右侧的值；否则返回左侧的值。其中，undefined 和 null 被称为 nullish 的。与之相对应的是 truthy 或 falsy 的，例如 0 和 '' 都是 falsy 的。

与之前的方法相比，?? 操作符的优点在于它只会在左侧的值为 nullish 时才返回右侧的值，不会受到 falsy 值的影响。

nullish coalescing 操作符的使用方法

nullish coalescing 操作符的使用方法非常简单，以判断变量 x 是否为空或者未定义为例，代码如下：

let y = x ?? 'default value';

上述代码中，如果 x 的值为 undefined 或者 null，则 y 的值就会被设置为 default value，否则 y 的值就会被设置为 x 的值。

nullish coalescing 操作符的示例代码

接下来，我们通过一系列的示例代码，来更好地理解 nullish coalescing 操作符的使用方法及其优点。

示例 1

let x = null;
let y = x ?? 'default value';
console.log(y); // default value

上述代码中，由于 x 的值为 null，所以 y 的值被设置为 default value。

示例 2

let x = undefined;
let y = x ?? 'default value';
console.log(y); // default value

上述代码中，由于 x 的值为 undefined，所以 y 的值被设置为 default value。

示例 3

let x = '';
let y = x ?? 'default value';
console.log(y); // ''

上述代码中，由于 x 的值为 falsy，但不是 nullish，所以 y 的值被设置为 ''。

示例 4

let x;
let y = x ?? 'default value';
console.log(y); // default value

上述代码中，变量 x 未定义，所以 y 的值被设置为 default value。

示例 5

let x = 0;
let y = x ?? 'default value';
console.log(y); // 0

上述代码中，由于 x 的值为 falsy，但不是 nullish，所以 y 的值被设置为 0。

总结

通过本文的介绍，我们了解了 nullish coalescing 操作符的具体使用方法，并通过示例代码的展示，更好地理解了其优点。

在实际开发中，我们常常会遇到需要判断变量是否为空或者不存在的情况，此时就可以使用 nullish coalescing 操作符，它可以更加简单清晰地写出判断条件，并且不会受到 falsy 值的干扰。

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