ES10（ECMAScript 2019）是 JavaScript 的最新版本，它带来了很多新的特性和语法糖，其中包括一个非常实用的特性——可选成员链（optional chaining）。在本文中，我们将深入了解这个新特性，它的用法和一些实际示例，帮助你更好地理解和使用它。
可选成员链是什么？
可选成员链是一种新的语法糖，它让我们可以更方便地访问深层嵌套的对象，而不需要显式地检查每个属性是否存在。这个特性是通过 ?. 运算符来实现的，它可以在访问对象的属性或方法时，自动判断该属性或方法是否存在，如果存在则返回其值，否则返回 undefined。
下面是一个简单的示例，展示了可选成员链的基本用法：
-- -------------------- ---- -------
----- --- - -
---- -
---- -
---- ------ ------
-
-
--
-------------------------------- -- -------- -----
-------------------------------- -- ------------在上面的代码中，我们使用了可选成员链来访问 obj 对象的 foo、bar 和 baz 属性，如果这些属性不存在，它们会返回 undefined。
如何使用可选成员链？
在实际开发中，可选成员链可以用于访问任何类型的对象，包括数组、函数、类等。下面是一些示例，展示了可选成员链的常见用法：
访问数组元素
const arr = [1, 2, 3]; console.log(arr?.[0]); // 输出：1 console.log(arr?.[3]); // 输出：undefined
在上面的代码中，我们使用可选成员链来访问数组 arr 的第一个元素和第四个元素，如果第四个元素不存在，它会返回 undefined。
调用函数
const obj = {
foo: function () {
console.log('Hello World');
}
};
obj?.foo?.(); // 输出：Hello World
obj?.bar?.(); // 没有输出在上面的代码中，我们使用可选成员链来调用 obj 对象的 foo 方法和 bar 方法，如果 bar 方法不存在，它不会产生任何输出。
访问类成员
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
-
----- ------ - --- --------------
-------------------------- -- ------
------------------------- -- ------------在上面的代码中，我们使用可选成员链来访问 person 对象的 name 属性和 age 属性，如果 age 属性不存在，它会返回 undefined。
可选成员链的优势
可选成员链的最大优势在于，它可以让我们更方便地访问深层嵌套的对象，而不需要显式地检查每个属性是否存在。这样可以大大简化代码，减少错误和冗余。
例如，考虑下面的代码：
if (obj && obj.foo && obj.foo.bar && obj.foo.bar.baz) {
console.log(obj.foo.bar.baz);
}这段代码用于访问对象 obj 的 foo、bar 和 baz 属性，如果有任何一个属性不存在，它就会导致错误。而使用可选成员链，我们可以将上面的代码简化为：
console.log(obj?.foo?.bar?.baz);
这段代码更简洁、更易读，而且不需要额外的检查和处理。
可选成员链的注意事项
虽然可选成员链非常实用，但在使用时也需要注意一些细节。下面是一些需要注意的事项：
- 可选成员链只能用于访问对象的属性或方法，不能用于访问变量或函数等。
- 可选成员链只能在 JavaScript 的严格模式下使用，否则会导致语法错误。
- 可选成员链的运算符
?.优先级较低，如果与其他运算符混合使用，需要使用小括号明确优先级。
结论
可选成员链是 JavaScript 的一个非常实用的特性，它可以让我们更方便地访问深层嵌套的对象，减少冗余和错误。在实际开发中，我们可以根据需要使用可选成员链来访问任何类型的对象，包括数组、函数、类等。但在使用时也需要注意一些细节，避免产生语法错误和逻辑错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675baa7fa4d13391d8f6727f