可选链（Optional Chaining）是 ES2020 中引入的一项新特性，它主要用于简化 JavaScript 对象的访问和操作，避免出现繁琐的 null 或 undefined 检查，提升代码的可读性和可维护性。本文将从概念、语法、示例等多个方面进行详解，帮助大家更好地理解和使用可选链。
概念
可选链是一种语法结构，它允许在访问或操作 JavaScript 对象的属性或方法时，不存在或未定义的属性或方法不会引发 TypeError 错误，而是直接返回 undefined。这样可以避免出现大量的 if 判断或三元运算符，提高代码的简洁性和可读性。
语法
可选链语法使用问号 ? 来表示可选成员访问或调用，位置在点号 . 或方括号 [] 的后面，如果该成员存在，则会执行访问或调用，否则会直接返回 undefined。
下面是可选链语法的基本示例：
object?.property object?.[key] function?.()
其中，object 表示 JavaScript 对象，property 表示对象的属性名，[key] 表示对象的动态属性名（例如数组下标），function 表示对象的方法名。注意，可选链语法只能用于访问或调用对象的成员，不能用于赋值操作。
示例
为了更好地理解可选链的使用，我们以一个具体的案例为例，假设有一个用户的对象，包含了一些个人信息和工作信息，例如：
const user = {
name: "张三",
age: 20,
job: {
company: "ABC",
position: "Front-End Developer"
}
};如果我们想获取用户的公司名称，传统的做法可能是这样的：
let companyName;
if (user.job) {
companyName = user.job.company;
}这种方法需要使用大量的 if 判断，代码臃肿并且容易出错。现在我们可以使用可选链语法简化代码：
const companyName = user.job?.company;
这样我们就可以通过一个简单的语法实现同样的结果，不需要添加任何多余的代码。当 job 对象不存在时，可选链语法会直接返回 undefined。
另外一个例子是调用对象的方法。假设有一个数组对象，我们想调用其中的第一个元素的 toUpperCase() 方法，传统的做法可能是这样的：
let firstItem;
if (array.length > 0) {
firstItem = array[0];
if (typeof firstItem === "string") {
firstItem = firstItem.toUpperCase();
}
}同样地，这种做法需要使用大量的条件判断，代码冗长，可读性差。现在我们可以这样实现：
const firstItem = array[0]?.toUpperCase();
这个语法结构显然更加简单明了，可以一眼看出我们的意图，避免了繁琐的细节。
注意事项
虽然可选链语法的出现大大简化了代码，但是在使用时需要注意一些细节，避免出现意外的问题和错误。这里列出了一些需要注意的事项：
- 可选成员访问或调用的位置必须在点号
.或方括号[]的后面，否则会报错； - 可选成员后面不能跟着调用操作符
()，否则会报错； - 可选链语法不能用于赋值操作，只能用于访问或调用操作；
- 可选链只能检查到对象存在与否，不能检查对象中属性的值是否为 null 或 undefined；
- 可选链语法不是必备的工具，只适用于某些场景，使用时需要根据实际情况灵活选择。
结论
可选链是一种完全兼容 ES6 的语法结构，它可以帮助我们简化 JavaScript 对象的访问和操作，避免出现繁琐的 null 或 undefined 检查，提升代码的简洁性和可读性。在实际开发中，我们可以结合可选链和其他 ES6 特性，构建更加精简、健壮、易维护的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e6b54e884a3e30f263cb3