在现代的前端开发中，我们经常需要处理可能为空的值。在 JavaScript 中，使用 null 或 undefined 表示“没有值”，这给程序员带来了许多麻烦，尤其是在处理嵌套的对象或数组时。ECMAScript 2020 引入了两个新的运算符 Optional Chain 和 Nullish Coalescing Operator，可以大大简化处理这些场景的代码，并提高代码可读性。
Optional Chain 运算符
ECMAScript 2020 引入的 Optional Chain 运算符 ?. 可以用来简化访问嵌套属性或方法的过程。以往，我们通常需要使用繁琐的 if 语句来判断中间的属性或方法是否为空，如下所示：
// 在没有 Optional Chain 之前的代码
if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.method) {
obj.prop1.prop2.method();
}上述代码中，我们首先需要判断 obj 是否为空，然后再判断 prop1 是否为空，以此类推。这个过程非常冗长并且可读性较差。
而使用 Optional Chain 运算符后，我们可以通过一条语句来判断整个链路上的属性和方法是否为空。示例如下：
// 使用 Optional Chain 运算符 obj?.prop1?.prop2?.method?.();
上述代码中，如果 obj 为空或者后续属性或方法中的任何一个为空，整个语句都会返回 undefined，不会抛出异常。这大大简化了代码，并提高了可读性。
Nullish Coalescing Operator 运算符
除了 Optional Chain 运算符，ECMAScript 2020 还引入了 Nullish Coalescing Operator 运算符 ??，用于处理值为 null 或 undefined 的情况。以往，我们通常使用逻辑或运算符 || 来处理这种情况，如下所示：
// 在没有 Nullish Coalescing Operator 之前的代码 let value = obj.prop1.prop2.prop3 || 'default';
上述代码中，如果 obj.prop1.prop2.prop3 为 null 或 undefined，那么整个语句将返回 'default'。
但是，逻辑或运算符有一个不足之处。当值为 0 或者空字符串时，逻辑或运算符会将其视为“假”值，从而返回默认值。而在许多情况下，我们需要明确区分 0 或者空字符串和 null 或者 undefined。
而使用 Nullish Coalescing Operator 运算符后，我们可以明确地判断值是否为空。示例如下：
// 使用 Nullish Coalescing Operator 运算符 let value = obj.prop1.prop2.prop3 ?? 'default';
上述代码中，如果 obj.prop1.prop2.prop3 为 null 或者 undefined，那么整个语句将返回 'default'。如果 obj.prop1.prop2.prop3 为 0、空字符串或任何其他“假”值，整个语句将返回 0、空字符串或者其他“假”值。
总结
ECMAScript 2020 引入的 Optional Chain 和 Nullish Coalescing Operator 运算符在处理可能为空的值时非常有用。使用 Optional Chain 运算符我们可以避免冗长的判断语句，提高代码可读性；使用 Nullish Coalescing Operator 运算符我们可以明确地判断值是否为空，避免将 0 或者空字符串误判为“假”值。下面是两个示例代码：
// javascriptcn.com 代码示例
// Optional Chain 运算符示例
const person = {
name: 'Tom',
address: {
city: 'New York',
state: 'NY',
},
};
const city = person?.address?.city; // 返回 'New York'
const zip = person?.address?.zip; // 返回 undefined
// Nullish Coalescing Operator 运算符示例
const selectedValue1 = null ?? 'default'; // 返回 'default'
const selectedValue2 = 0 ?? 'default'; // 返回 0通过学习这些新的 ECMAScript 2020 运算符，我们可以更加高效地处理“没有值”的情况，让代码更加简洁、优雅。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65865201d2f5e1655d0c4941