这篇文章主要介绍“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