在现代的前端开发中，数据的读取和处理是非常重要的一环。在 ECMAScript 2020 中，引入了 coalescing 操作符（??）和可选链（?.）来改进数据读取的语法。本文将详细介绍这两个新特性，并提供实用的示例，帮助读者理解和应用它们。
coalescing 操作符的作用和用法
在 ECMAScript 2020 中，coalescing 操作符用于处理 null 或 undefined 值的情况。它的语法是双问号（??），它表示：如果左侧的值是 null 或 undefined，则返回右侧的值。
下面是一个示例：
const foo = null ?? 'hello'; console.log(foo); // 输出 'hello' const bar = undefined ?? 'world'; console.log(bar); // 输出 'world' const baz = 'ok' ?? 'yes'; console.log(baz); // 输出 'ok'
在上面的例子中，foo 和 bar 的值都是右侧的字符串，因为它们的左侧是 null 或 undefined。而 baz 的值则是左侧的字符串，因为它不是 null 或 undefined。
使用 coalescing 操作符可以简洁地处理 null 或 undefined 值的情况，避免了繁琐的判断和处理。但需要注意的是，它只能处理 null 或 undefined 值，不能处理假值，比如 0、''、false 等。
可选链的作用和用法
在 ECMAScript 2020 中，可选链用于避免访问空对象或空数组时出现的 TypeError 错误。它的语法是问号加点（?.），可以用在对象和数组的属性和方法上。
下面是一个示例：
-- -------------------- ---- -------
----- --- - -
---- -
---- -------
-
--
-------------------------- -- -- -------
----- --- - ----- ---- -----
----------------------------------- -- -- ---------在上面的例子中，obj 对象的 foo 属性存在，并且它的 bar 属性也存在，所以输出了对应的字符串。而 arr 数组的索引 3 并不存在，所以输出了 undefined。
使用可选链可以简化代码，避免访问空对象或空数组时出现的错误。需要注意的是，可选链只能处理访问属性和方法的错误，其他类型的错误仍会抛出异常。
coalescing 操作符和可选链的结合应用
coalescing 操作符和可选链可以结合使用，进一步提升数据读取和处理的效率。下面是一个示例：
const data = {
foo: {
bar: {
baz: null
}
}
};
console.log(data.foo?.bar?.baz ?? 'default'); // 输出 'default'在上面的例子中，data 对象的 foo 属性和 bar 属性都存在，但是 baz 属性不存在或值为 null。使用可选链和 coalescing 操作符，先判断属性是否存在或值为 null，如果是则返回默认值 'default'。这样可以简洁地处理多层嵌套的数据读取，避免了繁琐的判断和处理。
总结
coalescing 操作符和可选链是 ECMAScript 2020 中的两个新特性，用于改进数据读取和处理的语法。coalescing 操作符处理 null 或 undefined 值的情况，可选链避免访问空对象或空数组时出现的 TypeError 错误。两者结合使用可以进一步提升数据读取和处理的效率，简化代码，避免繁琐的判断和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eeecb9f6b2d6eab38ebf52