手把手教你使用 ECMAScript 2021 (ES12) 中的空值合并运算符

JavaScript 的空值处理一直是个令人头痛的问题，尤其是在判断变量值时，我们需要通过繁琐的 if 语句或三目运算符来进行空值处理。但在 ECMAScript 2021 (ES12) 中，引入了一种新的运算符——空值合并运算符 (nullish coalescing operator)，可以解决这个问题，本文就手把手地教你如何使用它。

了解空值合并运算符

在介绍如何使用空值合并运算符之前，我们需要先了解它的作用和语法。

空值合并运算符用于在 null 或者 undefined 时给出一个默认值，它的语法如下所示：

let result = A ?? B;

其中 A 是要验证的值，如果值为 null 或者 undefined，则返回 B，否则返回 A。

空值合并运算符的用法

下面我们通过一些示例来看看空值合并运算符的用法。

示例一

假设我们要获取一个变量的值，如果它为 null 或者 undefined，则设定一个默认值。在以前的写法中，我们需要使用 if 语句进行判断，如下所示：

let a;
if (a === null || a === undefined) {
  a = "default value";
}

而在使用空值合并运算符时，只需要一行代码即可：

let a;
a = a ?? "default value";

如果 a 为 null 或者 undefined，则返回默认值 "default value"。

示例二

我们还可以将空值合并运算符与其他运算符一起使用，例如：

let a;
let b = "new value";
a = a ?? b.toLowerCase() ?? "default value";

在这个示例中，如果 a 既不为 null 也不为 undefined，则返回 a。否则，检查 b 转换为小写后是否为 null 或者 undefined，如果是，则返回默认值 "default value"。

示例三

我们也可以将空值合并运算符与对象的属性结合使用，例如：

let obj = { a: null };
let value = obj.a ?? "default value";

在这个示例中，value 返回的是 "default value"，因为 obj.a 为 null。

总结

在使用过程中，我们需要注意空值合并运算符与 || 的区别。|| 运算符可以将 falsy 值（false、0、空字符串""、null、undefined 和 NaN）转换为一个布尔型的 false 值，因此当使用 || 运算符设置默认值时，可能会返回不希望的结果。

在 ES12 中，空值合并运算符为我们提供了一种解决空值处理的新方式，可以减少代码量并提高代码可读性。无论是在编写前端代码和后端代码时，它都会有很大的用处。

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