JavaScript 中的空值合并运算符(??)完全指南

引言

在 JavaScript/TypeScript 开发中，我们经常需要处理可能为空值的变量。ES2020 引入的空值合并运算符（??）为我们提供了一种优雅的方式来处理这些情况。让我们深入了解这个强大的运算符。

什么是空值合并运算符(??)

空值合并运算符(??)是一个逻辑运算符，当左侧操作数为 null 或 undefined 时，返回右侧操作数，否则返回左侧操作数。

基本语法

leftExpr ?? rightExpr

基本用法示例

// 基础示例
let a = null ?? "default";        // 结果: "default"
let b = undefined ?? "default";   // 结果: "default"
let c = 0 ?? "default";          // 结果: 0
let d = "" ?? "default";         // 结果: ""
let e = false ?? "default";      // 结果: false

?? 与 || 的区别

这是一个非常重要的区分点，让我们看看两者的不同：

// || 运算符会对所有 falsy 值取右侧值
console.log(0 || "default");       // 结果: "default"
console.log("" || "default");      // 结果: "default"
console.log(false || "default");   // 结果: "default"

// ?? 只对 null 和 undefined 取右侧值
console.log(0 ?? "default");       // 结果: 0
console.log("" ?? "default");      // 结果: ""
console.log(false ?? "default");   // 结果: false

实际应用场景

1. 处理可选参数

function handleUser(name: string, age?: number) {
    const userAge = age ?? 18;  // 如果 age 未定义，使用默认值 18
    console.log(`User ${name} is ${userAge} years old`);
}

2. React 状态管理

const Modal: React.FC = () => {
    const toggleModal = useCallback((visible: boolean, applyId?: number) => {
        setModalState(prev => ({
            ...prev,
            visible,
            // 如果 visible 为 true，使用 applyId（若未定义则为 null）
            // 如果 visible 为 false，直接使用 null
            applyId: visible ? applyId ?? null : null
        }));
    }, []);
    
    return (/* JSX */);
};

3. 配置对象合并

interface Config {
    host?: string;
    port?: number;
    timeout?: number;
}

function initializeApp(userConfig: Config) {
    const config = {
        host: userConfig.host ?? 'localhost',
        port: userConfig.port ?? 3000,
        timeout: userConfig.timeout ?? 5000
    };
    // ... 使用配置
}

最佳实践

明确的空值处理

// 好的做法
const value = someValue ?? defaultValue;

// 避免使用 ||，除非你真的想处理所有 falsy 值
const value = someValue || defaultValue;  // 可能有意外行为

链式使用

const value = first ?? second ?? defaultValue;

与可选链操作符配合使用

const userName = user?.name ?? 'Anonymous';

注意事项

不能与 && 或 || 直接组合使用

// 这样会抛出 SyntaxError
const result = a || b ?? c;

// 必须使用括号明确运算优先级
const result = (a || b) ?? c;

与解构赋值配合使用

const { name, age } = user ?? { name: 'Anonymous', age: 0 };

总结

空值合并运算符(??)是一个强大的工具，它：

只处理 null 和 undefined 值
比 || 运算符更精确
特别适合处理可选参数和默认值
提高了代码的可读性和可维护性

在现代 JavaScript/TypeScript 开发中，合理使用 ?? 运算符可以让我们的代码更加简洁优雅，同时也能避免一些常见的逻辑错误。