ES10 新增特性详解：Optional Chaining 可选链操作符

在前端开发中我们经常需要操作对象的属性，但有时候对于嵌套对象的属性判断却很麻烦。此时，我们需要用到 ES10 新增的可选链操作符。

可选链操作符可以在不确定对象属性是否存在的情况下，安全地访问这些属性，避免因为不存在属性而导致的异常错误。

语法

可选链操作符使用问号 ? 表示，放在对象属性访问的问号后面，如：

obj?.prop
obj?.[expr]
arr?.[index]

示例

下面我们来看一个例子，假设我们有一个 user 对象，其包含了一个 address 对象，address 里面包含了 city 和 state 属性。

const user = {
    name: 'Tom',
    age: 18,
    address: {
        city: 'New York',
        state: 'NY'
    }
};

我们需要判断当前用户所在州是否为 'NY'，如果不存在 user 对象或者 address 对象，那么会产生错误。而使用可选链操作符就可以避免此类问题：

const state = user?.address?.state;

上面的代码中，如果 user 对象或者 address 对象不存在，state 将会返回 undefined，而不是抛出 TypeError 异常。

可选链操作符的注意点

1. 如果访问的对象不存在，操作符返回的结果一定是 undefined。这点需要注意，因为 undefined 在 JavaScript 中是一个可用的值，如果需要判断一个属性的值是否为 undefined，需要使用类似 value === undefined 的方式。

2. 如果访问的对象存在但是属性不存在，操作符返回的结果也是 undefined，而不是不同类型的异常。这样可以在避免异常错误的同时，简化代码的复杂度。

应用场景

在开发中，我们经常需要操作、获取对象中的嵌套属性，比如：

const city = user.address.city;

但是在某些情况下，这些属性可能不存在。如下代码，假设 user 对象是从后端接口传入的，我们并不清楚 address 是否存在，因此需要进行判断：

let city;
if (user && user.address) {
    city = user.address.city;
}

使用可选链操作符则可以避免上述的麻烦。我们可以使用类似于以下的方式：

const city = user?.address?.city;

这样，如果 user 或者 address 对象不存在，city 就会返回 undefined，不会抛出异常错误。这种方式代码简单、直观，同时又不会影响代码的可读性。因此在访问嵌套属性时，可选链操作符具有非常优秀的应用场景。

总结

可选链操作符是 ES10 新增的一个非常实用的特性，可以安全地访问嵌套对象的属性。使用可选链操作符可以有效地避免因对象不存在或属性不存在而导致的异常错误，简化代码的复杂度。在实际开发中，我们可以使用可选链操作符避免大量繁琐的判断，提高代码的可读性。

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