随着 JavaScript 在 Web 开发中的普及，越来越多的开发者面临着处理复杂嵌套数据的问题。在以前，我们通常使用 if 语句或三元运算符来检查数据是否存在。但是这种方式相对繁琐且不够优雅。在 ECMAScript 2019 中，推出了一项新特性：Optional chaining 可以更优雅地实现这一功能。
Optional chaining 概述
Optional chaining 允许开发者在不确定对象是否存在的情况下，直接访问深层次的属性和方法，而不用通过烦琐的判空操作。
在没有Optional chaining的情况下，处理一个可能不存在的属性，我们需要这样做：
if (obj && obj.propA && obj.propA.propB && obj.propA.propB.propC) {
console.log(obj.propA.propB.propC);
}而在使用了 Optional chaining 之后，我们可以写成这样：
console.log(obj?.propA?.propB?.propC);
当对象 obj 存在并且 propA、propB、propC 都存在时，Optional chaining 运算符 ?. 将按照正常的属性访问方式返回相应的值。如果某个属性不存在，表达式会立即返回 undefined，不会报错。
当在访问对象的属性或方法时，Optional chaining 运算符可以置于存在问题的属性或方法之前，可以省略对应的判断表达式的写法，提高代码的简洁和可维护性。
Optional chaining 的使用案例
下面跟着我们来看一下 Optional chaining 的使用案例，帮助大家更好的理解。
深度访问对象属性
当需要访问嵌套在对象内部的属性时，我们通常会这样做：
if (obj && obj.propA && obj.propA.propB && obj.propA.propB.propC) {
console.log(obj.propA.propB.propC);
}而在使用 Optional chaining 之后，它可以简化成这样：
console.log(obj?.propA?.propB?.propC);
调用嵌套方法
在访问一个对象中的嵌套方法时，我们也可以使用 Optional chaining，而无需进行复杂的判断：
const result = obj?.propA?.methodA?.();
访问数组元素
在访问数组元素时，我们同样可以使用 Optional chaining。例如，我们可以以以下方式获取数组中的第一个元素：
const firstElement = arr?.[0];
链接多个 Optional chaining
Optional chaining 运算符可以链式地链接起来，这可以使得我们访问深层嵌套的对象属性或方法更加容易。例如，我们可以通过以下方式访问一个具有嵌套属性和方法的对象：
const result = obj?.propA?.propB?.[0]?.methodA?.();
在这个表达式中，?.propA?.propB?.[0]?.methodA?.() 将按照原始的属性或方法访问方式返回一个值或 undefined，只要出现 undefined，整个表达式就会立刻停止。
Optional chaining 的指导意义
Optional chaining 提供了一种优雅的解决方案，避免了很多烦琐的冗余代码，更适用于复杂对象的操作处理。尽管该特性在多个浏览器和 JavaScript 引擎中已得到实现，但仍然需要考虑到诸如 IE 等旧浏览器的兼容性问题。
与其对值进行手动检查，不如直接使用这种新特性，Optional chaining 可以使你的代码更加简洁易懂，并且能够提升开发效率。
结论
在 ECMAScript 2019 中，Optional chaining 内置运算符提供了一种非常轻松的方法来访问对象的属性和方法。它避免了我们使用可能混乱的 'if'语句，在使用深层对象嵌套时可以有效地增强代码的可读性和可维护性。除此之外，Optional chaining 运算符可以大大节省冗长、重复的代码，让我们的代码看起来更简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775ad2a6d66e0f9aa03d097