ECMAScript 2020 新特性：如何使用可选链运算符简化你的开发工作-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2020 新特性：如何使用可选链运算符简化你的开发工作

简介

ECMAScript 2020 新增了一个非常实用的特性：可选链运算符（Optional Chaining Operator）。该特性可以帮助开发者更加方便地访问嵌套对象属性或方法，避免因为某个属性不存在而导致的错误。

在以往的开发中，我们需要先判断一个对象的某个属性是否存在，然后再进行访问。代码通常是这样写的：

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

在这样的代码中，我们需要进行多次判断，非常复杂且容易出错。而可选链运算符的出现，可以让我们更加方便地实现这样的操作。

可选链运算符的语法很简单，就是在要访问的属性或方法之前加上 ?.，代码如下：

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

如果 obj 或者 property1 不存在，访问会直接返回 undefined，而不会导致代码抛出异常。

例如，我们现在有这样一个对象：

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

如果我们想要获取 user 对象的 address 属性中的 city 值，那么以前的写法可能是这样的：

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

而使用可选链运算符，我们可以直接写成：

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

这样就方便了很多。

可选链运算符不仅仅可以用于访问对象属性，还可以用于访问数组下标和调用函数。下面分别介绍一下它们的使用方法。

我们可以通过 ?. 运算符来访问数组元素：

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

如果 array 不存在或者长度小于等于 index，则访问会返回 undefined。

例如，如果我们有一个数组可能为空，我们需要获取其第二个元素，那么以前的写法可能是这样的：

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

而使用可选链运算符，我们可以直接写成：

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

我们可以使用 ?. 运算符来安全地调用对象方法，例如：

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

如果 object 不存在，则方法调用会立即返回 undefined。

例如，我们现在有这样一个对象：

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

如果我们要执行 obj 对象的 foo 方法，以前的写法可能是这样的：

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

而使用可选链运算符，我们可以直接写成：

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

注意这里的 ?.()，后面的小括号是必须的。

如果我们要访问某个对象的嵌套属性，以前的写法可能是这样的：

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

每一级属性都需要进行一次检查，非常复杂，而使用可选链运算符，可以将其简写为：

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

如果其中任何一级属性不存在，访问都会返回 undefined。

可选链运算符是 ECMAScript 2020 中非常实用的一个特性，可以帮助我们更加方便地访问嵌套对象属性或方法，避免因为某个属性不存在而导致的错误。它的语法简单，应用广泛，建议开发者尽早掌握并使用。