在编写 JavaScript 应用程序时，我们经常会遇到需要检查对象或数组的嵌套属性或元素是否存在的情况。此时，如果使用旧的检查方法，就需要写很多的代码来处理 null 或 undefined 的情况，这不仅容易出错，而且也很难阅读和维护。这时，ES6 中的可选链操作符就可以帮助我们更轻松地实现这个任务。
可选链操作符的概念
可选链操作符（Optional Chaining Operator）是 ES6 中引入的一种新语法，用于简化处理对象和数组的嵌套属性或元素的操作。它的主要特点是当访问一个嵌套属性或元素时，如果该属性或元素不存在，就会直接返回 undefined，而不会抛出异常。它的语法格式如下：
obj?.prop obj?.[expr] arr?.[index]
其中，obj 是对象，prop 是一个属性名，expr 是一个计算属性名的表达式，arr 是一个数组，index 是一个数组索引。
可选链操作符的使用示例
下面是一个简单的示例，说明使用可选链操作符可以简化代码：
// 传统的检查方法
if (store && store.user && store.user.name) {
console.log(store.user.name);
}
// 使用可选链操作符
console.log(store?.user?.name);在这个例子中，我们需要检查一个名为 store 的对象，当它存在且它的 user 属性存在且它的 name 属性存在时，才能访问 name 属性。如果使用传统的检查方法，需要写三个逻辑与运算符，这样的代码很长，而且容易出错。而使用可选链操作符，只需要一行代码，就可以实现相同的功能，而且代码更短、可读性更好。
可选链操作符的高级用法
除了简化嵌套属性或元素的访问之外，可选链操作符还有一些高级的用法，下面我们将介绍两个常见的用法。
调用嵌套函数
我们可以使用可选链操作符来调用嵌套函数，并且当嵌套函数不存在时，直接返回 undefined。下面是一个示例：
-- -------------------- ---- -------
----- --- - -
---- -
----- -
------------------- ---------
-
-
--
-- --------------
------------------在这个例子中，我们调用了一个名为 bar 的嵌套函数，它属于一个名为 foo 的对象。我们使用可选链操作符来访问 foo 和 bar，当它们存在时，调用这个函数，并打印一条消息。这样的代码可以帮助我们更轻松地处理可能存在的函数缺失问题。
获取数据的默认值
我们可以使用可选链操作符来获取数据的默认值，当数据不存在时，可以使用一个默认值来替代它。下面是一个示例：
const user = {
nickname: 'Alice',
};
// 使用可选链操作符获取数据的默认值
const age = user?.age || 18;
console.log(age); // 18在这个例子中，我们通过可选链操作符获取 user 对象的 age 属性，如果它不存在，则使用默认值 18 来代替。这样的代码可以帮助我们更轻松地处理数据缺失问题。
总结与展望
在本文中，我们介绍了 ES6 中的可选链操作符的概念、语法和使用方法，并且通过示例代码展示了它们的简化代码和解决数据缺失问题的功能。此外，我们还介绍了可选链操作符的高级用法，包括调用嵌套函数和获取数据的默认值。可选链操作符是一个非常实用的语法，它可以帮助我们更轻松地实现复杂的操作，并减少代码量和错误率。我们需要深入学习和使用它，并且期待它在未来的 JavaScript 版本中得到更进一步的优化和升级。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3125d83d39b48817016f8