JavaScript教程：深入理解空值合并运算符(??)与空值赋值运算符(??=)

JavaScript教程：深入理解空值合并运算符(??)与空值赋值运算符(??=)

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

引言

在JavaScript开发中，处理变量可能为null或undefined的情况非常常见。传统上我们使用逻辑或(||)运算符来处理这种情况，但它存在一些局限性。本文将详细介绍两个更专业的运算符：空值合并运算符(??)和空值赋值运算符(??=)，它们能更精确地处理null和undefined的情况。

空值合并运算符(??)

基本概念

空值合并运算符由两个问号组成(??)，它的作用是返回第一个"已定义"的值。在本文中，"已定义"指的是值既不是null也不是undefined。

语法形式：

result = a ?? b

运算规则：

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

实际应用示例

1. 设置默认值：

let username;
console.log(username ?? "匿名用户"); // 输出"匿名用户"

2. 多变量选择第一个有效值：

let firstName = null;
let lastName = undefined;
let nickName = "技术达人";
console.log(firstName ?? lastName ?? nickName ?? "匿名"); // 输出"技术达人"

与逻辑或(||)的区别

虽然||运算符也能实现类似功能，但它们有重要区别：

• ||返回第一个"真值"(truthy)
• ??返回第一个"已定义"值(非null/undefined)

关键差异示例：

let count = 0;
console.log(count || 10); // 输出10，因为0被视为假值
console.log(count ?? 10); // 输出0，因为0是已定义的值

||会将以下值视为假值：false、0、""、null、undefined、NaN，而??只关心null和undefined。

运算符优先级

??的优先级与||相同，在JavaScript运算符优先级表中属于较低级别(3级)。这意味着在复杂表达式中可能需要使用括号：

正确写法：

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

错误写法：

let area = height ?? 100 * width ?? 50; // 会得到意外结果

使用限制

出于安全考虑，JavaScript禁止在没有括号明确优先级的情况下混合使用??与&&或||：

错误写法：

let x = 1 && 2 ?? 3; // 语法错误

正确写法：

let x = (1 && 2) ?? 3; // 正确，输出2

空值赋值运算符(??=)

基本概念

空值赋值运算符(??=)是??的赋值版本，它只在变量值为null或undefined时才进行赋值。

语法形式：

x ??= y

等价于：

x = x ?? y

实际应用示例

传统写法：

let userAge = null;
if (userAge === null || userAge === undefined) {
  userAge = 18;
}

使用??=简化：

let userAge = null;
userAge ??= 18; // userAge现在是18

如果变量已有非null/undefined值，则不会赋值：

let userAge = 25;
userAge ??= 18; // userAge保持25不变

总结

1. 空值合并运算符(??)用于从一系列值中选择第一个非null/undefined的值
2. 与||不同，??不会将0、false、空字符串等视为无效值
3. ??的优先级较低，在复杂表达式中需要使用括号
4. 不能直接混合使用??与&&或||，必须用括号明确优先级
5. 空值赋值运算符(??=)是简洁的赋值语法，只在变量为null/undefined时赋值

这些运算符让JavaScript开发者能够更精确地处理变量可能为null或undefined的情况，避免了传统||运算符可能导致的意外行为，特别是在处理可能包含假值(如0、false)的变量时尤为有用。

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info