在前端开发中，经常会遇到需要访问对象深层次属性的情况。如果对象属性的值为 null 或 undefined，那么访问该属性时就会出现错误。为了解决这个问题，ECMAScript 2021引入了可选链式操作符（Optional Chaining Operator），也称为问号操作符（?）。
可选链式操作符的语法
可选链式操作符是一个问号（?）后面跟着一个点（.）或方括号（[]）。
使用点（.）操作符
obj?.prop obj?.method()
上面的代码中，如果 obj 为 null 或 undefined，那么访问 prop 或 method 时就会返回 undefined，而不是抛出错误。
使用方括号（[]）操作符
obj?.[expr]
上面的代码中，如果 obj 为 null 或 undefined，那么访问 expr 属性时就会返回 undefined，而不是抛出错误。
可选链式操作符的应用
访问对象深层次属性
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
------- ---- ---- ----
----- -----------
------ -----
---- -------
-
--
-- ----
------------------------ -- ---------------------
-- ---------
-----------------------------------上面的代码中，如果 user.address 为 null 或 undefined，那么访问 street 时就会返回 undefined，而不是抛出错误。
调用对象深层次方法
-- -------------------- ---- -------
----- ---- - -
----- --------
----------- ---------- -
------ -
------- ---- ---- ----
----- -----------
------ -----
---- -------
--
-
--
-- ----
--------------------------- -- --------------------------
-- ---------
----------------------------------------上面的代码中，如果 user.getAddress() 返回 null 或 undefined，那么访问 street 时就会返回 undefined，而不是抛出错误。
遍历数组
-- -------------------- ---- -------
----- ----- - -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
-----
- ----- ---------- ---- -- -
--
-- ----
--- ---- - - -- - - ------------- ---- -
-- --------- -- -------------- -
---------------------------
-
-
-- ---------
--- ---- ---- -- ------ -
------------------------
-上面的代码中，如果 users[i] 为 null 或 undefined，那么访问 name 时就会返回 undefined，而不是抛出错误。
可选链式操作符的注意事项
不支持在赋值语句中使用
obj?.prop = value; // 报错
上面的代码中，可选链式操作符不能用于赋值语句中。
不支持在函数调用中使用
obj?.method(); // 报错
上面的代码中，可选链式操作符不能用于函数调用中。
不支持在运算符中使用
obj?.prop + 1; // 报错
上面的代码中，可选链式操作符不能用于运算符中。
可选链式操作符的兼容性
可选链式操作符是 ECMAScript 2021 的新特性，目前还没有被所有浏览器完全支持。但是，我们可以使用 Babel 等工具将代码转换为 ES5 或 ES6 代码以实现兼容性。
结论
可选链式操作符是一个非常实用的特性，它可以使我们的代码更加简洁、优雅、健壮。在开发过程中，我们应该尽可能地使用可选链式操作符来访问对象的深层次属性或方法，以避免出现错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6755604c3af3f99efe4b3270