js ??(空值合并操作符)使用总结

文章索引

用法

语法：表达式1 ?? 表达式2
作用：如果左侧的值是 null 或 undefined，返回右侧的值；否则返回左侧的值。
特点：只针对 null 和 undefined，不会把其他假值（如 0、""、false）当作需要替换的情况。

为什么用

更精确：相比 ||，?? 不会误把合法的假值替换为默认值，只处理真正“缺失”的情况。
提高可读性：明确表达“仅在值缺失时提供默认值”的意图。

使用场景

设置默认值但保留有效假值：

如保留用户输入的 0 或 ""，仅在 null/undefined 时用默认值。

处理未定义的变量或属性：

如从对象或 API 获取数据时，某个字段可能缺失。

避免意外覆盖：

比如表单中空字符串是合法输入，不应被替换。

优先级

较低：?? 的优先级低于 && 和 ||，需要用括号明确组合逻辑。
注意：不能直接与 && 或 || 混用，否则会报语法错误，必须加括号。

简单示例

基本用法：

   let a = null ?? "默认值"; // 输出 "默认值"
   let b = 0 ?? 42;         // 输出 0
   console.log(a, b);

let a = null ?? "默认值"; // 输出 "默认值"

let b = 0 ?? 42; // 输出 0

console.log(a, b);

保留假值：

   let input = "";
   let result = input ?? "默认"; // 输出 ""
   console.log(result);

let input = "";

let result = input ?? "默认"; // 输出 ""

console.log(result);

优先级示例：

   let x = null ?? false || true;    // 输出 true （先算 false || true）
   let y = (null ?? false) || true;  // 输出 true （先算 null ?? false）
   console.log(x, y);

let x = null ?? false || true; // 输出 true （先算 false || true）

let y = (null ?? false) || true; // 输出 true （先算 null ?? false）

console.log(x, y);

实际应用：

   const data = { score: null };
   let score = data.score ?? 100; // 输出 100
   console.log(score);

const data = { score: null };

let score = data.score ?? 100; // 输出 100

console.log(score);