在前端开发中，我们经常需要处理 null 或 undefined 的情况，以避免程序崩溃或出现错误。在 ES12 中，新增了可选链运算符（Optional Chaining Operator），可以方便地处理这种情况。本文将介绍可选链运算符的使用方法及其在实际开发中的应用。
可选链运算符的概念
可选链运算符是一个问号（?）加上一个点（.）组成的运算符，即 ?.。它的作用是在对象链式调用中，当某个属性或方法不存在时，不会抛出错误，而是返回 undefined。这样可以避免因为属性或方法不存在而导致程序崩溃或出现错误。
可选链运算符的使用方法
可选链运算符的使用方法非常简单，只需要在属性或方法名前加上问号（?）即可。例如：
// javascriptcn.com 代码示例
const obj = {
a: {
b: {
c: 'hello'
}
}
};
console.log(obj?.a?.b?.c); // 输出 'hello'
console.log(obj?.a?.b?.d); // 输出 undefined在上面的例子中，我们使用了可选链运算符 ?. 来访问对象 obj 的属性 a、b、c 和 d。当属性或方法不存在时，可选链运算符会返回 undefined。
可选链运算符还可以用在函数调用中。例如：
// javascriptcn.com 代码示例
const obj = {
a: {
b: {
c: function() {
return 'hello';
}
}
}
};
console.log(obj?.a?.b?.c?.()); // 输出 'hello'
console.log(obj?.a?.b?.d?.()); // 输出 undefined在上面的例子中，我们使用了可选链运算符 ?. 来调用对象 obj 的方法 c。当方法不存在时，可选链运算符会返回 undefined。
可选链运算符的应用场景
可选链运算符在实际开发中有很多应用场景，下面列举了几个常见的场景。
访问嵌套对象的属性
当访问嵌套对象的属性时，如果中间的对象不存在，就会抛出错误。使用可选链运算符可以避免这种情况的发生。例如：
// javascriptcn.com 代码示例
const obj = {
a: {
b: {
c: 'hello'
}
}
};
console.log(obj?.a?.b?.c); // 输出 'hello'
console.log(obj?.a?.d?.c); // 输出 undefined在上面的例子中，我们使用了可选链运算符 ?. 来访问对象 obj 的属性 a、b 和 c。当属性不存在时，可选链运算符会返回 undefined。
调用嵌套对象的方法
当调用嵌套对象的方法时，如果中间的对象不存在，就会抛出错误。使用可选链运算符可以避免这种情况的发生。例如：
// javascriptcn.com 代码示例
const obj = {
a: {
b: {
c: function() {
return 'hello';
}
}
}
};
console.log(obj?.a?.b?.c?.()); // 输出 'hello'
console.log(obj?.a?.d?.c?.()); // 输出 undefined在上面的例子中，我们使用了可选链运算符 ?. 来调用对象 obj 的方法 c。当方法不存在时，可选链运算符会返回 undefined。
判断数组元素是否存在
在访问数组元素时，如果索引不存在，就会抛出错误。使用可选链运算符可以避免这种情况的发生。例如：
const arr = [1, 2, 3]; console.log(arr?.[0]); // 输出 1 console.log(arr?.[3]); // 输出 undefined
在上面的例子中，我们使用了可选链运算符 ?. 来访问数组 arr 的元素。当索引不存在时，可选链运算符会返回 undefined。
总结
通过本文的介绍，我们了解了可选链运算符的概念、使用方法和应用场景。在实际开发中，使用可选链运算符可以避免因为属性或方法不存在而导致程序崩溃或出现错误，提高代码的健壮性和可维护性。建议在新项目中或升级项目时使用可选链运算符。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655ded80d2f5e1655d8389a5