JS中空合并运算符 ?? 的使用

什么是空合并运算符？

空合并运算符 ?? (Nullish coalescing operator) 是一个逻辑运算符，当其左侧操作数为 null 或 undefined 时，它返回其右侧操作数，否则返回其左侧操作数

const foo = null ?? 'default string';
console.log(foo);  //output: "default string"

const bar = 0 ?? 'default string'
console.log(bar);  //output: 0

??运算符 与 || 运算符的区别

很多人会搞混?? 运算符 与 || 运算符，觉得这两个实现的效果都一样。其实这是不严谨的，它们之间还是有一些细微的差别。
?? 和 || 主要区别在于 假 (false) 和 假值(falsy) 的区别。

• ?? 仅当左操作数为 null 或 undefined 时， ?? 运算符才会将结果作为右操作数。
• ||运算符会将左操作数的所有假值(falsy) 的结果作为右操作数

例如：

// 1. 使用 0 作为输入 
const a = 0;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = 0

// 2. 空字符串 '' 作为输入
const a = ''
console.log(`a || "ABC" = ${a || "ABC"}`); // a || "ABC" = ABC
console.log(`a ?? "ABC" = ${a ?? "ABC"}`); // a ?? "ABC" = 

// 3. 使用 null 作为输入
const a = null;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = 10

// 4. 使用 undefined 作为输入
const a = {name: ''}

console.log(`a.name ?? 'varun 1' = ${a.name ?? 'varun 1'}`); 
console.log(`a.name || 'varun 2' = ${a.name || 'varun 2'}`);
// a.name ?? 'varun 1' = 
// a.name || 'varun 2' = varun 2

// 5. 使用 false 作为输入
const a = false;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = false