在前端开发中，流程控制是非常重要的一部分。然而，处理流程控制时经常会遇到一些不可避免的问题，例如：在处理嵌套对象时，如果访问到的属性不存在，就会出现 undefined 的情况，而这种情况往往会导致代码出现错误。为了解决这个问题，ECMAScript 11（ES11）引入了一个新的特性：Optional Chaining。
Optional Chaining 是什么?
Optional Chaining 是一个新的语法，可以让我们在访问一个对象的属性时，不必担心这个属性是否存在。如果这个属性不存在，Optional Chaining 会返回 undefined，而不是抛出错误。
这个特性的语法非常简单，就是在访问属性的时候，在属性名后面加上一个问号 ?。例如：
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- -----------
------- -------- -----
-
--
----- ---- - ------------------- -- ----------
----- ------- - ---------------------- -- ---------在上面的代码中，我们使用了 Optional Chaining 来访问 user.address.city 和 user.address.country。由于 user.address 存在，所以访问 user.address.city 返回了 Shanghai，而由于 user.address.country 不存在，所以访问 user.address.country 返回了 undefined。
Optional Chaining 的应用场景
Optional Chaining 的应用场景非常广泛。下面是一些常见的场景：
1. 处理嵌套对象
在处理嵌套对象时，我们经常需要访问对象的属性。但是，如果属性不存在，就会出现 undefined 的情况，这往往会导致代码出现错误。使用 Optional Chaining 可以避免这个问题。
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- -----------
------- -------- -----
-
--
----- ------- - ---------------------- -- ---------2. 处理函数调用
在调用函数时，我们经常需要判断这个函数是否存在。使用 Optional Chaining 可以避免这个问题。
const obj = {
func: function() {
console.log('Hello World!');
}
};
obj.func?.(); // 'Hello World!'3. 处理数组索引
在访问数组元素时，我们经常需要判断这个元素是否存在。使用 Optional Chaining 可以避免这个问题。
const arr = [1, 2, 3]; const element = arr[3]?.(); // undefined
Optional Chaining 的注意事项
虽然 Optional Chaining 看起来很方便，但是我们需要注意一些事项。
1. Optional Chaining 只能用于对象和数组
Optional Chaining 只能用于对象和数组。如果我们尝试用 Optional Chaining 访问一个非对象和非数组的值，就会抛出错误。
const str = 'Hello World!'; const result = str?.length; // 抛出错误
2. Optional Chaining 不能用于赋值表达式
Optional Chaining 不能用于赋值表达式。如果我们尝试使用 Optional Chaining 进行赋值，就会抛出错误。
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- -----------
------- -------- -----
-
--
------------------ - ---------- -- ----3. Optional Chaining 不会阻止函数的执行
Optional Chaining 不会阻止函数的执行。如果我们使用 Optional Chaining 调用一个不存在的函数，这个函数仍然会被执行。
const obj = {};
obj.func?.(); // 不会抛出错误总结
Optional Chaining 是一个非常实用的特性，可以让我们在处理流程控制时更加方便和安全。然而，我们需要注意一些细节，以免出现错误。在实际开发中，我们可以灵活运用 Optional Chaining，来提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d2d42cadd4f0e0ffb1d707