在前端开发中，我们经常会遇到处理嵌套对象的情况，例如从后端返回的 JSON 对象。对于这样的对象，我们通常需要使用 if 语句或者三元表达式来进行判断，以避免出现 undefined 或者 null 的错误。
然而，这种方式在代码中经常会出现大量的 if 判断语句或者链式操作，不仅代码复杂度高，而且容易出错。好在在 ES11 中，新增了一种 optional chaining 语法，可以帮助我们简化代码、提高可读性。
optional chaining 简介
optional chaining 可以用来简化对象属性的访问操作。它通过在属性名后面加一个问号（?）来表示，如果属性不存在或者为 null 或者 undefined，就不会访问这个属性。
比如下面的代码：
-- -------------------- ---- -------
----- -------- - -
----- --------
-------- -
------ -------------------
-
--
-- --------- -- ---------------- -- ----------------------- -
------------------------------------
-我们需要对 userInfo、userInfo.contact 和 userInfo.contact.email 分别进行有效性判断，非常繁琐。使用 optional chaining 语法，我们可以简化成如下代码：
console.log(userInfo?.contact?.email);
以上代码中，使用了 ?. 这个符号表示，如果 contact 或 email 为空，就不会执行后续操作了。如果存在，就会正常访问并输出 email。
optional chaining 与 nullish coalescing 运算符结合使用
有时候我们需要在属性为空的时候，给出默认值。在 ES11 中，新增了一个 nullish coalescing 运算符，也可以用来处理这种情况。它表示如果左侧的值为 null 或 undefined，就会返回右侧的值。
结合 optional chaining，可以实现非常简单的判断和赋值操作。比如下面的例子：
-- -------------------- ---- -------
----- -------- - -
----- --------
-------- -
------ ----
-
--
----- ----- - ------------------------ -- ---------
------------------- -- ------------以上代码中，如果 email 为空，就会输出未知，否则输出 email 的值。
可选链的使用场景
可选链语法可以用在任何可以为空的操作上，包括函数、对象、数组等等。
对象
在处理嵌套对象的时候，可以使用 optional chaining 简化代码，提高可读性。
const user = {
name: 'Alice',
contact: {
email: 'alice@example.com'
}
};
const email = user?.contact?.email;数组
在处理数组的时候，如果数组为空或者没有指定下标，可以使用 optional chaining 来判断。
const arr = [1, 2, 3]; console.log(arr[3]?.prop); // 不会报错，返回 undefined
函数
在调用函数时，如果函数不存在，可以使用 optional chaining 判断。
const func = obj?.fn();
总结
ES11 的可选链语法可以帮助我们简化代码，提高可读性。它可以用在任何可以为空的操作上，包括对象、数组、函数等等。在使用的时候，需要注意语法的正确使用和运算符的优先级，以避免出现错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65936ba0eb4cecbf2d81ee2a