在前端开发中，我们经常会遇到需要在多个操作中进行链式调用的情况。尽管在 ES6 中引入了箭头函数和展开操作符等语法糖，但在处理多个操作时，链式调用依然需要我们手动书写一大堆函数调用。ES11 (也称 ES2020) 中新增了一种替代链式操作的方法，让我们能够更加便捷地对多个操作进行组合和处理。
可选链操作符
替代链式操作的关键特性，就是可选链操作符（optional chaining）的引入。可选链操作符的作用是，当链中某个属性或方法不存在时，直接返回 undefined，而不是报错。
可选链操作符使用问号（?）来表示。例如，我们有一个对象 user，包含了其课程的信息。以往我们通常会使用下面这样的代码来获取 user 的课程名称：
----- ---------- - ---- -- ----------- -- -----------------
在 ES11 中，我们可以使用可选链操作符来替代上面的代码：
----- ---------- - -------------------
如果 user 的 course 属性不存在，courseName 将会直接被赋值为 undefined。这样就省去了我们不断判断属性是否存在的繁琐代码。
空值合并操作符
除了可选链操作符，ES11 中还新增了另一种替代链式操作的方法：空值合并操作符（Nullish coalescing operator），也称空值合并运算符。空值合并操作符的作用是在获取值时，当左侧的值为 null 或 undefined 时，使用右侧的值作为默认值。
空值合并操作符使用两个竖线（||）来表示。以往我们需要使用短路运算符 || 来获取一个变量或对象属性的值。但是这种运算符存在一个陷阱，因为它会将所有 falsy 的值都视为不存在。这意味着，如果我们希望获取的是 0 或空字符串这样的 falsy 值，那么在使用 || 运算时就会出问题。
例如，我们有一个变量 count，需要获取它的值或默认值：
----- ------ - ----- -- --
如果 count 的值为 0，此时使用 || 运算得到的结果仍然是 0，而不是我们希望的默认值。此时，就可以使用空值合并操作符来避免这个问题：
----- ------ - ----- -- --
空值合并运算符只有在左侧的值为 null 或 undefined 时，才会返回右侧的默认值。这样，我们就可以放心地使用空值合并运算符来获取变量的默认值了。
示例代码
下面的代码演示了如何使用可选链和空值合并操作符来获取用户的耳机型号和默认值：
----- ---- - -
-------- -
------- -
---------- -
------ -------
------ ------------
-
-
-
-
----- --------- - -------------------------------- -- --------- - - ------ ------- ------ ------------ -
----- ----- - -------------------------------------- -- ------------- -- ----- - ------------其中，headphone 可以获取到用户的耳机型号，而 model 则是它的型号。如果用户的型号不存在，则会返回默认值 WH-1000XM3。
总结
ES11 中的可选链操作符和空值合并操作符，提供了一种更加便捷高效的链式操作方法。通过使用这些操作符，我们可以更好地组合和处理多个操作，避免繁琐的判断和处理，提高代码的可读性和可维护性。同时，在使用可选链和空值合并操作时，也需要注意避免潜在的问题出现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6451ffb5675af4061b5b38d2