在 JavaScript 中,我们经常会使用 ||
运算符来对变量进行默认值的设置。例如:
function greet(name) { name = name || 'world'; console.log(`Hello, ${name}!`); } greet(); // Hello, world! greet('Alice'); // Hello, Alice!
在上面的例子中,如果 name
的值为 falsy(比如空字符串、0、false 等),那么 name || 'world'
表达式的结果就是 'world'
,从而为 name
设置了默认值。
然而,在这种情况下,如果 name
的值为 null
或 undefined
,那么默认值 'world'
会被使用,这可能并不是我们想要的行为。
ES11 中引入了一种新的运算符,叫做 nullish 合并运算符 ??
,它可以将空值 null
和未定义值 undefined
区分开来。
使用 nullish 合并运算符
nullish 合并运算符的语法很简单,就是 ??
,它的作用是如果左侧的值为 null 或 undefined,则使用右侧的值作为默认值。例如:
-- -------------------- ---- ------- -------- ----------- - ---- - ---- -- -------- ------------------- ----------- - -------- -- ------ ------ ------------ -- ------ ------ ----------------- -- ------ ------ --------------- -- ------ ------
在上面的例子中,我们使用了 nullish 合并运算符将 null
和 undefined
区分开来。当 name
的值为 null
或 undefined
时,使用 ??
运算符将其替换为 'world'
,从而得到了正确的默认值。
nullish 合并运算符与 || 运算符的区别
使用 nullish 合并运算符可以避免使用 || 运算符时的一些问题。例如,当值为 0
或空字符串 ''
时,|| 运算符会将其视为 falsy,从而使用默认值。而使用 nullish 合并运算符时,只有当值为 null
或 undefined
时才会使用默认值。
-- -------------------- ---- ------- ------------- -- ----------- -- ------- -------------- -- ----------- -- ------- ---------------- -- ----------- -- ------- --------------------- -- ----------- -- ------- ------------- -- ----------- -- - -------------- -- ----------- -- -- ---------------- -- ----------- -- ------- --------------------- -- ----------- -- -------
总结
nullish 合并运算符是 ES11 中的新特性,它可以将空值 null
和未定义值 undefined
区分开来,避免了使用 || 运算符时的一些问题。在编写 JavaScript 代码时,建议使用 nullish 合并运算符来设置默认值,以避免不必要的错误。
示例代码
-- -------------------- ---- ------- -------- ----------- - ---- - ---- -- -------- ------------------- ----------- - ------------- -- ----------- -- ------- -------------- -- ----------- -- ------- ---------------- -- ----------- -- ------- --------------------- -- ----------- -- ------- ------------- -- ----------- -- - -------------- -- ----------- -- -- ---------------- -- ----------- -- ------- --------------------- -- ----------- -- ------- -------- -- ------ ------ ------------ -- ------ ------ ----------------- -- ------ ------ --------------- -- ------ ------
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65df15d01886fbafa4c5d6bf