这篇文章主要介绍“JavaScript中的可选链怎么使用”，在日常操作中，相信很多人在JavaScript中的可选链怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript中的可选链怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
简介
在
JavaScript中，我们经常需要处理
JSON数据对象，而
JSON数据对象的层级较深，处理其属性值时就会显得较为麻烦，此时可选链（
Optional Chaining）就派上用场了。
可选链是一种方便的语法糖，可以简化层级深的对象属性访问的过程。也就是说，在访问一个对象中的属性时，如果该属性不存在，我们将不必再像以前那样判断对象的每一层级是否存在这个属性，而是使用可选链的方式直接访问，代码的可读性和简洁性也得到了极大的提升。
下面举个例子，假设我们有一个表示学生的
json对象，里面包含了学生的姓名、年龄和地址等详细信息。现在我们需要使用一系列“.”来访问其中每个属性，这时代码就显得很冗长：
const student = {
name: "张三",
age: 18,
address: {
province: "北京",
city: "朝阳区",
street: "南湖东路1号"
}
};
let street = "";
if (student.address && student.address.province === "北京" && student.address.city === "朝阳区") {
street = student.address.street;
}
console.log(street);上面的代码中，我们使用了冗长的if语句来验证是否存在地址信息，并且访问该地址的街道信息。
而使用可选链的方式，我们可以更加简洁的实现：
const student = {
name: "张三",
age: 18,
address: {
province: "北京",
city: "朝阳区",
street: "南湖东路1号"
}
};
const street = student?.address?.province === "北京" && student.address.city === "朝阳区" ? student.address.street : "";
console.log(street);代码中的 "?. " 是可选链操作符，它允许我们在属性的值可能为
undefined的情况下安全地访问对象的属性。例如，在这个示例中，如果属性
student.address或
student.address.city是
undefined，则最后的结果也将是
undefined，我们就无需再做逐个判断了，更具可读性。
另外一个细节是可选链问号 ? 只能用在点 . 符号之前。如果前面的变量或表达式为
null或
undefined，那么整个表达式的返回值就是
undefined。
值得注意的是，可选链操作符只在最新版的ES2020规范中被正式引入，在一些旧版本下可能会有不兼容的问题。
和其它相似方法的区别
和可选链类似的语法糖还有其它一些方法，如“&&”，使用它们的方式和可选链有些许不同。
举个例子，我们假设有一个
user对象用于存储人们的姓名和地址信息，其中
address也是一个对象类型，里面包含了省市区等信息：
const user = {
name: "Amy",
address: {
province: "湖北省",
city: "武汉市",
area: "洪山区",
}
}如果要获取用户所在区域，我们可以使用
&&运算符将它们连接起来实现类似于可选链式的访问方式：
const area = user.address && user.address.area;// 洪山区
然而，这种方法在处理对象层次结构较多的对象时会显得很麻烦。在这种情况下，可选链会更加直观和方便。
我们可以使用可选链，以更加简练和易于阅读的方式来访问属性：
const area = user?.address?.area