在 ES9 中使用 Optional Chaining 来处理嵌套属性和方法调用-JavaScript中文网-JavaScript教程资源分享门户

在ES9中使用Optional Chaining 来处理嵌套属性和方法调用

前端开发人员经常会遇到一个常见的问题：如何避免由于深层次嵌套属性或方法调用而导致的代码异常或崩溃？在过去，我们可能会使用一些 hack 的方式来解决这个问题，如使用 if 判断，或三元表达式，或者采用 lodash 的 get 方法来获取某个对象的属性值。

在最近的ECMAScript 2020（也称为ES9）中，新增加了 Optional Chaining（可选链）语法，提供了一种优雅而简洁的解决方案，使得我们能够更加轻松地处理对象属性或方法的嵌套调用，从而消除崩溃的风险。

Optional Chaining是如何工作的？

在介绍如何使用 Optional Chaining 之前，我们先来了解一下它是如何工作的。以前，我们如果想在一个深嵌套的对象中获取到一个属性（或方法），我们通常会使用以下的语法：

let name = person && person.address && person.address.city && person.address.city.name;

这样的代码会判断每一个属性是否存在以确定代码是否会出错。但是，这样的语法有时候会特别的繁琐，尤其是当属性的层次越来越深的时候。如果你要是进行方法调用，这个判断可能会变得更加复杂。

ES9新增了可选链运算符，语法很像普通的点号运算符（），但多了一个问号（?）在点号前面。这样，我们就可以通过这种方式来解决多层嵌套属性的访问问题。

举个例子，当我们使用可选链运算符获取类似的操作时：

let name = person?.address?.city?.name;

当我们使用可选链运算符调用一个嵌套的方法时，如下所示，可选链运算符会自动判断每个方法的返回值是否为null或者undefined：

let name = person?.getAddress()?.city?.getName();

值得注意的是，Optional Chaining只会保护点号之前的变量或对象是否存在，而不是检查属性值是否为 null。为了确保属性值不是 null，我们可能还需要使用 Nullish coalescing 运算符。

使用 Optional Chaining 来处理嵌套属性和方法调用

为了更好地理解可选链语法的实际应用，我们可以通过一个简单的示例进行说明。假设我们有一个 Person 对象，该对象有一个名为 name 的属性和一个名为 getCity() 的方法，此方法将返回一个名为 City 的对象，该对象还包含一个名为 country 的属性。

-- -------------------- ---- -------
----- ------ - -
    ----- -----
    --------- -
        ------ -
            ----- -----
            -------- ----
        --
    -
--

传统的代码实现方式如下：

let personName = Person.name;
let cityName = Person.getCity().name;
let countryName = Person.getCity().country;

但是当对象的某个属性为 null 或 undefined 时，上述代码将会抛出错误。

使用 Optional Chaining，我们可以将以上代码改写为以下形式：

let personName = Person?.name;
let cityName = Person?.getCity()?.name;
let countryName = Person?.getCity()?.country;

在上面的示例中，我们可以看到，使用 Optional Chaining 的形式更加简洁明了，并且避免了出现未定义的错误。

总结

Optional Chaining 是 ECMAScript 2020 中一个非常有用的功能，它能够消除深层嵌套的对象或方法调用所带来的风险，并且使得代码更加的清晰。我们使用这种语言特性的时候可能需要注意的一些点，其中最重要的一点是它可以确保对象的嵌套值非null或者undefined。因此，我们可能需要使用 Nullish coalescing 运算符来进一步进行保护。

在组织大型的 Web 应用程序时，使用 Optional Chaining 可以让代码更加简单、可维护、可读性更高。希望这篇文章能够帮助你了解如何使用这种语法特性并将其应用到你的工作之中。

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