JavaScript空值合并运算符：如何优雅地处理变量的空值情况？

在JavaScript中，处理变量的空值（null 或 undefined）是一个常见的需求。为了更优雅地处理这种情况，ES2020 引入了空值合并运算符（Nullish Coalescing Operator），即 ??。

空值合并运算符 (??) 的作用

?? 运算符用于检查左侧的表达式是否为 null 或 undefined。如果是，则返回右侧的值；否则，返回左侧的值。

语法

const result = leftExpression ?? rightExpression;

• leftExpression：需要检查的表达式。
• rightExpression：当 leftExpression 为 null 或 undefined 时返回的值。

示例

const foo = null;
const bar = foo ?? 'default value';
console.log(bar); // 输出: 'default value'

const baz = 0;
const qux = baz ?? 'default value';
console.log(qux); // 输出: 0

与逻辑或运算符 (||) 的区别

?? 与 || 运算符不同，|| 会检查左侧表达式是否为假值（如 false、0、''、NaN、null、undefined），而 ?? 仅检查 null 和 undefined。

const value = 0;

const result1 = value || 'default';
console.log(result1); // 输出: 'default'

const result2 = value ?? 'default';
console.log(result2); // 输出: 0

使用场景

1. 默认值赋值：

   const user = {
      name: 'Alice',
      age: null
   };
   
   const age = user.age ?? 18;
   console.log(age); // 输出: 18
   

2. 函数参数默认值：

   function greet(name) {
      name = name ?? 'Guest';
      console.log(`Hello, ${name}!`);
   }
   
   greet(); // 输出: Hello, Guest!
   greet(null); // 输出: Hello, Guest!
   greet('Alice'); // 输出: Hello, Alice!
   

3. 链式操作：

   const user = {
      profile: {
          name: 'Bob',
          age: null
      }
   };
   
   const age = user.profile.age ?? 25;
   console.log(age); // 输出: 25
   

注意事项

• ?? 仅对 null 和 undefined 起作用，其他假值（如 0、''、false）不会被替换。
• ?? 不能与 && 或 || 直接混用，除非使用括号明确优先级。

const a = null;
const b = 0;
const c = a ?? b || 'default'; // 报错: SyntaxError
const d = (a ?? b) || 'default'; // 正确
console.log(d); // 输出: 0

总结

空值合并运算符 ?? 提供了一种简洁且安全的方式来处理 null 和 undefined 的情况，避免了使用 || 时可能导致的意外行为。在处理变量空值时，?? 是一个非常实用的工具。