在前端开发中，我们经常需要处理嵌套的对象或数组。在 JavaScript 中，访问这些嵌套的属性或元素可能会出现空值或 undefined 的情况，这时候就需要进行判断。ES12 中引入了 Optional Chaining 语法，可以方便地处理这种情况，本文将详细介绍这一语法的用法和注意事项。
Optional Chaining 的介绍
Optional Chaining 是一种新的语法，用于访问嵌套对象或数组中的属性或元素，当访问的属性或元素不存在时，不会抛出异常，而是返回 undefined。它通过使用问号 ? 来标记可选的属性或元素，简化了代码的书写。
Optional Chaining 的用法
Optional Chaining 可以用于访问对象或数组的属性或元素，下面是几个示例：
访问对象的属性
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- -----------
------- -------- ------
--
--
-- ----
----- ---- - ------------ - ----------------- - ----------
-- -------- --------
----- ---- - -------------------访问数组的元素
const numbers = [1, 2, 3]; // 传统写法 const third = numbers.length > 2 ? numbers[2] : undefined; // Optional Chaining const third = numbers?.[2];
访问函数的返回值
-- -------------------- ---- -------
-------- ----------- -
-- --- --- -- -
------ -
----- --------
---- ---
--
- ---- -
------ ----------
-
-
-- ----
----- ---- - ---------- - --------------- - ----------
-- -------- --------
----- ---- - -----------------Optional Chaining 的注意事项
使用 Optional Chaining 语法时，需要注意以下几点：
1. 可选属性或元素必须在问号 ? 的左侧
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- -----------
------- -------- ------
--
--
----- ---- - ------------------- -- --
----- ---- - ------------------- -- --------2. Optional Chaining 只能用于访问属性或元素，不能用于调用函数
const user = {
name: 'Alice',
sayHello() {
console.log(`Hello, ${this.name}!`);
},
};
user.sayHello?.(); // 错误，会抛出异常3. Optional Chaining 可以与 nullish 合并运算符 ?? 一起使用
nullish 合并运算符 ?? 用于判断一个值是否为 null 或 undefined，如果是，则返回默认值。与 Optional Chaining 一起使用可以进一步简化代码。
-- -------------------- ---- ------- ----- ---- - - ----- -------- ---- ----- -- -- ---- ----- --- - -------- --- ---- -- -------- --- --------- - -------- - --- -- -------- -------- - ------- ----- ----- --- - -------- -- ---
总结
Optional Chaining 语法是 ES12 中的一项新特性，可以方便地访问嵌套对象或数组的属性或元素，避免了空值或 undefined 的判断。使用时需要注意可选属性或元素必须在问号 ? 的左侧，不能用于调用函数，可以与 nullish 合并运算符 ?? 一起使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6584fda0d2f5e1655df9d2b9