在 JavaScript 开发中，处理空值（null 或者 undefined）是很常见的操作。在以往的开发中，我们通常使用条件语句或者三元运算符来处理空值，但是这种方式有时候会产生很多重复代码，也不够简洁明了。
ES6 中新增了空值合并操作符（Nullish Coalescing Operator），可以更加优雅地处理空值的情况，提高代码的可读性和可维护性。
空值合并操作符的作用
空值合并操作符（??）在处理空值时，可以将空值转化为默认值。当左侧的操作数为 null 或 undefined 时，才会返回右侧的默认值。而对于非空值的情况，空值合并操作符会返回左侧的操作数。
空值合并操作符的语法如下：
左侧操作数 ?? 右侧默认值
空值合并操作符与 || 运算符的差异
在介绍空值合并操作符之前，先来看一下 || 运算符（逻辑或）。
在 JavaScript 中，|| 运算符常常用来给变量一个默认值：
let name; console.log(name || 'anonymous'); // 输出：anonymous
如果变量 name 的值为 falsy 值（null、undefined、0、''、false 或 NaN），那么 || 运算符就会返回右侧的默认值，也就是 'anonymous'。
然而，如果变量 name 的值为 ''，或者其他 falsy 值，那么 || 运算符同样会返回右侧的默认值，也就是 'anonymous'。这显然和我们的期望不符。
在这种情况下，我们可以使用空值合并操作符来解决问题：
let name = ''; console.log(name ?? 'anonymous'); // 输出：''
当变量 name 的值为 '' 时，空值合并操作符会优先选择左侧的操作数，也就是空字符串。这样，就可以正确地处理空字符串的情况。
综上所述，空值合并操作符更加严格地检查 null 或 undefined，而不是将所有 falsy 值都视为未定义或空。
空值合并操作符的示例
下面是一些使用空值合并操作符的示例：
- 使用空值合并操作符给变量一个默认值
let name; console.log(name ?? 'anonymous'); // 输出：anonymous let age = 0; console.log(age ?? 18); // 输出：0
在这个示例中，如果变量 name 或 age 的值为 null 或 undefined，那么空值合并操作符就会返回默认值。
- 使用空值合并操作符处理函数参数
-- -------------------- ---- ------- -------- ----------- -------- - ---- - ---- -- ------------ ------- - ------- -- -------- ------------------------ ----------- - -------- -- --------- ---------- ------------- -- --------- ---- ------------ ----- ---------- -- ------- -------- ----
在这个示例中，如果函数的参数值为 null 或 undefined，那么空值合并操作符就会返回默认值，从而避免了繁琐的条件语句。
总结
空值合并操作符是 ES6 中的一个很实用的特性，它可以更加优雅地处理空值的情形，提高了代码的可读性和可维护性。在实际开发中，我们可以多加运用空值合并操作符，以减少冗余代码的产生，提高开发效率。
参考文献
- You Don't Know JS Yet: ES6 & Beyond (Kyle Simpson)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ea2fe6f6b2d6eab353f1df