在 JavaScript 中，空值（null 或 undefined）常常在变量或属性中出现。空值联合运算符是 ES11 中的新功能，也被称为空合并操作符（nullish coalescing operator）。该操作符可以帮助我们更方便地处理空值的情况。本文将介绍空值联合运算符及其使用方法，并提供一些示例代码。
何为空值联合运算符
空值联合运算符（??）的作用是在变量或属性的值为空值时，使用默认值替代。与传统的逻辑或（||）不同的是，联合运算符仅在左侧的值为 null 或 undefined 时才会返回右侧的默认值。以下是一个简单的示例：
const foo = null ?? 'default'; console.log(foo); // output: 'default'
在上面的示例中，由于 foo 的值为 null，所以使用默认值 'default' 来代替 foo 的值。这与传统的逻辑或运算符产生了不同的结果：
const bar = null || 'default'; console.log(bar); // output: 'default'
在这个例子中，即使 bar 的值为 false 或空字符串，也会返回默认值 'default'。这是因为逻辑或运算符将非空值视为 true。
如何使用空值联合运算符
空值联合运算符可以用在任何需要默认值的场景，比如函数参数、对象属性或数组元素。
函数参数的默认值
我们可以使用空值联合运算符来为函数的参数定义默认值。例如：
function foo(arg1, arg2 = arg1 ?? 'default') {
console.log(arg1, arg2);
}
foo('hello', undefined); // output: 'hello default'
foo('hello', null); // output: 'hello null'
foo('hello', 'world'); // output: 'hello world'在上面的示例中，如果 arg2 的值为 undefined 或 null，它将被替换为 arg1 的值。如果 arg1 的值也为null 或 undefined，arg2 将被替换为默认值 'default'。
对象属性的默认值
我们可以使用空值联合运算符来为对象属性设置默认值。例如：
-- -------------------- ---- -------
----- --- - -
----- ------
---- -----
-------- -
------ -----------------
-
-
----- ---- - -------- -- ----------
----- --- - ------- -- ---
----- ----- - ----------------- -- ------------------
------------------ -- ------- -----
----------------- -- ------- --
------------------- -- ------- -----------------在上面的示例中，如果属性的值为 null 或 undefined，使用默认值替代。
数组元素的默认值
我们可以使用空值联合运算符为数组元素设置默认值。例如：
-- -------------------- ---- ------- ----- --- - --- ----- ---------- --- ----- --- - ------ -- -- ----- --- - ------ -- -- ----- --- - ------ -- -- ----- --- - ------ -- -- ----------------- -- ------- - ----------------- -- ------- - ----------------- -- ------- - ----------------- -- ------- -
在上面的示例中，如果元素的值为 null 或 undefined，使用默认值替代。
总结
空值联合运算符是 ES11 中的新功能，它可以简化代码，提高可读性，并且在处理空值的情况下有很大帮助。无论是函数参数、对象属性还是数组元素，都可以使用空值联合运算符来替代传统的逻辑或运算符。我们应该充分利用该功能来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648442e648841e9894363128