在 JavaScript 语言中,null 和 undefined 被判断为 falsy 值,因此在进行 if 判断或者 || 运算时可能会出现一些意料之外的结果。为了解决这种问题,ES11 新增了 nullish 合并运算符 ??。
nullish 合并运算符的作用
nullish 合并运算符 ?? 的作用是对于值为 null 或者 undefined 的变量或对象属性,返回默认值。这样就避免了在进行判断或运算时,例如:
const x = null; const y = x || 0; // y 的值为 0
这种情况下,y 的值应该是 null,但是因为 null 被判断为 falsy 值,所以 y 的值被赋为了 0。但是如果使用 nullish 合并运算符:
const x = null; const y = x ?? 0; // y 的值为 null
这种情况下,y 的值为 null,也就是我们预期的值。
nullish 合并运算符的使用
使用 nullish 合并运算符时,可以指定默认值,例如:
const x = undefined; const y = x ?? 0; // y 的值为 0
如果变量 x 的值为 undefined,则 y 的值会被赋为 0。
对于对象属性的判断,可以使用以下方式:
-- -------------------- ---- ------- ----- --- - - -- ----- -- ------ -- -- - ----- - - ------ -- ---------- -- - --- --------- ----- - - ------ -- ---------- -- - --- ----- ----- - - ------ -- ---------- -- - --- -- ----- - - ------ -- ---------- -- - --- ---------
在使用 nullish 合并运算符时,需要注意以下几点:
- 双问号 ?? 后面只能跟一个值,否则会抛出错误;
- 如果变量存在,但是值为 falsy,则默认值也不会生效;
- 对象属性访问时,需要使用 ?. 确保对象属性存在。
总结
ES11 新增的 nullish 合并运算符可以解决因为 null 和 undefined 被判断为 falsy 值而导致的问题。使用 nullish 合并运算符时,需要特别注意不要同时使用 || 运算符,以及要特别注意对象属性访问的方式。在实际开发中,可以使用 nullish 合并运算符来提高代码的可读性和稳定性。
参考代码:
-- -------------------- ---- ------- ----- - - ----- ----- - - - -- -- -- - --- ---- ----- --- - - -- ----- -- ------ -- -- - ----- - - ------ -- ---------- -- - --- --------- ----- - - ------ -- ---------- -- - --- ----- ----- - - ------ -- ---------- -- - --- -- ----- - - ------ -- ---------- -- - --- ---------
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64f53df9f6b2d6eab3dee8bb