ES11 (2020) 新增的 nullish 合并运算符:如何使用及注意事项?

阅读时长 3 分钟读完

在 JavaScript 语言中,null 和 undefined 被判断为 falsy 值,因此在进行 if 判断或者 || 运算时可能会出现一些意料之外的结果。为了解决这种问题,ES11 新增了 nullish 合并运算符 ??。

nullish 合并运算符的作用

nullish 合并运算符 ?? 的作用是对于值为 null 或者 undefined 的变量或对象属性,返回默认值。这样就避免了在进行判断或运算时,例如:

这种情况下,y 的值应该是 null,但是因为 null 被判断为 falsy 值,所以 y 的值被赋为了 0。但是如果使用 nullish 合并运算符:

这种情况下,y 的值为 null,也就是我们预期的值。

nullish 合并运算符的使用

使用 nullish 合并运算符时,可以指定默认值,例如:

如果变量 x 的值为 undefined,则 y 的值会被赋为 0。

对于对象属性的判断,可以使用以下方式:

-- -------------------- ---- -------
----- --- - -
    -- -----
    -- ------
    -- --
-

----- - - ------ -- ---------- -- - --- ---------
----- - - ------ -- ---------- -- - --- -----
----- - - ------ -- ---------- -- - --- --
----- - - ------ -- ---------- -- - --- ---------

在使用 nullish 合并运算符时,需要注意以下几点:

  1. 双问号 ?? 后面只能跟一个值,否则会抛出错误;
  2. 如果变量存在,但是值为 falsy,则默认值也不会生效;
  3. 对象属性访问时,需要使用 ?. 确保对象属性存在。

总结

ES11 新增的 nullish 合并运算符可以解决因为 null 和 undefined 被判断为 falsy 值而导致的问题。使用 nullish 合并运算符时,需要特别注意不要同时使用 || 运算符,以及要特别注意对象属性访问的方式。在实际开发中,可以使用 nullish 合并运算符来提高代码的可读性和稳定性。

参考代码:

-- -------------------- ---- -------
----- - - -----
----- - - - -- -- -- - --- ----

----- --- - -
    -- -----
    -- ------
    -- --
-

----- - - ------ -- ---------- -- - --- ---------
----- - - ------ -- ---------- -- - --- -----
----- - - ------ -- ---------- -- - --- --
----- - - ------ -- ---------- -- - --- ---------

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64f53df9f6b2d6eab3dee8bb

纠错
反馈