随着前端技术的不断发展，JavaScript 也在持续地更新与发展，其中 ES11 （也就是 ECMAScript 2020）为我们带来了许多令人期待的新特性，其中就包括可选链 (Optional Chaining) 链式调用。在这篇文章中，我将详细介绍这一特性的用法和相关的注意事项，希望能够为大家提供指导和帮助。
可选链 (Optional Chaining) 的概念
在 JavaScript 中，我们通常会使用“点”（.）和“中括号”（[]）来访问对象中的属性和方法，但是当我们尝试访问一个不存在的属性或方法时，就会出现错误，例如：
const obj = {
foo: {
bar: "baz"
}
};
console.log(obj.foo.bar.baz); // TypeError: Cannot read property 'baz' of undefined在这种情况下，我们可以通过短路表达式（&&）来避免出错，例如：
const obj = {
foo: {
bar: "baz"
}
};
console.log(obj.foo && obj.foo.bar && obj.foo.bar.baz); // undefined这种方式可以通过判断存在性来避免错误，但是代码可读性较差。这时候，ES11 中新增的可选链 (Optional Chaining) 链式调用就可以发挥作用了。
可选链 (Optional Chaining) 链式调用主要是通过添加 ?. 操作符来避免出现取值出错的问题，例如：
const obj = {
foo: {
bar: "baz"
}
};
console.log(obj.foo?.bar?.baz); // undefined在这个例子中，我们使用可选链 (Optional Chaining) 链式调用来访问 obj 对象中的 foo 属性和 bar 属性，我们不必担心访问不存在的 baz 属性会出现错误，如果这个属性不存在，就会返回 undefined。
需要注意的是，可选链 (Optional Chaining) 链式调用也可以用于函数调用，例如：
-- -------------------- ---- -------
----- --- - -
---- -
----- -
-------------------
-
-
--
----------------- -- -----在这个例子中，我们使用可选链 (Optional Chaining) 链式调用来调用 obj 对象中的 foo 属性中的 bar 方法，同样可以避免出现错误，如果这个方法不存在，就不会调用它。
可选链 (Optional Chaining) 的使用
在使用可选链 (Optional Chaining) 链式调用时，需要注意以下几点：
1. 操作符的位置
可选链 (Optional Chaining) 链式调用的操作符 ?. 应该放在点（.）和中括号（[]）操作符之后，例如：
const obj = {
foo: {
bar: "baz"
}
};
console.log(obj?.foo?.bar); // "baz"
console.log(obj?.["foo"]?.["bar"]); // "baz"2. 多层级的访问
可选链 (Optional Chaining) 链式调用也可以应用于多层级的访问，例如：
-- -------------------- ---- -------
----- --- - -
---- -
---- -
---- -----
-
-
--
------------------------------ -- -----
-------------------------------- -- -----在这个例子中，我们使用可选链 (Optional Chaining) 链式调用来访问 obj 对象中的 foo 属性、bar 属性、和 baz 属性，如果这些属性不存在，就会返回 undefined。
3. 函数调用
在使用可选链 (Optional Chaining) 链式调用调用函数时，需要注意如果这个函数需要传递参数，() 括号需要添加在可选链 (Optional Chaining) 链式调用的最后，例如：
-- -------------------- ---- -------
----- --- - -
---- -
---------- -
-------------------
-
-
--
-------------------- -- -----4. 设置默认值
可选链 (Optional Chaining) 链式调用也可以结合 nullish 合并运算符（??）来设置默认值，例如：
-- -------------------- ---- -------
----- --- - -
---- -
---- ---------
-
--
----- ------ - ------------- -- -------- -------
-------------------- -- -------- ------在这个例子中，我们使用 ?? 运算符来设置默认值，如果 obj.foo.bar 为 undefined 或者不存在，就会使用默认值。
总结
可选链 (Optional Chaining) 链式调用是 ES11 中的一个强大的特性，在处理对象中属性和方法的访问时非常实用，能够避免代码中因为属性和方法的不存在引起的错误。在使用时需要注意操作符的位置、多层级的访问、函数调用以及设置默认值等细节问题。我相信这篇文章能够帮助大家更好地理解可选链 (Optional Chaining) 链式调用，也能够为大家在日常编写代码时提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e01d71f6b2d6eab3b37910