在 JavaScript 中，我们经常会使用点运算符 . 或者中括号 [] 来访问对象的属性或数组中的元素。当我们需要访问深度嵌套的属性时，可能会遇到访问不存在的属性或数组元素导致代码报错的情况，这时候就需要用到 Optional Chaining 操作符来避免报错。
Optional Chaining 的介绍
Optional Chaining 允许我们在对象的属性和数组元素访问中传递 null 或者 undefined 值，避免了非空保护判断的复杂性。其语法为 ?.，具体可参照如下示例：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- ------ -------
--
--
--
-------------------------- -- ------ ------
-------------------------- -- ---------
-------------------------- -- ---------
----- --- - --- -- ---
---------------------- -- -
---------------------- -- ---------在访问 JavaScript 对象中的属性时，如果要访问多层次的嵌套属性，就需要使用多个点运算符来引用每个属性。如果其中一个属性不存在，那么整个语句将会抛出 TypeError 异常。
使用 Optional Chaining 操作符，如果对象属性不存在，则返回 undefined，而不是抛出错误。同样的，Optional Chaining 也适用于数组元素的访问。
Optional Chaining 的应用
Optional Chaining 不仅仅使我们的代码更加简洁，还能够提高代码的可读性和可维护性。
简化属性的读取
我们通常会在代码中使用 Optional Chaining 来简化属性的读取操作：
const user = {
address: {
city: 'New York',
},
};
const city = user.address?.city;上述代码中，Optional Chaining 操作符保证了即使 address 属性不存在，也不会因为读取 city 属性而抛出错误。
避免出现繁琐的 if 语句
在代码中经常需要判断一个嵌套对象是否存在以及对象属性是否存在。这种情况下，Optional Chaining 操作符能够有效地避免出现繁琐的 if 语句。
假设我们要检查某个图表的配置项是否包含某个属性：
if (options && options.chart && options.chart.title && options.chart.title.text) {
console.log(options.chart.title.text);
}上述代码可简写为：
if (options?.chart?.title?.text) {
console.log(options.chart.title.text);
}函数参数默认值的设置
Optional Chaining 还适用于函数参数默认值的设置。在函数参数默认值设置时，我们通常需要检查参数值是否有传入使用。
下面的例子展示了 Optional Chaining 用于检查参数值是否有传入的例子：
-- -------------------- ---- ------- -------- ----------- - --- - ----- - ----- --- - - -------- -------------------------------- ----- - ------ -- --------- -------- -- --------- ----- ----- ------ --- -- ------ ----- ---- -- --- -- --------- ----- ----- ------- ---- -- --- -- ------- --
Optional Chaining 的兼容性
目前市面上主流的浏览器和 Node.js 版本已经支持 Optional Chaining。如果你需要支持一些老旧的浏览器，可以使用 babel 对 Optional Chaining 进行转码。
总结
在本文中，我们介绍了 ES10 中的 Optional Chaining 操作符，并给出了大量的使用场景，希望可以帮助读者熟练使用 Optional Chaining。在实际开发过程中，我们应该始终追求简洁、高效的代码，Optional Chaining 操作符无疑是一个很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466dd59968c7c53b0747d0f