随着 JavaScript 语言的发展，前端开发中的复杂度也越来越高。为了应对这种情况，ECMAScript 对语言规范进行了不断的更新，以提供更便捷、高效的语法和程序结构。其中，ES11 中的可选链操作符就是一种重要的新特性，为前端开发者提供了更简单高效的编码方式。本文将介绍 ES11 可选链操作符的使用案例及优势，并提供实用的示例代码。
可选链操作符是什么？
在 JS 语言中，访问对象属性、方法或下标时，如果该对象为 null 或 undefined，则会导致代码抛出 TypeError 异常。例如：
let obj = null; console.log(obj.x.y.z); //TypeError: Cannot read property 'y' of null
为了避免这种情况发生，前端开发者需要在代码中增加判断语句，以确保对象不为 null 或 undefined。例如：
let obj = null;
if(obj && obj.x && obj.x.y && obj.x.y.z){
console.log(obj.x.y.z);
}为了解决这种冗长的代码书写方式，ES11 引入了可选链操作符 ?.，可以在一个表达式中进行多层判断，只要其中有一个值为 null 或 undefined，则该表达式的结果就为 undefined。例如：
let obj = null; console.log(obj?.x?.y?.z); // undefined
借助可选链操作符，前端开发者可以在代码中大量缩减冗长的判断语句，从而提高开发效率和代码简洁程度。
可选链操作符的使用案例
对象属性的存在性检查
在实际开发中，一个对象可能存在多种属性，需要进行逐个判断。例如：
// javascriptcn.com 代码示例
const user = {
name: '张三',
age: 18,
address:{
province:'广东省',
city:'深圳市',
street:'xx街道'
}
}
if(user && user.address && user.address.province){
console.log(user.address.province);
}借助可选链操作符，我们可以使用一行代码来实现以上功能：
// javascriptcn.com 代码示例
const user = {
name: '张三',
age: 18,
address:{
province:'广东省',
city:'深圳市',
street:'xx街道'
}
}
console.log(user?.address?.province);数组下标的存在性检查
在对数组进行访问时，也可能会遇到下标越界的情况。例如：
const arr = [1,2,3];
if(arr && arr[3]){
console.log(arr[3]);
}通过可选链操作符，可以更加简洁明了的进行访问：
const arr = [1,2,3]; console.log(arr?.[3]); //undefined
可选链操作符的优势
可选链操作符的优势在于可以在代码中省略冗长的判断语句以及条件判断语句，填补了 ES6 引入的空位合并运算符的不足，实现了更加简明、清晰的代码表达。
具体来说，可选链操作符的优势可以总结为以下几点：
- 可以大量精简代码书写，尤其对于存在多层嵌套的对象和数组结构，减少判断语句的出错和遗漏。
- 避免了空指针异常的出现，提高了代码的鲁棒性，增强程序的健壮性。
- 在对原有代码的修改时也非常方便，代码结构更加灵活。
总结
ES11 中的可选链操作符为前端开发者提供了更加高效的编码方式，在访问对象属性或数组元素时可以省略一部分判断语句，代码更加简洁，降低了代码出错的概率，提高了前端开发效率。因此，开发者需掌握并合理使用该操作符，降低代码的维护成本。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b41e47d4982a6eb52bcf7