在 JavaScript 的开发中，我们经常会用到对象的属性或方法，但有时候我们无法保证这些属性或方法一定是存在的，这就会导致 TypeError: Cannot read property 'xxx' of undefined 的错误。在实际开发中，我们经常需要先判断这些属性或方法是否存在，然后再进行操作，这样会导致代码变得枯燥和冗长。
ECMAScript 2019 引入了可选链操作符 ?.，它提供了一个更加优雅和简洁的方式来访问对象的属性或方法，并且可以避免 Cannot read property 'xxx' of undefined 的错误。本文将会深度探讨可选链操作符的用法和示例，并且为你提供一些指导性的建议，帮助你更好地使用可选链操作符来提高开发效率。
什么是可选链操作符？
可选链操作符 ?. 是 ECMAScript 2019 中的新增功能，它可以用来简化代码访问对象的属性或方法，同时还能够避免 TypeError: Cannot read property 'xxx' of undefined 错误。它的使用方式如下：
const a = obj?.prop;
如果 obj 存在且具有 prop 属性，则 a 将会等于 obj.prop 的值，否则 a 将会等于 undefined。这就避免了 TypeError: Cannot read property 'xxx' of undefined 的错误。
如何使用可选链操作符？
链式调用
可选链操作符 ?. 可以链式调用多个属性或方法。假设我们有以下的对象：
const obj = { foo: { bar: { baz: 'hello world' } } };
如果我们要获取 obj.foo.bar.baz 的值，我们可以使用以下的代码：
const value = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz;
这样的代码非常冗长和繁琐，使用可选链操作符 ?. 可以更加简洁和清晰：
const value = obj?.foo?.bar?.baz;
如果 obj 或其中的任何属性不存在，value 将会等于 undefined，这就避免了 TypeError: Cannot read property 'xxx' of undefined 的错误。
函数调用
当我们调用一个函数，但这个函数在对象上不存在时，如果不使用可选链操作符，就会导致 TypeError: Cannot read property 'xxx' of undefined 的错误。使用可选链操作符可以避免这个错误的发生。
-- -------------------- ---- ------- ----- --- - - ---- - ---- -- -- - ------------------ -------- - - -- ------------------展开代码
上述代码中，如果 obj.foo.bar 存在，则会调用这个函数，否则不会有任何操作。
数组元素访问
在访问数组的元素时，可选链操作符也可以避免访问不存在的元素时发生错误。以下是一个示例：
const arr = [1, 2, 3]; console.log(arr?.[0]); // 1 console.log(arr?.[3]); // undefined
如果数组有第一个元素，那么代码 arr?.[0] 的值将会是第一个元素，否则它将会是 undefined。同样的道理，如果数组中不存在第四个元素，那么代码 arr?.[3] 的值将会是 undefined。
可选链操作符的注意事项和最佳实践
可选链操作符不支持短路求值
在使用 ?. 操作符时需要特别注意，它不支持短路求值。例如以下代码：
const obj = null; obj?.foo(); // 可能会报错
实际上这个代码会在执行 obj 时发生错误。这意味着使用可选链操作符时需要特别注意它是否会导致异常情况的出现。
在配合类型检查器使用时非常有用
当在 TypeScript 等类型检查器的环境下使用可选链操作符时，它可以在运行时检查对象是否存在，并且能够确定对象的类型。这样可以大大减少代码的数量和增加代码的可读性，特别是在深层嵌套对象的访问和操作中，更加显得非常方便和实用。
可选链操作符不适合用于简单的判断操作
虽然可选链操作符能够避免 undefined 的错误，但在有些情况下使用可选链操作符会增加代码的复杂性。对于简单的对象属性或数组元素的访问，使用传统的判断操作仍然是更加直观和简洁的。
总结
在 ECMAScript 2019 中，可选链操作符 ?. 提供了一种优雅和简洁的方式来访问对象的属性或方法，并且可以避免 TypeError: Cannot read property 'xxx' of undefined 的错误。我们可以将可选链操作符使用在链式调用、函数调用、数组元素访问等多种场景中，同时需要特别注意它不支持短路求值，并且在配合类型检查器使用时非常有用，但不适用于简单的判断操作。
虽然可选链操作符是一个非常方便和实用的功能，但在使用时也需要注意不要滥用，否则会导致代码变得复杂和难以维护。最终要根据具体的业务场景和需求来合理使用可选链操作符，提高代码的可读性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65179d7e95b1f8cacdfc9b0c
