在前端开发中，我们经常需要处理嵌套对象或数组的数据。在过去，我们往往需要使用一系列的 if 语句或者三元运算符来判断嵌套数据是否存在，以避免出现 undefined 或者 null 的错误。而在 ES10 中，引入了 Optional Chaining 这一新特性，可以让我们更加简洁地处理这种情况。
Optional Chaining 的概念
Optional Chaining 的中文翻译是“可选链”，它是一种简化嵌套数据判断的语法糖。在过去，我们可能会写出以下的代码：
if (a && a.b && a.b.c) {
console.log(a.b.c);
}这段代码的意思是，如果 a 存在，且 a.b 存在，且 a.b.c 存在，则打印出 a.b.c 的值。但这样的代码显得冗长且难以维护。在 Optional Chaining 中，我们可以使用问号（?）来表示一个属性或者方法是否存在，如果存在则执行，不存在则返回 undefined，如下所示：
if (a?.b?.c) {
console.log(a.b.c);
}这样，我们可以更加简洁地处理嵌套数据的情况，避免出现 undefined 或者 null 的错误。
Optional Chaining 的使用
访问对象属性
我们可以使用 Optional Chaining 来访问一个对象的属性。假设我们有一个对象 a，它有一个属性 b，而 b 又有一个属性 c，我们可以这样访问：
const cValue = a?.b?.c;
如果 a 或者 b 不存在，则 cValue 的值为 undefined，否则为 a.b.c 的值。
调用函数
除了访问对象属性，我们也可以使用 Optional Chaining 来调用一个函数。假设我们有一个对象 a，它有一个方法 b，而 b 又有一个方法 c，我们可以这样调用：
const result = a?.b?.c();
如果 a 或者 b 不存在，则 result 的值为 undefined，否则为 a.b.c() 的返回值。
数组索引
除了对象属性和函数调用，我们也可以使用 Optional Chaining 来访问数组的元素。假设我们有一个数组 a，它的第一个元素是一个对象，这个对象有一个属性 b，而 b 又有一个属性 c，我们可以这样访问：
const cValue = a[0]?.b?.c;
如果 a[0] 或者 b 不存在，则 cValue 的值为 undefined，否则为 a[0].b.c 的值。
示例代码
下面是一个使用 Optional Chaining 的示例代码，它从一个 API 中获取数据并展示在页面中：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
----- ------ - --------------------------
----- ------ - --------------------------
-- ------- -- ------- -
------------------------------------------- - ---------- --- -----------
- ---- -- -------- -
------------------------------------------- - ------------
- ---- -- -------- -
------------------------------------------- - ------------
- ---- -
------------------------------------------- - --- ---- -----------
-
-在这个示例代码中，我们使用 Optional Chaining 来访问 data.results 数组中的元素，并且使用模板字符串来展示数据。如果数据不完整，则显示“No data available”。
总结
Optional Chaining 是一种简化嵌套数据判断的语法糖，在操作对象、数组和函数时都可以使用。它让我们的代码更加简洁、易读、易维护。在实际开发中，我们应该积极使用 Optional Chaining，以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65869754d2f5e1655d102131