什么是 Optional Chaining 操作符？
Optional Chaining 操作符是在 ES11 中新增的一个语法糖，可以帮助开发者简化代码，避免在访问深层嵌套对象时不必要的判断和报错。
在 JavaScript 中，当我们想要访问一个对象的属性或方法时，如果该对象不存在或为 null 或 undefined，通常会抛出 TypeError 异常，代码会中断执行，导致出现一些不必要的问题，比如：
let obj = { a: { b: { c: 123 } } };
console.log(obj.a.b.c.d); // TypeError: Cannot read property 'd' of undefined此时我们通常要先判断 a、b、c 是否存在，或者使用一些 if 判断和 try catch 来避免这种异常，但是这样的代码显得冗长而繁琐。
而 Optional Chaining 操作符就是专门解决这个问题的，它可以在属性或方法访问时，直接判断是否存在，如果不存在就返回 undefined，不会抛出异常，使用起来非常简单。
如何使用 Optional Chaining 操作符？
Optional Chaining 操作符的语法很简单，就是在属性或方法名后面加上问号 ?，例如：
let obj = { a: { b: { c: 123 } } };
console.log(obj?.a?.b?.c?.d); // undefined这个例子中，我们使用 Optional Chaining 操作符来访问了一个深层嵌套的对象属性 c.d，即使 c 或 d 不存在，代码也不会出错，而是直接返回 undefined。
如果我们想要给属性或方法添加一个默认值，可以使用如下的语法：
let obj = { a: { b: { c: 123 } } };
console.log(obj?.a?.b?.c?.d ?? 456); // 456在上面的例子中，我们在问号后面使用两个问号 ??，然后跟上一个默认值，如果属性或方法返回的是 undefined，就会返回默认值。
Optional Chaining 操作符的注意事项
Optional Chaining 操作符只能用于 ES11 及以上版本的 JavaScript 中，如果你要在旧的 JavaScript 版本中使用 Optional Chaining 操作符，可以使用 TypeScript 或 Babel 等工具来转换代码。
Optional Chaining 操作符只能用于对象和类的属性和方法访问，不能用于数组、函数和模板字符串等其他场合。
Optional Chaining 操作符不能用于赋值操作中，也就是说不能使用
obj?.a = 123这样的语法。
示例代码
下面是一个具体的示例代码，展示了如何使用 Optional Chaining 操作符：
// www.javascriptcn.com code example
// 定义一个包含嵌套对象和方法的对象
let user = {
name: 'Tom',
address: {
city: 'Beijing',
street: 'Wangfujing',
zipCode: '123456'
},
getInfo() {
return `My name is ${this.name}, I live in ${this.address.city}, ${this.address.street}.`;
}
}
// 访问 name 和 address 属性，如果不存在则返回 undefined
console.log(user?.name); // Tom
console.log(user?.address?.city); // Beijing
console.log(user?.address?.street); // Wangfujing
console.log(user?.address?.zipCode); // 123456
console.log(user?.age); // undefined
// 调用 getInfo 方法，如果不存在则返回 undefined
console.log(user?.getInfo?.()); // My name is Tom, I live in Beijing, Wangfujing.
// 使用默认值，如果属性或方法不存在则返回默认值
console.log(user?.age ?? 18); // 18
console.log(user?.getAge?.() ?? 18); // 18指导意义
使用 Optional Chaining 操作符可以提高代码的可读性和简洁性，特别是在访问深层嵌套的对象和方法时，避免写一大堆判断和异常处理代码，给开发者带来了非常大的方便和优雅的写法，也是现代 JavaScript 开发中必备的基础语法之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d660aea941bf7134c1c46d