ES11 新特性可选链操作符详解-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，我们常常需要访问对象的属性或方法。然而，由于 JavaScript 的动态特性，对象属性和方法的存在是不确定的。在访问不存在的属性或方法时，会抛出一个错误，这可能会导致程序出现问题。为了避免这些问题，ES11 新特性可选链操作符诞生了。

可选链操作符概述

可选链操作符（Optional chaining operator）是一种用于简化对象属性和方法访问的语法。它允许在不确定属性或方法存在的情况下安全地访问它们。

可选链操作符是一个问号 ? 与一个点 . 的组合，形式为 ?.。通过在访问属性或方法前添加可选链操作符，可以告诉解释器，如果对象存在该属性或方法，则访问它，否则返回 undefined。

下面是一个示例：

// 没有可选链操作符
const person = { name: 'Tom', age: 18 };
const address = person.address.street; // 抛出一个错误，因为 person.address 是 undefined

// 使用可选链操作符
const person = { name: 'Tom', age: 18 };
const street = person.address?.street; // 返回 undefined，因为 person.address 是 undefined

可以看出，当对象的属性或方法存在时，可选链操作符与点操作符的效果是一样的。但是当对象不存在属性或方法是，可选链操作符会返回 undefined，而不是抛出一个错误。

可选链操作符示例

以下是几个示例，展示可选链操作符在不同场景下的应用。

访问对象属性

// 没有可选链操作符
const person = { name: 'Tom', age: 18 };
const street = person.address.street; // 抛出一个错误，因为 person.address 是 undefined

// 使用可选链操作符
const person = { name: 'Tom', age: 18 };
const street = person.address?.street; // 返回 undefined，因为 person.address 是 undefined

调用对象方法

// 没有可选链操作符
const obj = { method: () => console.log('Hello') };
obj.method?.(); // 报错，因为 obj.method 是 undefined

// 使用可选链操作符
const obj = {};
obj.method?.(); // 什么都不会发生，因为 obj.method 是 undefined

访问数组元素

// 没有可选链操作符
const arr = [1, 2, 3];
const element = arr[3]; // 返回 undefined，因为 arr[3] 是 undefined

// 使用可选链操作符
const arr = [1, 2, 3];
const element = arr?.[3]; // 返回 undefined，因为 arr[3] 是 undefined

访问属性链

// 没有可选链操作符
const person = { name: 'Tom', address: { city: 'NY' } };
const city = person.address.city; // 报错，因为 person.address 是 undefined

// 使用可选链操作符
const person = { name: 'Tom' };
const city = person.address?.city; // 返回 undefined，因为 person.address 是 undefined

注意事项

在使用可选链操作符时，需要注意以下几点：

可选链操作符仅在目标对象或方法不存在时返回 undefined，如果目标对象或方法存在但返回 undefined，则仍会抛出错误。
可选链操作符仅在点操作符的情况下有效。因此，它不能用于数组下标或函数调用。
可选链操作符可以与其他 JavaScript 表达式结合使用。例如，person?.address[0]?.city 是有效的。

总结

可选链操作符是一个很好的语法糖，可以帮助我们更安全地访问对象属性和方法。在大型应用程序中，它可以帮助我们避免许多错误和异常，提高代码健壮性。

虽然可选链操作符的语法很简单，但它的应用场景却不止于此。在实际开发中，我们需要根据具体情况灵活运用。

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