介绍

空值合并运算符（Nullish Coalescing Operator），语法：a ?? b

仅当 a 为 null 或 undefined 时，返回 b；
否则直接返回 a。
ES2020 新增语法，专门解决 逻辑或 || 的缺陷。

简单示例

// 1. 左侧是 null / undefined → 返回右侧
console.log(null ?? 100);      // 100
console.log(undefined ?? 200); // 200

// 2. 左侧是其他值（0、''、false、NaN 等）→ 返回左侧
console.log(0 ?? 99);          // 0
console.log('' ?? '默认值');    // ''
console.log(false ?? true);     // false
console.log(NaN ?? 66);         // NaN
console.log(123 ?? 456);       // 123

和 || 逻辑或核心区别

|| 会把所有假值（0、''、false、NaN、null、undefined）都判定为“空”，这是日常踩坑点。

表达式	`??` 结果	II 结果	说明
`0 ?? 10`	0	10	`0` 不是 null/undefined，`??` 保留原值
`'' ?? 'hello'`	`''`	`hello`	空字符串被 `II` 误判为空
`null ?? 5`	5	5	两者表现一致
`undefined ?? 8`	8	8	两者表现一致

实战场景对比

// 场景：给分数设置默认值，分数允许为 0
const score = 0;

// 错误：|| 把 0 当成假值，覆盖了有效数据
const res1 = score || 60; 
console.log(res1); // 60

// 正确：?? 只处理 null/undefined，保留合法的 0
const res2 = score ?? 60;
console.log(res2); // 0

链式使用

支持连续链式写法，从左到右依次判断：

let a = undefined;
let b = null;
let c = '正常值';

console.log(a ?? b ?? c ?? '兜底'); // 正常值

结合赋值：??= 空值合并赋值运算符

ES2021 新增，语法：x ??= y
等价于：if (x === null || x === undefined) { x = y }

示例：

let num = undefined;
num ??= 10;
console.log(num); // 10

let str = '';
str ??= 'test';
console.log(str); // '' （空字符串不处理）

运算优先级 & 括号规则

优先级：?? 优先级 低于 &&、||
禁止混用：?? 不能直接和 && / || 连写，必须加括号，否则报错

// 报错：语法错误，不能直接混合 && ||
// 1 || 2 ?? 3

// 正确：用括号明确优先级
console.log((1 || 2) ?? 3); // 2
console.log(1 || (2 ?? 3)); // 1

典型使用场景

给变量设置默认值（允许 0、空字符串）

const config = { pageSize: 0 };
const page = config.pageSize ?? 10; // 0（保留合法数值）

接口返回数据容错

// 接口字段可能为 null/undefined，但合法值包含 0、''
const data = res.data?.name ?? '匿名用户';

对象属性兜底（常搭配可选链 ?. 使用）

const username = user?.info?.nickname ?? '游客';

总结

a ?? b：只认 null 和 undefined，其余值全部保留；
对比 ||：|| 是所有假值都替换，?? 更精准；
搭配 ?. 可选链、??= 赋值运算符，是前端容错主流写法；
和 &&/|| 混用必须加括号。

原文出处：/show_1GW3ScRSDQjy.html

介绍