ES11 (2020) 中的 nullish 合并运算符:如何更好地与 typeof 运算符配合使用?

阅读时长 4 分钟读完

在 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

纠错
反馈