ECMAScript 2020 (ES11) 之 optional chaining 式联合运算符的详解与使用-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 (ES11) 中，optional chaining 式联合运算符是一项新的特性。该特性可以让开发者在处理对象属性或数组元素时，避免出现 undefined 或 null 引用错误。本文将详细介绍 optional chaining 运算符的使用方法和注意事项。

optional chaining 运算符的语法

optional chaining 运算符的语法是 ?.，它可以用在对象属性或数组元素访问的末尾，表示如果该属性或元素存在，则进行访问，否则返回 undefined。

例如，假设我们有一个对象 person，它有一个 address 属性，address 属性又有一个 city 属性：

const person = {
  name: 'Alice',
  address: {
    city: 'Shanghai'
  }
};

我们可以使用 optional chaining 运算符来访问 person 对象的 address 属性和 city 属性：

const city = person?.address?.city;
console.log(city); // 'Shanghai'

如果 person 对象没有 address 属性，或者 address 对象没有 city 属性，那么 city 变量将会是 undefined。

optional chaining 运算符的使用场景

在对象属性访问中使用

在对象属性访问中，optional chaining 运算符可以避免出现 undefined 或 null 引用错误。例如：

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

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

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

如果 person 对象没有 address 属性，或者 address 对象没有 city 属性，普通写法会抛出 TypeError 错误，而 optional chaining 写法会返回 undefined。

在数组元素访问中使用

在数组元素访问中，optional chaining 运算符可以避免出现 undefined 或 null 引用错误。例如：

const arr = [1, 2, 3];

// 普通写法
const third = arr[2] && arr[2].toFixed(2);

// optional chaining 写法
const third = arr?.[2]?.toFixed(2);

如果 arr 数组没有第三个元素，或者第三个元素不是数字类型的，普通写法会抛出 TypeError 错误，而 optional chaining 写法会返回 undefined。

在函数调用中使用

在函数调用中，optional chaining 运算符可以避免出现 undefined 或 null 引用错误。例如：

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

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

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

如果 person 对象没有 address 属性，或者 address 对象没有 getCity 方法，普通写法会抛出 TypeError 错误，而 optional chaining 写法会返回 undefined。

注意事项

不能用于赋值操作

optional chaining 运算符只能用于访问对象属性或数组元素，不能用于赋值操作。例如：

const person = {
  name: 'Alice',
  address: {
    city: 'Shanghai'
  }
};

person?.address?.city = 'Beijing'; // TypeError: Cannot set property 'city' of undefined

如果我们想要修改 person 对象的 city 属性，可以使用普通写法：

if (person && person.address) {
  person.address.city = 'Beijing';
}

不能用于函数的调用参数

optional chaining 运算符不能用于函数的调用参数，因为函数调用参数必须是一个值。例如：

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

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

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

不能与 delete 运算符一起使用

optional chaining 运算符不能与 delete 运算符一起使用，因为 delete 运算符需要一个左值表达式，而 optional chaining 运算符的结果可能是 undefined。例如：

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

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

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

示例代码

下面是一个使用 optional chaining 运算符的示例代码：

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

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

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

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

总结

optional chaining 运算符是 ECMAScript 2020 (ES11) 中的一项新特性，可以避免在对象属性或数组元素访问时出现 undefined 或 null 引用错误。在使用 optional chaining 运算符时需要注意不能用于赋值操作、函数的调用参数和 delete 运算符，需要特别注意代码的兼容性。

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