在 JavaScript 中,我们通常使用 || 操作符来给变量赋默认值。但是,如果变量的值是 falsy 值(如 false、0、""、null、undefined),那么 || 操作符就会返回错误的默认值。为了解决这个问题,ES11 引入了 nullish coalescing 操作符(??)。
什么是 nullish coalescing 操作符?
nullish coalescing 操作符是一种用于为变量赋默认值的操作符。它只在变量的值为 null 或 undefined 时才返回默认值,否则返回变量的实际值。
下面是一个使用 nullish coalescing 操作符的例子:
const foo = null ?? "default value"; console.log(foo); // "default value" const bar = "hello" ?? "default value"; console.log(bar); // "hello"
在上面的例子中,foo 的值为 null,因此返回了默认值。而 bar 的值为 "hello",因此返回了变量的实际值。
与 || 操作符的区别
为了更好地理解 nullish coalescing 操作符,让我们来看一下它与 || 操作符的区别。
-- -------------------- ---- ------- ----- - - - -- -- --------------- -- - ----- - - -- -- -------- ------- --------------- -- -------- ------ ----- - - ---- -- -------- ------- --------------- -- -------- ------ ----- - - --------- -- -------- ------- --------------- -- -------- ------ ----- - - --- -- -------- ------- --------------- -- -------- ------ ----- - - ----- -- -------- ------- --------------- -- -------- ------
在上面的例子中,我们使用 || 操作符为变量赋默认值。但是,如果变量的值为 falsy 值,|| 操作符会返回错误的默认值。例如,0、""、null、undefined、NaN 和 false 都是 falsy 值,因此它们会返回错误的默认值。
相比之下,nullish coalescing 操作符只有在变量的值为 null 或 undefined 时才返回默认值。这意味着它可以安全地用于为变量赋默认值。
如何使用 nullish coalescing 操作符
使用 nullish coalescing 操作符非常简单。只需在变量名后面加上 ??,然后紧跟默认值即可。
下面是一个使用 nullish coalescing 操作符的例子:
const foo = null; const bar = "hello"; const result1 = foo ?? "default value"; const result2 = bar ?? "default value"; console.log(result1); // "default value" console.log(result2); // "hello"
在上面的例子中,我们使用 nullish coalescing 操作符为变量赋默认值。如果变量的值为 null 或 undefined,就返回默认值。否则,返回变量的实际值。
总结
nullish coalescing 操作符是一种用于为变量赋默认值的操作符。它只在变量的值为 null 或 undefined 时才返回默认值,否则返回变量的实际值。相比之下,|| 操作符会在变量的值为 falsy 值时返回错误的默认值。因此,使用 nullish coalescing 操作符可以更安全地为变量赋默认值。
在编写 JavaScript 代码时,我们经常需要为变量赋默认值。nullish coalescing 操作符是一个非常实用的工具,可以让我们更轻松地实现这一目标。希望本文能够帮助你更好地理解和使用 nullish coalescing 操作符。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65050e1f95b1f8cacd196dd2