ECMAScript 2020：使用可选链操作符优化嵌套层次-JavaScript中文网-JavaScript教程资源分享门户

简介

随着 Web 技术的发展，前端开发工作越来越复杂。越来越多的数据和功能都集中在网页上，而访问和处理这些数据和功能需要大量的代码和逻辑。在开发过程中，我们经常会遇到数据嵌套层次很深的情况，而这种嵌套层次不仅给开发人员带来了挑战，也增加了代码的复杂性和可读性。

在 ECMAScript 2020 中，新增了可选链（Optional Chaining）操作符，用于简化访问嵌套数据的语法，并提高代码的可读性和可维护性。本文将介绍可选链操作符的用法、优势和示例。

可选链操作符的用法

在介绍可选链操作符的用法之前，我们需要了解一下对象或数组的属性或元素访问方式。

传统的访问方式：

if (obj && obj.foo && obj.foo.bar) {
    // do something with obj.foo.bar
}

上面的代码判断了 obj、obj.foo 和 obj.foo.bar 是否存在，只有当它们都存在时才会执行后面的逻辑。这种方式的问题在于当 obj、obj.foo 或 obj.foo.bar 中任何一个不存在时，后面的逻辑都不会执行。

而通过可选链操作符，可以更简洁的实现上述逻辑，就是在访问属性或元素时，在属性或元素名后加一个问号（?）。

例如，上面的代码可以用如下方式实现：

if (obj?.foo?.bar) {
    // do something with obj.foo.bar
}

这样当 obj、obj.foo 或 obj.foo.bar 中任何一个不存在时，后面的逻辑不会执行，同时也不会报错。

可选链操作符的优势

使用可选链操作符，主要有以下优势：

1. 简化访问嵌套数据的语法

在访问嵌套数据时，使用传统的访问方式需要写很多代码来处理空值或未定义值的情况，代码可读性很差，也容易出错。

而使用可选链操作符，可以通过简单的方式访问嵌套数据，代码可读性得到了大幅度提升。例如：

// javascriptcn.com 代码示例
// 传统方式
if (obj && obj.foo && obj.foo.bar && obj.foo.bar.baz) {
    // do something with obj.foo.bar.baz
}

// 可选链操作符
if (obj?.foo?.bar?.baz) {
    // do something with obj.foo.bar.baz
}

2. 提高代码的可读性和可维护性

使用可选链操作符，可以使代码更加简洁，逻辑更加清晰，易于维护。代码更容易被其他开发人员理解，从而提高团队的协作效率。例如：

// 传统方式
const fullName = user && user.profile && user.profile.name && (user.profile.name.first + ' ' + user.profile.name.last);

// 可选链操作符
const fullName = user?.profile?.name?.first + ' ' + user?.profile?.name?.last;

3. 避免出现 TypeError

使用可选链操作符可以避免出现访问未定义值时的 TypeError 错误。例如：

// 传统方式
const age = user && user.profile && user.profile.age;

// 可选链操作符
const age = user?.profile?.age;

当 user 或 user.profile 为 undefined 时，访问 age 属性会报 TypeError 错误。而使用可选链操作符，当 user 或 user.profile 为 undefined 时，age 变量赋值为 undefined，不会报错。

可选链操作符的示例

以下是一些使用可选链操作符的示例：

// javascriptcn.com 代码示例
// 使用可选链操作符检查对象的属性是否存在
const obj = { foo: { bar: 'baz' } };
console.log(obj?.foo?.bar); // 'baz'
console.log(obj?.foo?.baz); // undefined

// 使用可选链操作符检查数组的元素是否存在
const arr = [1, 2, 3];
console.log(arr?.[0]); // 1
console.log(arr?.[3]); // undefined

// 使用可选链操作符调用函数
const fn = {
    greeting: () => console.log('Hello')
};
fn?.greeting?.(); // 'Hello'

// 可选链操作符简化嵌套层次
let user = {
    profile: {
        name: {
            first: 'John',
            last: 'Doe'
        },
        address: {
            street: '123 Main St.',
            city: 'Anytown',
            state: 'CA',
            zip: '12345'
        },
        email: 'john.doe@example.com'
    }
};

console.log(user?.profile?.name?.first + ' ' + user?.profile?.name?.last); // 'John Doe'
console.log(user?.profile?.address?.zip); // '12345'
console.log(user?.profile?.phone?.number); // undefined

总结

ECMAScript 2020 中新增的可选链操作符，可以帮助开发人员更简单、更可读、更易维护的访问嵌套数据。使用可选链操作符可以在不增加代码复杂性的情况下，提高代码的可读性和可维护性，避免出现 TypeError 错误，以及简化访问嵌套层次。好的编码习惯可以让我们的代码更加容易读懂和管理，值得我们去学习和运用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fb154ff6b2d6eab31c7598