在前端开发中，我们经常会遇到需要访问嵌套对象或数组的情况。但是如果其中某个属性或元素为空，那么访问它的子属性或元素就会出现错误。在过去，我们通常使用 if 判断或三元运算符来检查是否为空，但这种方式会使代码变得冗长且难以维护。在 ECMAScript 2020 中，可选链运算符的出现解决了这个问题。
可选链运算符是什么？
可选链运算符 ?. 是一种简化代码的语法糖，它可以在访问对象或数组的属性或元素时，如果中间某个属性或元素为空，就直接返回 undefined，而不会出现错误。
举个例子，假设我们有以下对象：
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- -----------
------- -------- ------
--------- -
----- ---- ------
------ --
-
-
--如果我们要访问 user 对象的 address 属性下的 building 对象的 floor 属性，可以使用如下代码：
const floor = user.address && user.address.building && user.address.building.floor;
这种写法非常冗长，而且不易读。使用可选链运算符，我们可以将上述代码简化为：
const floor = user.address?.building?.floor;
如果 user 对象的 address 或 building 属性不存在，那么 floor 变量就会被赋值为 undefined，而不会出现错误。
可选链运算符的使用场景
可选链运算符可以用于任何需要访问对象或数组属性或元素的场景，特别是在访问嵌套对象或数组时更为方便。
比如，我们可以使用可选链运算符来访问数组中的元素：
const arr = [1, 2, 3]; const last = arr?.[arr.length - 1];
如果 arr 数组为空，那么 last 变量就会被赋值为 undefined。
可选链运算符还可以用于函数调用：
const obj = {
greet: function() {
console.log('Hello, world!');
}
};
obj.greet?.(); // 输出：Hello, world!如果 obj 对象不存在 greet 函数，那么调用它时不会出现错误。
可选链运算符的注意事项
在使用可选链运算符时，需要注意以下几点：
可选链运算符只能用于 ECMAScript 2020 及以上版本的 JavaScript 中，如果你的项目需要兼容旧版浏览器或 Node.js 环境，就需要使用转译工具（如 Babel）将代码转换为兼容的版本。
可选链运算符只能用于访问对象或数组的属性或元素，不能用于访问普通变量或函数。
可选链运算符不能用于赋值操作，如
user?.address = { city: 'Beijing' }是不合法的。可选链运算符不能与其他运算符混用，如
user?.address || {}是不合法的，应该改为(user?.address || {})。
可选链运算符的示例代码
以下是一个使用可选链运算符的示例代码，它可以从一个嵌套对象中获取指定属性的值：
-- -------------------- ---- -------
-------- ---------------- ----- -
----- ----- - ----------------
--- ----- - ----
--- ---- ---- -- ------ -
----- - --------------
-- ------ --- ---------- -
------
-
-
------ ------
-
----- ---- - -
----- --------
-------- -
----- -----------
------- -------- ------
--------- -
----- ---- ------
------ --
-
-
--
----------------------------- --------- -- --------
----------------------------- ----------------- -- -----------
----------------------------- --------------------------- -- -----
----------------------------- -------------------------------- -- ------------以上代码中，getProperty 函数可以从一个嵌套对象中获取指定属性的值。它使用可选链运算符来访问对象的属性，并使用 undefined 值来标识属性不存在的情况。如果要获取的属性不存在，函数就会返回 undefined。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da3f25a941bf7134216777
