在前端开发中，经常会遇到需要对嵌套的对象或数组进行取值操作的情况，不过我们也会遇到这样的问题，就是在对象或数组中有层级缺失的情况下，使用传统的取值方法会导致代码报错或出现异常情况。为了解决这个问题，ECMAScript 2021 提供了一种新的特性：链判断 Optional chaining。
本文将详细介绍 ECMAScript 2021 新特性之链判断 Optional chaining，帮助读者更好地了解该特性的应用场景、使用方法以及注意事项，并提供相关的示例代码供读者参考。
链判断 Optional chaining 的作用
在介绍链判断 Optional chaining 的原理之前，我们先来看一下该特性的具体使用场景。
在 JavaScript 中，我们经常需要对对象或数组进行层级取值，例如以下代码：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- -
----- -----------
------- -------- -----
-
--
----- ---- - --------------------在上面的代码中，我们需要获取 person 对象中 address 对象中的 city 属性的值，于是我们可以使用 . 运算符来取值。这时我们可以得到正确的结果：
console.log(city); // 'Shanghai'
但是，如果我们要取值的属性不是一定存在于对象中的，例如以下代码：
const person = {
name: 'Alice',
age: 20
};
const city = person.address.city;由于 person 对象中没有 address 属性，所以上述代码会出现以下错误：
Uncaught TypeError: Cannot read property 'city' of undefined
我们可以增加一些条件判断来避免这类错误的发生：
const person = {
name: 'Alice',
age: 20
};
const city = person.address ? person.address.city : undefined;在这里，我们增加了对 address 属性的判断，如果其存在，再继续取其内部的 city 属性。这时我们可以得到正确的结果 undefined。
虽然增加了条件判断可以避免代码出错，但是在我们需要获取多个嵌套属性的情况下，这样的代码实在是过于冗长和麻烦，而且也很难维护。所以，ECMAScript 2021 提供了一种新的特性：链判断 Optional chaining，可以解决这一问题。
链判断 Optional chaining 的使用方法
现在，让我们来看一下链判断 Optional chaining 的具体使用方法。
在使用链判断 Optional chaining 时，我们先用 ?. 运算符来代替 . 运算符，例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- -
----- -----------
------- -------- -----
-
--
----- ---- - ---------------------在这里，我们使用了 ?. 运算符来代替 . 运算符，表示我们只希望在 person 对象中存在 address 属性的情况下，再去取其内部的 city 属性。这里最后取到的值是 'Shanghai'。
如果我们要取值的属性不存在，那么该属性链中的值就会返回 undefined，例如以下代码：
const person = {
name: 'Alice',
age: 20
};
const city = person.address?.city;
console.log(city); // undefined在这里，由于 person 对象中不存在 address 属性，所以链判断 Optional chaining 返回 undefined，city 的值也是 undefined。
除了 ?. 运算符以外，链判断 Optional chaining 还可以与其他运算符一起使用，例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- --
--
----- ---- - -------------- -- --------------------
------------------ -- ---------
----- ------- - -
----- ------
---- ---
-------- -
----- ---------
-
--
----- ----- - -----------------------
------------------- -- ---------在第一个示例代码中，我们用 && 运算符来判断 address 属性是否存在，再去取其内部的 city 属性，这里最后的值是 undefined。
在第二个示例代码中，我们与 ?. 运算符一起使用，可以更好地解决对象的层级关系，例如在取值时我们既不知道 person2 对象是否存在 address 属性，也不知道 address 对象是否存在 city 属性，而使用链判断 Optional chaining 就可以让这一过程变得更加简单。
链判断 Optional chaining 的注意事项
在使用链判断 Optional chaining 时，需要格外注意以下事项：
- ?. 运算符必须放在属性访问的最后面。
- 链判断 Optional chaining 可以嵌套。
- 在使用链判断 Optional chaining 时，主要目的是为了避免属性不存在而导致代码出错，而不是为了将 undefined 转成 null。
链判断 Optional chaining 的兼容性
由于链判断 Optional chaining 是 ECMAScript 2021 新特性，所以并不是所有的浏览器都支持该特性。根据 Can I Use 网站的数据，截至 2021 年 9 月，链判断 Optional chaining 的兼容性如下：
可以看到，虽然大部分主流浏览器都已经支持链判断 Optional chaining，但是仍然有部分浏览器不兼容该特性，如果需要在项目中使用该特性，需要提前进行兼容性处理。
链判断 Optional chaining 的示例代码
最后，我们提供以下一些示例代码来帮助读者更好地理解链判断 Optional chaining 的使用方法和效果：
-- -------------------- ---- -------
----- ---- - -
----- ------
---- ---
-------- -
----- ----------
-
--
-- -- ---- --- ---- ----
----- ----- - -------------------
------------------- -- ----------
-- -- ---- --- ------ ----
----- ------ - ---------------------
-------------------- -- ---------
-- ----------- ------- --
----- ----- - -
----- -------
---- --
--
-- -- ----- --- ---- --------- ---------
----- ----- - --------------------
------------------- -- ---------
-- -----
----- ------ - -
----- -------
------ --
--------- -
-
----- -------
---- ---
------- -
-------- ---
----- --
-
-
-
--
-- -- ------ --- -------- --------- ------ --- ---- ----
----- --------- - -----------------------------------
----------------------- -- --
-- -- ------ --- -------- --------- ------ --- ---- ----
----- ---------- - -----------------------------------
------------------------ -- ---------总结
本文详细介绍了 ECMAScript 2021 新特性之链判断 Optional chaining 的作用、使用方法以及注意事项，并提供相关示例代码供读者参考。虽然链判断 Optional chaining 看似简单，但是在实际开发中却可以提高代码的可读性和可维护性，帮助开发者更好地处理嵌套属性不存在的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646aec86968c7c53b0a62293