在前端开发中，我们经常会遇到需要处理嵌套对象的情况，而在早期的 JavaScript 版本中，处理嵌套对象时需要用到很多繁琐的判断语句来保证代码安全性。这样的做法既低效又容易出错，让开发者在编写代码时非常头疼。而在 ES2021 中，新增了可选链（Optional Chaining）操作符，解决了这个问题，使得处理对象嵌套属性变得更加高效和简单。
可选链操作符介绍
可选链操作符是 JavaScript 中的一个新操作符，用于对对象的嵌套属性进行访问，在访问嵌套属性时无需担心中途属性不存在导致代码错误的问题，能够避免执行时出现错误，并且代码逻辑更加清晰。
- ?. 用于访问对象的属性，其左侧的表达式只有在非 null 或非 undefined 的情况下才会执行右侧的属性访问。（ES2020 中已经支持该操作符）
// javascriptcn.com 代码示例
const obj = {
a: {
b: 1
}
}
// 在 obj 对象存在的情况下，打印 obj.a.b 的值
console.log(obj?.a?.b) // 1
// 在 obj 对象不存在的情况下，打印 undefined
console.log(obj?.c?.d) // undefined- ?[] 用于访问对象的动态属性，其左侧的表达式只有在非 null 或非 undefined 的情况下才会执行。此外，使用可选链操作符时也可以用于调用函数。
// javascriptcn.com 代码示例
const obj = {
a: {
b: [1, 2, 3]
}
}
// 在 obj 对象存在的情况下，打印 obj.a.b[2] 的值
console.log(obj?.a?.b?.[2]) // 3
// 在 obj 对象不存在的情况下，打印 undefined
console.log(obj?.c?.d?.[2]) // undefined
// 调用 obj.a.b.slice 函数
console.log(obj?.a?.b?.slice(1, 3)) // [2, 3]可选链操作符优势
使用可选链操作符，我们可以更加方便地处理对象的嵌套属性，具体有以下几点优势。
- 代码更加简洁
使用可选链操作符后，代码变得更加简练，避免了繁琐的判断语句，让代码更加易读易懂。
- 更加安全
使用可选链操作符避免了访问不存在属性导致代码错误的问题，保证代码运行的安全性。
- 提高开发效率
使用可选链操作符大大提高了开发效率，在开发过程中可以让开发者更加专注于业务逻辑的处理而不是细节上的处理。
可选链操作符与传统方式对比
下面是使用可选链操作符和传统方式两种处理对象嵌套属性的对比，可以直观地感受到可选链操作符的优势。
// javascriptcn.com 代码示例
// 传统方式
var obj = {
a: {
b: {
c: 1
}
}
};
if (obj && obj.a && obj.a.b && obj.a.b.c) {
console.log(obj.a.b.c);
}
// 可选链操作符方式
console.log(obj?.a?.b?.c);实战演示
下面使用一个示例代码来演示可选链操作符的使用。
// javascriptcn.com 代码示例
const data = {
person: {
name: 'Jack',
age: 18,
phone: '123456789',
location: {
city: 'Beijing',
district: 'Haidian'
}
}
}
if (data && data.person && data.person.location && data.person.location.city) {
console.log(data.person.location.city)
}
// 使用可选链操作符，等同于上述代码
console.log(data?.person?.location?.city)总结
可选链操作符的引入大大提升了对嵌套属性的访问效率，使得代码更加简洁、安全和易懂。在以后的前端开发过程中，建议尽量使用可选链操作符避免繁琐的判断语句，提升代码效率和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6534ddd57d4982a6eba47ed7