JavaScript 是现代 Web 开发中必不可少的一种主流语言，虽然 JavaScript 很强大，但是在处理对象属性时总会有一些不可预知的错误，例如当我们尝试访问一个可能为空或未定义的属性时。ES9 的可选链运算符正是为了解决这个问题而生的。
可选链运算符的作用
在 JavaScript 中，当尝试访问一个可能为空或未定义的属性时，通常会使用短路运算符来避免错误。例如，我们可以通过检查对象属性是否存在来验证对象是否为空。
if (obj && obj.prop) {
// ... do something with obj.prop
}这种写法是可以避免空对象异常的，但是却缺乏简洁性。ES9 中的可选链运算符解决了这个问题，让我们可以直接通过一个符号来进行安全的属性访问：
if (obj?.prop) {
// ... do something with obj.prop (if it exists)
}使用可选链运算符
ES9 的可选链运算符是一个问号（?）后跟一个点（.），即 ?.。在使用可选链运算符时，我们可以避免模板字面量中使用 && 或 || 的复杂写法，而通过一种更简单、安全、可读性更强的方式。
const foo = { bar: { baz: 'Hello World' } };
const bar = { baz: 'Hello World' };
console.log(foo?.bar?.baz); // 'Hello World'
console.log(bar?.bar?.baz); // undefined在上面的示例中，我们通过可选链运算符直接访问了对象属性中的值，并且不会触发异常。当使用可选链时，如果对象属性存在，则将返回其实际值，如果对象属性不存在，则返回 undefined。
可选链运算符与其他运算符的结合使用
可选链运算符可以与其他运算符进行灵活组合，从而形成更多的组合写法。例如，我们在结合 () 时可以避免一些难以预知的错误：
const foo = { bar: { baz() { return 'Hello World' } } };
console.log(foo?.bar?.baz?.()); // 'Hello World'在上面的示例中，我们直接调用了一个对象的方法，并没有进行多余的判断和处理。如果结果存在，则将结果作为一个函数来调用，否则返回 undefined。
另一种组合写法是与 [] 运算符相结合，例如：
const foo = { bar: ['Hello', 'World'] };
console.log(foo?.bar?.[0]); // 'Hello'
console.log(foo?.bar?.[1]); // 'World'
console.log(foo?.bar?.[2]); // undefined在上面的示例中，我们可以直接使用可选链运算符来访问数组的索引值，而无需再使用 && 或 || 进行逐个项的检查。
总结
在 JavaScript 中，使用可选链运算符可以避免一些不可预知的错误，并且可以减少代码量和提高代码可读性。在实际项目或开发中，我们应该积极使用可选链运算符，以达到更好的效果。
if (obj?.prop) {
// ... do something with obj.prop (if it exists)
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65adcbc6add4f0e0ff744a78