在 ES11 (2020) 中，新增了一个 nullish 合并运算符（nullish coalescing operator）。 该运算符使用两个问号（??）表示，可以轻松地处理 null 或 undefined 值。
常规运算符和问题
在 JavaScript 中，常规的逻辑运算符有并且（&&）和或者（||）。 但是和这两个运算符搭配使用时会有一些问题。
如果一个变量的值为 falsy 值（如空字符串、null、undefined），使用 || 运算符时，会将变量的值转换为 false，进而使用运算符左边的值。 同样地，如果使用 && 运算符时，变量的值也会被转换为 false。但是，在这种情况下会使用运算符右边的值。
--- - - ----- -- -------- -- ------- --- - - -- -- -------- -- --
对于以上的运算符组合，如果变量的值为 0、空字符串或者空数组时，也同样存在问题。
--- - - - -- --- -- -- --- - - -- -- -------- -- -- --- - - -- -- -------- -- --
以上代码中，0 被转换为 false，因此 a 的值为 10； '' 被转换为 false，因此 b 的值为 ''； [] 被视为 truthy 值，最终变量 c 的值为 []。
nullish 合并运算符的作用
在 ES11 中，为了解决以上问题，引入了 nullish 合并运算符。 nullish 合并运算符只在变量值为 null 或 undefined 时返回右侧的值，其他情况返回左侧的值。
--- - - ---- -- -------- -- ------- --- - - --------- -- -------- -- -------
对于 null 或 undefined 的变量值，无论左侧使用何种运算符，都会返回右侧的值。这样就能够正确地处理空值，避免了上述的问题。
typeof 运算符和 nullish 合并运算符的配合使用
在计算变量值时，需要知道变量的类型。 这种情况下，使用 typeof 运算符可以获得变量的类型信息。
在使用 nullish 合并运算符时，需要特别注意使用 typeof 运算符进行判断，以避免类型错误。
--- --- - - ----- ------- -- --- - - -------- -- ---------- -- ---------
在上述代码中，obj 对象没有 age 属性。如果使用 obj.age，将会报错。 在此处使用 ?. 运算符，代表如果对象存在 age 属性，就返回该属性值；如果不存在，就忽略该属性。 结果得到 undefined 值，这时就需要使用 nullish 合并运算符，使用默认值 'unknown'。
在使用 typeof 运算符判断类型时，需要注意：
- typeof null 的值为 'object'，是一种特殊情况。
- 在 JavaScript 中，NaN 类型可以被视为 number 类型，需要特别处理。
- 在其他语言（如 TypeScript）中，也需要注意 null 和 undefined 类型的区别。
--- --- - ---- --- - - ------ --- --- -------- -- ----------- - --- - -- -- -
在上述代码中，判断 num 是否为 number 类型，并且 num 不是 NaN 值。如果符合条件，将 num 的值赋给 x，否则使用默认值 0。
总结
nullish 合并运算符能够避免常规运算符的问题，处理 null 和 undefined 值； 使用 typeof 运算符能够得到变量的类型信息，可以和 nullish 合并运算符搭配使用； 注意 null 和 undefined 类型的区别，避免类型错误。 如此使用 nullish 合并运算符将变得更加简单和有效。
示例代码：
--- ---- - ----- --- --- - ---------- --- ------- - ---------- --- ------ - - ----- ------- -- --- --- - ---- ---------------- -- --------- -- --------- --------------- -- ---- -- -- ----------------------- -- ----------- -- --------- ------------------ --- --- -------- -- ----------- - --- - --- -- -
上述代码中，使用了 nullish 合并运算符和 typeof 运算符，能够正确地处理变量值和类型信息。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f97e5ef6b2d6eab30fd5af