ES10 实践：使用 Optional Chaining 解决 JS 对象属性查询问题

JavaScript（简称 JS）是一门面向对象的脚本语言，因其简单易用和跨平台性而备受广大前端开发者青睐。然而，当我们在处理对象属性查询时，常常需要写大量的 if 指令来验证属性是否存在。为了解决这个问题，ES10 引入了一个新的特性 ——Optional Chaining。

本文将详细介绍 Optional Chaining 的使用方法，并且通过示例代码展示如何在实际项目中使用 Optional Chaining。

Optional Chaining 简介

Optional Chaining（可选链式调用）是 ES10 中引入的一个新特性，它允许我们用一种简单的方法来缩短对象属性的查询逻辑。在使用 Optional Chaining 时，我们可以在对象属性调用中使用问号（?）来判断属性是否存在，如果存在就返回属性值，否则返回 undefined。

Optional Chaining 的语法如下所示：

obj?.prop  // 判断 obj 是否存在，如果存在返回 obj.prop ，否则返回 undefined。

注意，这里问号是用来判断 obj 是否存在的，这个符号是可选的。在 Optional Chaining 中，还可以使用函数的调用和数组索引的方式来访问对象属性，语法如下：

obj?.func()  // 判断 obj 是否存在，如果存在就调用 obj.func()，否则返回 undefined。

arr?.[0]     // 判断 arr 是否存在，如果存在就返回 arr[0]，否则返回 undefined。

Optional Chaining 的使用场景

Optional Chaining 在实际项目中有很多应用场景，特别是在对象属性查询方面。下面我们将通过几个示例来展示 Optional Chaining 的具体用法。

示例一：查询对象属性

在使用 Optional Chaining 之前，我们通常需要使用 if 语句来检查对象属性是否存在，代码如下：

if (obj && obj.prop1 && obj.prop1.prop2) {
    // 如果 obj.prop1.prop2 存在，执行代码
}

这样的代码看起来非常冗长，使用 Optional Chaining 就可以大大简化代码，代码如下：

if (obj?.prop1?.prop2) {
    // 如果 obj.prop1.prop2 存在，执行代码
}

示例二：调用对象方法

在执行对象方法时，我们需要确保方法所在的对象存在，代码如下：

if (obj && obj.method) {
    obj.method()
}

使用 Optional Chaining 可以使代码更加简洁，代码如下：

obj?.method?.()

注意，这里使用了括号“()”来调用方法，这是因为可选链调用会尝试访问方法并立即执行它。

示例三：遍历对象数组

在遍历对象数组时，我们需要判断数组是否存在，并使用相关循环来访问数组内部属性，代码如下：

if (arr && arr.length) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].prop1 && arr[i].prop1.prop2) {
            // 如果 arr[i].prop1.prop2 存在，执行代码
        }
    }
}

使用 Optional Chaining 之后，代码可以进行简化，代码如下：

for (let i = 0; i < arr?.length; i++) {
    if (arr?.[i]?.prop1?.prop2) {
        // 如果 arr[i].prop1.prop2 存在，执行代码
    }
}

Optional Chaining 的使用限制

Optional Chaining 虽然功能很强大，但仍有一些限制，需要我们在实际使用中注意。下面介绍常见的几个使用限制：

1. 可选链调用只能用于查询对象，不能用于设置属性的值。

2. 如果 obj 的值为 null 或者 undefined，那么 obj?.prop 会直接返回 undefined，而不会抛出异常。

3. 如果 obj.prop1 的值为 null 或者 undefined，那么 obj.prop1.prop2 会直接返回 undefined，而不会抛出异常。

综上所述，Optional Chaining 可以让我们在代码中更好地处理对象属性查询，减少不必要的 if 语句，让代码更加简洁易懂。但在实际使用中注意其限制，避免出现错误。

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