在前端开发中，我们经常会遇到处理 undefined 的情况。在 ES12 中，出现了一种新的语法，可选链运算符，可以更加方便地处理这种情况。本文将介绍可选链运算符的使用方法，并提供相关示例代码，帮助读者更好地掌握这一技术。
可选链运算符是什么？
可选链运算符是一种新的语法，可以用来处理可能为 undefined 的值。它的语法形式是 ?.，可以安全地访问对象的属性或方法，如果对象不存在，则返回 undefined，而不会抛出异常。
如何使用可选链运算符？
在 ES12 中，使用可选链运算符非常简单。只需要在要访问的属性或方法的前面加上 ?. 就可以了。下面是一个示例：
// javascriptcn.com 代码示例
const obj = {
foo: {
bar: 'baz'
}
}
console.log(obj?.foo?.bar) // 'baz'
console.log(obj?.foo?.baz) // undefined
console.log(obj?.baz?.bar) // undefined在上面的示例中，我们使用了可选链运算符来访问 obj 对象中的属性。如果属性存在，则返回属性的值，否则返回 undefined。
可选链运算符的嵌套使用
在实际开发中，我们可能需要对多层嵌套的对象进行访问，这时候就可以使用可选链运算符的嵌套使用。下面是一个示例：
// javascriptcn.com 代码示例
const obj = {
foo: {
bar: {
baz: 'qux'
}
}
}
console.log(obj?.foo?.bar?.baz) // 'qux'
console.log(obj?.foo?.baz?.qux) // undefined在上面的示例中，我们使用了可选链运算符对多层嵌套的对象进行访问。如果对象存在，则返回属性的值，否则返回 undefined。
可选链运算符的方法调用
除了访问属性之外，可选链运算符还可以用于调用对象的方法。下面是一个示例：
// javascriptcn.com 代码示例
const obj = {
foo: {
bar() {
console.log('hello')
}
}
}
obj?.foo?.bar?.() // 'hello'
obj?.foo?.baz?.() // undefined在上面的示例中，我们使用了可选链运算符来调用对象的方法。如果方法存在，则调用方法，否则返回 undefined。
可选链运算符的指导意义
使用可选链运算符可以提高代码的健壮性和可读性。在访问对象属性或调用对象方法时，如果对象不存在，不使用可选链运算符会抛出异常。而使用可选链运算符，则可以在访问不存在的属性或调用不存在的方法时，返回 undefined，避免了代码的崩溃。
此外，可选链运算符还可以简化代码的书写，使代码更加简洁明了。特别是在处理多层嵌套的对象时，使用可选链运算符可以减少代码的嵌套深度，提高代码的可读性。
总结
可选链运算符是一种非常实用的语法，可以更加方便地处理可能为 undefined 的值。在实际开发中，我们可以使用可选链运算符来访问对象的属性或方法，避免了代码的崩溃，同时也可以简化代码的书写，提高代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655d44d3d2f5e1655d7881b6