ES12（也称为 ES2021）中新增了Nullish coalescing operator（??），是一个非常实用的语言特性。本文将详细阐述Nullish coalescing operator的含义、用法以及其在前端开发中的指导意义，并提供示例代码。
什么是 Nullish coalescing operator？
Nullish coalescing operator（??）是一种用于处理null或undefined值的运算符。其作用是在左侧操作数为 null 或 undefined 时，返回右侧的默认值。而如果左侧操作数为非null或undefined值，则返回左侧操作数自身的值。这与传统的逻辑运算符（如||）是不同的。
具体的语法格式为：
const result = leftSideOperand ?? rightSideOperand;
其中，左侧操作数是一个任意类型的值，而右侧操作数是一个默认值（可以是任意类型的值）。
Nullish coalescing operator 的用法
Nullish coalescing operator通常用于设置默认值。例如，在处理从服务器返回的JSON数据时，我们可能会遇到以下情形：
-- -------------------- ---- ------- ----- ---- - - ----- ----- ---- ----- -------- -------- -- ----- ------ - - ----- ---------- ---- -------- -- --- -------- ------------ -- -------------------- -- --------- ----- ---- --- -------- ---------展开代码
在上述代码中，我们试图从data对象中提取姓名、年龄和地址信息，并使用这些信息创建一个新对象person。由于数据不一定是完整的，因此我们为age属性设置了一个默认值18。然而，当年龄数据为0或false等值时，逻辑运算符（||）仍然会返回默认值，这可能不是我们想要的结果。
为了解决这个问题，我们可以使用Nullish coalescing operator，对上述代码进行改进：
-- -------------------- ---- ------- ----- ---- - - ----- ----- ---- ----- -------- -------- -- ----- ------ - - ----- ---------- ---- -------- -- --- -------- ------------ -- -------------------- -- --------- ----- ---- --- -------- ---------展开代码
在这个例子中，我们使用了Nullish coalescing operator（??），并提供了默认值18。当data.age的值为null或undefined时，该运算符返回默认值18。
Nullish coalescing operator 的指导意义
Nullish coalescing operator可提高前端开发中的代码可读性和可维护性。它可以使代码更加简洁，同时避免因逻辑运算符（||）带来的不必要的错误。
当然，Nullish coalescing operator并不是完美的。如果你需要在任意falsy值（如0、false、''等）上提供默认值，你仍然需要使用逻辑运算符（||）。然而，在处理null或undefined值时，Nullish coalescing operator是更好的选择。
示例代码
以下是一个例子，展示了如何在React函数组件中使用Nullish coalescing operator：
import React from 'react'; function Greeting(props) { const name = props.name ?? 'guest'; return <h1>Hello, {name}!</h1>; } export default Greeting;
在这个例子中，我们定义了一个React函数组件Greeting，并将props.name作为输入参数。使用Nullish coalescing operator，在props.name为null或undefined时，我们为其提供了一个默认值'guest'，并将其传入到返回的h1元素中。
这样，我们的组件就不再需要为null或undefined值处理单独的条件分支，使其变得更加简洁和易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b721ce306f20b3a63cf90c
