ECMAScript 2021：如何使用 Optional Chaining（可选链）操作符
ECMAScript 2021 引入了一种新的操作符，叫做 Optional Chaining（可选链）操作符。这个操作符让我们更加方便地处理可能为 undefined 或 null 的属性或方法，避免了出现 TypeError 的错误。
在以往的 JavaScript 中，我们需要使用条件语句或者短路运算符来判断一个对象是否存在某个属性或方法，如下所示：
if (obj && obj.prop && obj.prop.method) {
obj.prop.method();
}或者
obj && obj.prop && obj.prop.method && obj.prop.method();
这样的代码看起来非常冗长，而且不太直观。而使用 Optional Chaining 操作符，我们可以更加简洁地实现同样的功能：
obj?.prop?.method?.();
这个操作符的作用就是在访问某个对象的属性或方法时，如果这个对象不存在这个属性或方法，就会返回 undefined，而不会抛出 TypeError 的错误。
下面是一些示例代码，更加详细地说明了如何使用 Optional Chaining 操作符。
- 访问深层次的属性
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
----- ---- ------
------ -----
---- -----
-
--
-- ----
-- ----- -- ------------ -- ------------------ -
------------------------------- -- --- ----
-
-- -------- --------
--------------------------------- -- --- ----
------------------------------------ -- ---------- 调用方法
-- -------------------- ---- -------
----- --- - -
-------- -
------------------- ---------
-
--
-- ----
-- ---- -- ----------- -
-------------
-
-- -------- --------
---------------- -- ------ ------
----- ---------- - -
-------- -
------ -
-------- ------- -------
--
-
--
-- ----
-- ----------- -- ----------------- -- -------------------- -
----------------------------------------- -- ------ ------
-
-- -------- --------
--------------------------------------------- -- ------ ------
----------------------------------------------- -- ---------- 数组中的元素
-- -------------------- ---- ------- ----- --- - --- -- --- -- ---- -- ---- -- ---------- - -- - -------------------- -- - - -- -------- -------- ---------------------- -- - ---------------------- -- ---------
- 函数参数
function foo(obj) {
console.log(obj?.prop);
}
foo(); // undefined
foo({ prop: 'Hello, world!' }); // Hello, world!总结
Optional Chaining 操作符是 ECMAScript 2021 中的一项新特性，它让我们更加方便地处理可能为 undefined 或 null 的属性或方法，避免了出现 TypeError 的错误。使用这个操作符可以让代码更加简洁，可读性更高，同时也可以提高开发效率。如果你正在开发 JavaScript 应用程序，建议尽快掌握这个操作符的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66166eded10417a22265ec03