在前端开发中，我们经常需要处理嵌套对象或数组的数据。在过去，我们往往需要使用一系列的 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 中获取数据并展示在页面中：
// javascriptcn.com 代码示例
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
const value1 = data?.results?.[0]?.value;
const value2 = data?.results?.[1]?.value;
if (value1 && value2) {
document.getElementById('data').textContent = `${value1} and ${value2}`;
} else if (value1) {
document.getElementById('data').textContent = `${value1}`;
} else if (value2) {
document.getElementById('data').textContent = `${value2}`;
} else {
document.getElementById('data').textContent = 'No data available';
}
}在这个示例代码中，我们使用 Optional Chaining 来访问 data.results 数组中的元素，并且使用模板字符串来展示数据。如果数据不完整，则显示“No data available”。
总结
Optional Chaining 是一种简化嵌套数据判断的语法糖，在操作对象、数组和函数时都可以使用。它让我们的代码更加简洁、易读、易维护。在实际开发中，我们应该积极使用 Optional Chaining，以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65869754d2f5e1655d102131