JavaScript 空值合并运算符（??）

JavaScript 空值合并运算符（??）

空值合并运算符 ?? 是 JavaScript 中的一种逻辑运算符，用于处理可能为 null 或 undefined 的值。它在 ES2020（ECMAScript 11）中引入，常用于提供默认值。

---

语法

let result = value1 ?? value2;

• 如果 value1 是 null 或 undefined，则返回 value2。
• 如果 value1 不是 null 或 undefined（包括 0、false、NaN 等），则返回 value1。

---

使用场景

1. 提供默认值

空值合并运算符最常见的用途是为可能未定义的值提供一个默认值。

let name = null;
let defaultName = name ?? 'Guest';

console.log(defaultName); // 输出: 'Guest'

如果 name 为 null 或 undefined，返回 'Guest'；否则返回 name。

---

2. 区别于逻辑或运算符（||）

|| 运算符会在遇到任何假值时返回右侧值，而 ?? 只对 null 和 undefined 生效。

let count = 0;

// 使用 || 运算符
let result1 = count || 10;
console.log(result1); // 输出: 10

// 使用 ?? 运算符
let result2 = count ?? 10;
console.log(result2); // 输出: 0

区别：

• || 把 0、false、NaN 视为假值。
• ?? 只把 null 和 undefined 视为“空值”。

---

3. 配合对象属性

当访问对象属性可能为 undefined 或 null 时，使用 ?? 提供默认值。

let user = {
  name: 'Alice',
  age: null
};

console.log(user.name ?? 'Anonymous'); // 输出: 'Alice'
console.log(user.age ?? 18);          // 输出: 18
console.log(user.gender ?? 'Unknown'); // 输出: 'Unknown'

---

4. 结合可选链操作符（?.）

可选链操作符可以安全地访问嵌套属性，而空值合并运算符可以为其提供默认值。

let user = {
  profile: null
};

console.log(user?.profile?.name ?? 'Guest'); // 输出: 'Guest'

---

注意事项

1. 运算符优先级

空值合并运算符 ?? 的优先级低于大多数运算符，但高于赋值运算符 =。

let a = null;
let b = 10;
let c = 20;

let result = a ?? b + c;
console.log(result); // 输出: 10，因为 b + c 在 ?? 之前计算

2. 与其他逻辑运算符一起使用

当 ?? 与逻辑与运算符（&&）或逻辑或运算符（||）一起使用时，必须用括号明确运算顺序。

let a = null;
let b = 10;
let c = 20;

// 正确用法
let result = (a ?? b) || c;
console.log(result); // 输出: 10

// 错误示例
// let result = a ?? b || c; // 语法错误

---

浏览器支持

• 空值合并运算符在 ES2020 中引入，现代浏览器（如 Chrome 80+、Firefox 74+、Safari 13.1+、Edge 80+）和 Node.js（14+）均已支持。
• 如果需要支持旧版环境，可以使用 Babel 等工具进行转译。

---

总结

• 空值合并运算符 ?? 是 || 的更精确替代，专注于处理 null 和 undefined。
• 与可选链操作符 ?. 一起使用，可以极大简化对复杂对象结构的访问。
• 使用时需要注意运算优先级和括号的明确表达。

它是处理默认值时的一种简洁而安全的解决方案。