JavaScript 空值合并运算符 '??'

空值合并运算符（Nullish Coalescing Operator）?? 是 ES2020 引入的一个新运算符，用于处理 null 或 undefined 的情况。

基本用法

a ?? b 的意思是：

• 如果 a 不是 null 或 undefined，则返回 a
• 如果 a 是 null 或 undefined，则返回 b

let user;
console.log(user ?? "匿名"); // "匿名"

let name = null;
console.log(name ?? "未知"); // "未知"

let age = 0;
console.log(age ?? 18); // 0 (因为 0 不是 null 或 undefined)

与逻辑或 || 的区别

?? 与 || 类似，但有重要区别：

• || 会在左侧操作数为假值（falsy）时返回右侧操作数
• ?? 只在左侧操作数为 null 或 undefined 时返回右侧操作数

假值包括：false, 0, "", null, undefined, NaN

let count = 0;
console.log(count || 10); // 10 (因为 0 是假值)
console.log(count ?? 10); // 0 (因为 0 不是 null 或 undefined)

使用场景

1. 提供默认值

   const settings = {
     theme: null,
     fontSize: 0
   };
   
   const theme = settings.theme ?? 'dark';
   const fontSize = settings.fontSize ?? 14;
   

2. 链式调用时提供后备值

   const user = {
     profile: {
       name: null
     }
   };
   
   const displayName = user.profile.name ?? user.email ?? '匿名用户';
   

3. 与可选链操作符 ?. 结合使用

   const duration = movie.duration?.minutes ?? 90;
   

注意事项

1. ?? 的优先级较低，通常需要加括号

   let area = (height ?? 100) * (width ?? 50);
   

2. 不能直接与 || 或 && 混用而不加括号

   // 会报错
   let x = 1 && 2 ?? 3; // SyntaxError
   
   // 正确写法
   let x = (1 && 2) ?? 3; // 2
   

空值合并运算符 ?? 提供了一种更精确的方式来处理默认值，特别适用于那些可能需要保留 0、false 或空字符串 "" 的场景。