ES11 是 ECMAScript 2020 的缩写，它引入了许多新的功能和语言特性，其中一个非常实用的特性就是可选链表达式（Optional Chaining）。
什么是可选链表达式？
在 JavaScript 开发中，经常需要处理多个对象的嵌套，例如：
-- -------------------- ---- -------
----- ---- - -
----- -------
---- ---
-------- -
----- ----------
------- -------- ------
----------- --------
-
--
----- ---------- - ------------------------ -- --------这段代码中，我们需要获取 user 对象的 address 属性的 postalCode 属性值。但是如果 user 对象的 address 属性为空或不存在，就会抛出错误。因此，我们需要使用判断语句来避免这种情况：
const postalCode = user.address ? user.address.postalCode : undefined;
这种写法虽然能解决问题，但是代码看起来比较冗长。可选链表达式提供了一种更加简洁的写法：
const postalCode = user.address?.postalCode;
这段代码中，如果 user.address 不存在或为空，则直接返回 undefined。
可选链表达式的语法
可选链表达式使用问号（?）来表示。如果问号左边的属性或方法存在，则继续访问问号右边的属性或方法，否则直接返回 undefined。
object?.property object?.method() object?.[property]
可选链表达式与点号（.）和方括号（[]）一起使用。
const postalCode1 = user.address?.postalCode; const postalCode2 = user['address']?.['postalCode'];
可选链表达式的意义
可选链表达式的引入是为了解决 JavaScript 中的繁琐的多层嵌套访问问题。使用可选链表达式，可以大大简化代码，提高可读性，并且减少代码中的语法错误。
可选链表达式的应用场景
- 访问对象中的属性
-- -------------------- ---- -------
----- ---- - -
----- -------
---- ---
-------- -
----- ----------
------- -------- ------
----------- --------
-
--
----- ---------- - -------------------------- 调用对象中的方法
const obj = {
foo() {
console.log('foo');
}
};
obj.foo?.();- 访问数组中的元素
const arr = [1, 2, 3]; const element = arr[1]?.[2];
使用可选链表达式的注意事项
必须在 JavaScript 引擎支持的情况下使用。可以使用 Babel 或 TypeScript 等工具进行转换。
必须在对象或数组后面使用问号（
?）。多个问号（
?）不能连续使用，必须在属性或方法的末尾使用。不支持在模板字符串或动态计算属性中使用。
可选链表达式的兼容性
可选链表达式是 ES11 引入的新语法，目前主流浏览器都已经支持。但是，一些老版本浏览器并不支持可选链表达式，如果需要在这些老版本浏览器中使用可选链表达式，需要使用 Babel 或 TypeScript 等工具进行转换。
总结
本文介绍了 ES11 引入的可选链表达式。可选链表达式可以大大简化代码，提高可读性，并且减少代码中的语法错误。需要注意的是，必须在 JavaScript 引擎支持的情况下使用，多个问号（?）不能连续使用，不支持在模板字符串或动态计算属性中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bae7f48841e98949f99aa