空值合并运算符

108 空值合并运算符（Nullish Coalescing Operator）

一、前置知识回顾：OR 运算符（||）设置默认值的局限性

1.1 OR 运算符的工作逻辑

• 核心规则：当使用

  A || B

  时，JavaScript 会判断

  A

  是否为

  假值（Falsy Value）

  • 若A是假值（包括0、""、null、undefined、NaN、false），则返回B（默认值）
  • 若A是真值（Truthy Value），则返回A

• 适用场景：仅需排除null/undefined以外的无效值时（如变量未初始化的场景）

1.2 实际使用中的问题（例题 1）

// 需求：设置客人数量，若未指定则默认10人
const numGuests = 0; // 实际场景：0位客人（合法值）
const guests = numGuests || 10;
console.log(guests); // 输出结果：10（错误！本应返回0）

// 问题原因：0属于假值，OR运算符误将其判定为“无效值”，强制替换为默认值10

二、空值合并运算符（??）核心知识点

2.1 基本定义与引入背景

• 语法：A ?? B
• 引入版本：ES2020（ECMAScript 2020）
• 设计目标：解决 OR 运算符误判0、""等合法假值的问题，仅针对空值（Nullish Value） 生效

2.2 核心工作原理

• 空值（Nullish Value）的范围：仅包含null和undefined（不包含0、""、NaN等）
• 运算规则：
  1. 判断左侧操作数A是否为null或undefined
  2. 若A是null/undefined，则返回右侧操作数B（默认值）
  3. 若A不是空值（即使是0、""等假值），则返回A（短路评估，不执行B）

三、空值合并运算符的实际应用（例题解析）

3.1 基础使用：正确处理 “0” 作为合法值（例题 2）

// 需求：同例题1，允许0位客人的合法场景
const numGuests1 = 0;
const numGuests2 = undefined;
const numGuests3 = null;
const numGuests4 = ""; // 空字符串表示“未填写客人姓名”（合法）

// 使用空值合并运算符设置默认值
const guests1 = numGuests1 ?? 10;
const guests2 = numGuests2 ?? 10;
const guests3 = numGuests3 ?? 10;
const guests4 = numGuests4 ?? "未知客人";

console.log(guests1); // 输出：0（正确保留合法假值）
console.log(guests2); // 输出：10（undefined触发默认值）
console.log(guests3); // 输出：10（null触发默认值）
console.log(guests4); // 输出：""（正确保留空字符串合法值）

3.2 进阶场景：结合变量赋值与函数返回（例题 3）

// 需求：从用户输入中获取年龄，未输入则默认18岁（允许年龄为0，如婴儿）
function getAge(inputAge) {
  // 若inputAge是null/undefined，返回默认值18；否则返回输入值（包括0）
  return inputAge ?? 18;
}

// 测试用例
console.log(getAge(25)); // 输出：25（正常输入）
console.log(getAge(0)); // 输出：0（合法年龄）
console.log(getAge(null)); // 输出：18（空值触发默认）
console.log(getAge()); // 输出：18（未传参→undefined触发默认）

3.3 注意事项：避免与 && 运算符混用（优先级问题）

• 空值合并运算符（

  ??

  ）与逻辑与（

  &&

  ）、逻辑或（

  ||

  ）优先级不同，混合使用需加括号，否则会报错

  // 错误写法：优先级冲突，JavaScript不允许直接混用
  // const result = a && b ?? c;
  
  // 正确写法：加括号明确运算顺序
  const a = 5;
  const b = 0;
  const c = 10;
  const result = (a && b) ?? c; // 先算a&&b→0，再算0??10→0
  console.log(result); // 输出：0

四、总结：空值合并运算符的核心价值

1. 精准判断空值：仅对null/undefined生效，避免误判0、""等合法假值，减少业务逻辑 bug
2. 简化代码：无需通过if (A === null || A === undefined)判断，一行代码实现精准默认值设置
3. 兼容性：现代浏览器（Chrome 80+、Firefox 72+、Edge 80+）及 Node.js 14 + 均支持，项目中可放心使用（如需兼容旧环境，可通过 Babel 转译）