随着 JavaScript 语言的发展，ECMAScript 2020 中加入了可选链运算符，它是一种简洁、优雅的访问对象属性的方式，特别适用于处理嵌套的对象或数组结构。本文将详细介绍可选链运算符的用法和应用场景，并提供示例代码和实际案例。
什么是可选链运算符
在 JavaScript 中，访问对象属性时，如果该属性不存在，则会返回 undefined。这在访问嵌套的对象或数组时，可能会引发一些问题，例如：
// www.javascriptcn.com code example
const obj = {
foo: {
bar: {
baz: 'hello'
}
}
}
console.log(obj.foo.bar.baz) // 'hello'
console.log(obj.foo.bar.qux) // undefined
console.log(obj.foo.qux.baz) // TypeError: Cannot read property 'baz' of undefined在上面的代码中，如果 obj.foo.bar.qux 不存在，它会返回 undefined，但是如果 obj.foo.qux.baz 不存在，它会抛出一个 TypeError 异常，导致程序崩溃。这种情况下，我们需要使用 if 语句或三元运算符来检查属性是否存在，例如：
if (obj.foo && obj.foo.qux && obj.foo.qux.baz) {
console.log(obj.foo.qux.baz)
}这种代码显得冗长且难以维护，可选链运算符就是为了解决这个问题而生的。
可选链运算符 ?. 可以用来访问对象属性，如果属性不存在，则返回 undefined，而不是抛出异常。例如：
console.log(obj.foo?.bar?.baz) // 'hello' console.log(obj.foo?.bar?.qux) // undefined console.log(obj.foo?.qux?.baz) // undefined
这样，我们就可以避免使用冗长的 if 语句来检查属性是否存在，代码显得更加简洁和优雅。
可选链运算符的用法
可选链运算符 ?. 可以用于访问对象的属性、方法、数组的元素等。下面是一些示例：
// www.javascriptcn.com code example
const obj = {
foo: {
bar: {
baz: 'hello',
fn: () => console.log('fn called')
}
},
arr: [1, 2, 3]
}
console.log(obj.foo?.bar?.baz) // 'hello'
console.log(obj.foo?.bar?.fn?.()) // 'fn called'
console.log(obj.arr?.[0]) // 1
console.log(obj.arr?.[10]) // undefined可选链运算符还可以与其他运算符一起使用，例如：
// www.javascriptcn.com code example
const obj = {
foo: {
bar: {
baz: 'hello'
}
}
}
console.log(obj?.foo?.bar?.baz || 'default') // 'hello'
console.log(obj?.foo?.qux?.baz || 'default') // 'default'上面的代码中，使用了逻辑或运算符 || 来设置默认值，如果属性不存在，则返回默认值。
可选链运算符的应用场景
可选链运算符的应用场景非常广泛，特别适用于处理嵌套的对象或数组结构。例如：
// www.javascriptcn.com code example
const data = {
user: {
name: 'Alice',
address: {
city: 'Shanghai',
street: 'Nanjing Road'
}
},
orders: [
{
id: 1,
products: [
{ name: 'iPhone', price: 999 },
{ name: 'iPad', price: 799 }
]
},
{
id: 2,
products: [
{ name: 'MacBook', price: 1999 },
{ name: 'AirPods', price: 199 }
]
}
]
}
console.log(data.user?.name) // 'Alice'
console.log(data.user?.address?.city) // 'Shanghai'
console.log(data.orders?.[0]?.products?.[0]?.name) // 'iPhone'
console.log(data.orders?.[1]?.products?.[1]?.name) // 'AirPods'上面的代码中，使用了可选链运算符来访问嵌套的对象和数组，避免了代码的冗长和异常的抛出。
结语
可选链运算符是 ECMAScript 2020 的新特性，它是一种简洁、优雅的访问对象属性的方式，特别适用于处理嵌套的对象或数组结构。本文介绍了可选链运算符的用法和应用场景，并提供了示例代码和实际案例，希望能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4b081a941bf71348d7275