详解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;// 洪山区

如果address属性为空，则area变量的值为undefined。

然而，这种方法在处理对象层次结构较多的对象时会显得很麻烦。在这种情况下，可选链会更加直观和方便。

我们可以使用可选链，以更加简练和易于阅读的方式来访问属性：

const area = user?.address?.area

总结

使用可选链可以为写代码带来更加直观和方便的体验