在前端开发中，我们常常需要处理数据的嵌套结构，如对象中的属性和数组中的元素。然而，当我们需要访问嵌套结构中的某个属性或元素时，如果其中某个层级不存在，就会导致代码出现错误。
在 ES10 中，新增了 Optional Chaining 操作符（?.），可以有效地解决这个问题。本文将介绍 Optional Chaining 的使用方法和其对代码的健壮性和稳定性的提升。
Optional Chaining 的使用方法
Optional Chaining 操作符的语法如下：
obj?.prop obj?.[expr] arr?.[index]
其中，obj 表示要访问的对象，prop 表示对象的属性，expr 表示属性名的表达式，arr 表示要访问的数组，index 表示数组的下标。
如果 obj 或 arr 为 null 或 undefined，那么访问 obj?.prop、obj?.[expr] 或 arr?.[index] 就会返回 undefined，而不会抛出错误。
例如：
-- -------------------- ---- ------- ----- --- - - -- - -- - - -- ----------------------- -- - ----- ---- - ----- --------------------- -- --------- ----- --- - --- -- --- ---------------------- -- - ----- ---- - ---------- ----------------------- -- ---------
Optional Chaining 对代码的健壮性和稳定性的提升
使用 Optional Chaining 操作符可以有效地提高代码的健壮性和稳定性，避免因为访问不存在的属性或元素而导致程序出现错误。
例如，假设我们需要访问一个对象的嵌套属性，但是其中某个层级可能不存在，那么可以使用 Optional Chaining 操作符来避免错误的出现：
const obj = { a: { b: { c: 1 } } };
console.log(obj?.a?.b?.c); // 1
const obj2 = { a: { b: null } };
console.log(obj2?.a?.b?.c); // undefined如果不使用 Optional Chaining 操作符，那么访问不存在的属性时就会出现错误：
const obj = { a: { b: { c: 1 } } };
console.log(obj.a.b.c); // Uncaught TypeError: Cannot read property 'c' of undefined
const obj2 = { a: { b: null } };
console.log(obj2.a.b.c); // Uncaught TypeError: Cannot read property 'c' of null同样地，当我们需要访问一个数组的某个元素时，也可以使用 Optional Chaining 操作符来避免错误的出现：
const arr = [[1, 2], [3, 4]]; console.log(arr?.[1]?.[1]); // 4 const arr2 = [[1, 2], null]; console.log(arr2?.[1]?.[1]); // undefined
如果不使用 Optional Chaining 操作符，那么访问不存在的元素时就会出现错误：
const arr = [[1, 2], [3, 4]]; console.log(arr[1][1]); // 4 const arr2 = [[1, 2], null]; console.log(arr2[1][1]); // Uncaught TypeError: Cannot read property '1' of null
示例代码
下面是一个使用 Optional Chaining 操作符的示例代码，用于获取一个对象中嵌套数组中的第一个元素：
const obj = { a: { b: [{ c: 1 }] } };
const firstC = obj?.a?.b?.[0]?.c;
console.log(firstC); // 1如果 obj、a、b 或者 [0] 不存在，那么返回 undefined。这样可以避免出现错误。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d8d521a941bf7134f71580