ECMAScript 2021 中的新特性：Optional Chaining 运算符，解决 JS 中的 null/undefined 问题

在 JavaScript 编程中，经常会涉及到处理 null 和 undefined 的情况。特别是在访问对象属性或调用函数时，如果对象不存在或者函数传入了一个 undefined 参数，就容易导致程序出现异常。

为了解决这个问题，ECMAScript 2021 引入了一个新的运算符：Optional Chaining 运算符。

Optional Chaining 运算符的定义

Optional Chaining 运算符（?.）允许我们在访问对象属性或调用函数时，避免出现异常，即使对象不存在或函数的参数未定义。

Optional Chaining 运算符的语法形式如下：

obj?.prop     // 访问 obj 的属性 prop，obj 不存在或者为 null/undefined 时返回 undefined
obj?.[expr]   // 访问 obj 的属性 expr，obj 不存在或者为 null/undefined 时返回 undefined
func?.(args)  // 调用 func 函数，并传入参数 args，func 不存在或者为 null/undefined 时返回 undefined

Optional Chaining 运算符的使用示例

访问对象属性

假设我们有一个 user 对象，其中有一个 address 属性，该属性又包含一个 city 属性。

我们可以使用 Optional Chaining 运算符来访问 user.address.city 属性，即使 user 或 address 对象不存在：

const user = undefined;
const city = user?.address?.city;
console.log(city);    // 输出 undefined

上面的代码中，由于 user 对象为 undefined，所以 user?.address?.city 表达式返回了 undefined。

调用函数

假设我们有一个 user 对象，其中有一个 getFullName 方法，该方法返回用户的全名。如果 user 不存在或者 getFullName 方法未定义，我们可以使用 Optional Chaining 运算符来避免调用方法出错：

const user = null;
const fullName = user?.getFullName?.();
console.log(fullName);    // 输出 undefined

上面的代码中，由于 user 对象为 null，所以 user?.getFullName?.() 表达式返回了 undefined。

Optional Chaining 运算符的注意事项

在使用 Optional Chaining 运算符时，我们需要注意以下几个问题：

1. 必须至少在一个属性或方法访问操作符中使用 ?.，否则运算符无效。

2. Optional Chaining 运算符只能用于对象属性或函数调用操作符，不能用于类或基本数据类型。

3. 如果对象或函数存在但结果为 falsy 值（如 0 或 false），Optional Chaining 运算符也会返回该值。

总结

Optional Chaining 运算符是 ECMAScript 2021 中的一个重要新特性，它可以帮助我们避免访问不存在的对象属性或调用未定义的方法时出现异常。使用 Optional Chaining 运算符，我们可以简化代码的编写，提高程序的健壮性。

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