在日常开发中，我们经常会遇到需要判断某个对象或属性是否存在的场景。针对这种情况，JavaScript 中提供了多种处理方式，比如短路运算符（&&）、三元运算符、if-else 等等，然而这些处理方式都存在一些弊端，比如代码不够简洁、易读性差等等。ES11 新增了 Optional Chaining 特性，可以让我们更优雅地处理这类判空操作。
Optional Chaining 是什么？
Optional Chaining 翻译过来即“可选链”，它是一项新增的特性，通过 ?. 这个语法糖来实现，让我们在访问对象属性时，能够优雅地避免非空判断，其基本语法形式如下：
obj?.prop //obj.prop 如果 obj 存在 obj?.[expr] //obj[expr] 如果 obj 存在 arr?.[index] //arr[index] 如果 arr 存在 func?.(args) //如果 func 存在，则调用该函数
这里的 ?. 就相当于传统判断中的 ?，只不过 ?. 不仅可以判断对象是否存在，还能判断对象属性是否存在。Optional Chaining 的存在，可以让我们更加优雅地处理一些繁琐的非空判断，提高代码的可读性。
Optional Chaining 实际应用场景
Optional Chaining 可以在很多场景下使用，下面举几个例子：
1. 保证属性值正确返回
const obj = { name: 'Lily', age: 18 };
const name = obj?.name; // 'Lily'
const gender = obj?.gender; // undefined在这个例子中，我们使用 Optional Chaining 确保了 obj 对象是否存在。当 obj 存在时，我们通过 obj?.name 的形式来获取 name 属性值，如果 name 属性不存在，则返回 undefined。
2. 保证方法存在时才调用
const person = { name: 'Lily', sayHi() { console.log(`Hi, I am ${this.name}.`);} };
person.sayHi?.(); // Hi, I am Lily.在这个例子中，我们使用 Optional Chaining 保证了 person.sayHi 是否存在。当 person.sayHi 存在时，我们才会执行 sayHi 方法。
3. 多层级对象属性访问
-- -------------------- ---- -------
----- --- - -
----- -------
---- ---
-------- -
----- ----------
--------- ---------
-
--
----- ---- - ------------------- -- ---------
----- -------- - ----------------------- -- ---------在这个例子中，我们使用 Optional Chaining 保证了多层级对象属性是否存在。当 obj.address.city 存在时，我们才会获取 city 属性值，否则返回 undefined。
Optional Chaining 注意事项
- Optional Chaining 只能在 ES11 或更高版本中使用，如果需要使用，请保证项目环境支持 ES11 或更高版本。
- 在
.catch()中使用 Optional Chaining 时，可以抛出错误，但这只会是语法错误。 - 尽量不要在赋值、函数定义等操作中使用 Optional Chaining，这样会使代码更加难以理解。
- 在 NPM 中，不应该在 package.json 中使用 Optional Chaining 语法。
- 如果 Optional Chaining 运算符定义了 getter 方法，会返回该方法的值，而不是 undefined。
Optional Chaining 实战示例
下面，让我们通过一个实战示例，来演示如何使用 Optional Chaining 处理判空操作。
-- -------------------- ---- -------
----- --------- - ----- -- -- -
--- -
----- --- - ----- ----------------------------------- -- -------- ---- ----
----- ---- - ----- -----------
----- ---- - ---------------------
----- --- - --------------------
------------------------------------
- ----- ------- -
-------------------
-
--
------------在上述示例中，使用 Optional Chaining 处理了 data、userInfo、name、age 属性是否存在的情况。当所有属性都存在时，我们才会输出 姓名：**，年龄：**。
总结
在开发中，针对对象或属性是否存在的判断这一块会涉及到大量冗余的代码，此时使用 Optional Chaining 就能实现简洁优雅的代码处理，同时有效避免判断代码的冗余。如果你还没有使用 Optional Chaining 这一新特性，那么不妨尝试一下吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e49354f6b2d6eab3009c3b