在前端开发中，我们经常会处理对象的属性或方法，但是当访问一个未定义的属性时，就会出现 undefined，而在链式调用中，如果其中一个对象为 null 或 undefined，则程序将崩溃。这时 ES12 中的可选链运算符就派上了用场。
可选链运算符介绍
可选链运算符（Optional chaining）用于在链式调用的过程中，如果遇到 null 或 undefined，就不会继续执行下去，而不是报错停止运行。可选链运算符为 ?.。
语法：
obj?.prop // 如果 obj 存在，返回 obj.prop；否则返回 undefined
除了点运算符，当使用其他运算符时，需要加上圆括号。
obj?.[expr] // 如果 obj 存在，返回 obj[expr]，否则返回 undefined func?.(args) // 如果 func 存在，调用 func(args)，否则返回 undefined
使用可选链运算符处理 undefined 和 null
在实际项目中，当访问对象的深层属性时，可选链运算符可以大大减少代码的复杂度和冗余。下面通过一个例子来说明如何使用可选链运算符处理 undefined 和 null。
// 定义一个对象
const user = {
name: 'Tom',
age: 18,
address: {
province: 'Guangdong',
city: 'Guangzhou',
street: 'Road 1',
zipcode: '123456'
}
}
// 访问属性
console.log(user.name); // 输出：Tom
console.log(user.address.province); // 输出：Guangdong以上代码中，我们可以通过点运算符访问属性和深层属性。但是当我们访问一个不存在的属性时，就会出现 undefined。
console.log(user.email); // 输出：undefined console.log(user.address.postcode); // 输出：TypeError: Cannot read property 'postcode' of undefined
当我们访问对象的嵌套属性时，需要判断每个访问的属性是否存在。使用可选链运算符可以简化代码的编写，避免代码中充斥着大量的 if 判断语句。
console.log(user?.email); // 输出：undefined console.log(user.address?.postcode); // 输出：undefined console.log(user.address?.details?.postcode); // 输出：undefined
以上代码中，当访问不存在的属性时，可选链运算符会自动返回 undefined，不会报错。
使用可选链运算符替换 if 判断语句
在一些复杂的场景中，我们可能需要使用 if 判断语句来保证程序的正常运行。下面通过一个例子来说明如何使用可选链运算符替换 if 判断语句。
// 定义一个对象
const user = {
name: 'Tom',
age: 18,
address: {
province: 'Guangdong',
city: 'Guangzhou',
street: 'Road 1',
zipcode: '123456'
}
}
// 判断属性是否存在（传统方法）
if (user && user.address && user.address.postcode) {
console.log(user.address.postcode);
} else {
console.log('postcode not exist');
}
// 判断属性是否存在（使用可选链运算符）
console.log(user?.address?.postcode ?? 'postcode not exist');以上代码中，使用可选链运算符可以大大简化代码的编写，减少了冗余的 if 判断语句。
总结
- 可选链运算符可以有效地处理 undefined 和 null；
- 使用可选链运算符可以大大简化代码的编写，减少冗余的 if 判断语句；
- 可选链运算符在处理对象的深层属性时十分有用。
以上是关于如何使用 ES12 中的可选链运算符处理 undefined 和 null的介绍和示例，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e5554add4f0e0ff752e47