使用 ES2021 的可选链操作符简化 JavaScript 代码-JavaScript中文网-JavaScript教程资源分享门户

在编写 JavaScript 代码时，经常需要对深层次的对象进行属性访问。常见的情况是，对象的某个属性可能是空值(null 或 undefined)，这时直接访问该属性会导致程序抛出异常。为了避免这种情况，在编写代码时，通常需要使用繁琐的条件语句或者其他技巧来判断属性的存在性，这给开发带来了不少困扰。而在 ES2021 中，新增了可选链操作符(?.)，使得我们可以更加轻松地进行属性访问。本文将介绍这一新特性，并给出一些实用的示例。

可选链操作符

可选链操作符(?.)是一种新的操作符，用于判断一个变量是否为 null 或未定义(undefined)，以及是否有指定属性。操作符允许我们在访问对象属性时，跳过 null 或 undefined 对象，防止代码抛出异常。

下面是一个常见的例子：

// javascriptcn.com 代码示例
let person = {
    name: "Tom",
    address: {
        city: "Shanghai",
        street: "松江路"
    }
};

let street = person.address.street;

在这个例子中，我们想要读取 person 对象的 address 对象中的 street 属性。但是，如果 address 属性不存在或是 undefined，那么尝试访问它的 street 属性会导致程序抛出异常。因此，在访问该属性之前，通常需要加入如下的判断语句：

let street = person && person.address && person.address.street;

这一过程非常繁琐，并且代码很难读懂。而在 ES2021 中，我们可以使用可选链操作符来简化这一过程：

let street = person?.address?.street;

这个语句的作用与之前的判断语句相同，但更加简洁。

在上面的语句中，?. 操作符将按照左侧变量的值对右侧的属性进行属性访问。如果左侧的变量为 null 或 undefined，则返回 undefined，否则继续进行属性访问。如果在层级访问过程中某个属性不存在，则返回 undefined。从而避免了程序抛出异常。

需要注意的是，?. 操作符只能用于属性访问，不能用于一般的函数调用。

示例

下面是一些实用的示例：

1. 访问嵌套对象的属性

// javascriptcn.com 代码示例
let person = {
    name: "Tom",
    address: {
        city: "Shanghai",
        street: "松江路"
    }
};

let street = person?.address?.street; // "松江路"
let zip = person?.address?.zip; // undefined

2. 访问数组元素

let arr = [1, 2, 3];

let first = arr?.[0]; // 1
let fourth = arr?.[3]; // undefined

3. 使用可选链操作符进行函数调用

let obj = {
    func: function(x, y) {
        return x + y;
    }
};

let result = obj?.func?.(1, 2); // 3
let missingResult = obj?.missingFunc?.(1, 2); // undefined

总结

在 ES2021 中新增的可选链操作符(?.)可以很好地解决访问深层次对象时的 null 和 undefined 异常问题，并且可以大大简化代码，使得代码可读性更高。但需要注意的是，?. 操作符只能用于属性访问，不能用于一般的函数调用。我们应该在开发中充分利用这一新特性，提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654ef6b97d4982a6eb803db1