JavaScript空值合并和逻辑运算符有哪些实用技巧

JavaScript中的空值合并运算符和逻辑运算符是日常开发中处理条件判断、默认值赋值场景的核心工具，合理运用这些运算符可以大幅简化代码逻辑，提升代码的可读性与执行效率。

核心运算符基础回顾

空值合并运算符（??）

空值合并运算符的语法是left_expr ?? right_expr，只有当左侧表达式的值为null或者undefined时，才会返回右侧的表达式值，其他 falsy 值比如0、''、false都不会触发右侧返回。

// 基础用法示例
let a = null;
let b = undefined;
let c = 0;
let d = '';

console.log(a ?? '默认值'); // 输出：默认值
console.log(b ?? '默认值'); // 输出：默认值
console.log(c ?? '默认值'); // 输出：0
console.log(d ?? '默认值'); // 输出：''

常用逻辑运算符

逻辑与（&&）、逻辑或（||）是JavaScript中最基础的逻辑运算符，二者都支持短路求值特性：

• 逻辑与&&：左侧表达式为 falsy 时直接返回左侧值，否则返回右侧值
• 逻辑或||：左侧表达式为 falsy 时返回右侧值，否则返回左侧值

// 逻辑运算符基础示例
console.log(false && '右侧值'); // 输出：false
console.log(true && '右侧值'); // 输出：右侧值
console.log(false || '右侧值'); // 输出：右侧值
console.log(true || '右侧值'); // 输出：true

实用技巧与场景应用

1. 空值合并与逻辑或的差异化使用

很多开发者会混淆??和||的使用场景，二者的核心差异在于对 falsy 值的处理：如果需要排除null和undefined之外的 falsy 值，就用??；如果需要所有 falsy 值都取默认值，就用||。

// 场景：获取用户输入的年龄，空字符串和0都是合法输入，只有未输入时才用默认值
function getAge(inputAge) {
  // 错误用法：用||会把0和空字符串也替换成默认值
  // return inputAge || 18;
  // 正确用法：用??只处理null和undefined
  return inputAge ?? 18;
}

console.log(getAge(0)); // 输出：0
console.log(getAge('')); // 输出：''
console.log(getAge(null)); // 输出：18

2. 短路求值的灵活运用

逻辑与和逻辑或的短路特性可以用来简化条件执行代码，避免冗余的if判断。

// 场景：对象存在时才执行其方法
let user = {
  name: '张三',
  sayHello: function() {
    console.log('你好，我是' + this.name);
  }
};

// 传统写法
if (user && user.sayHello) {
  user.sayHello();
}

// 短路写法
user && user.sayHello && user.sayHello();

3. 空值合并与可选链的组合使用

可选链运算符?.可以安全访问嵌套对象属性，和空值合并运算符组合使用可以高效处理嵌套属性的默认值场景。

// 场景：获取用户配置中的主题色，多层嵌套且可能不存在
let config = {
  userSetting: {
    // theme: 'dark' // 注释掉模拟属性不存在的情况
  }
};

// 组合使用可选链和空值合并
let theme = config?.userSetting?.theme ?? 'light';
console.log(theme); // 输出：light

4. 运算符优先级注意事项

空值合并运算符的优先级低于逻辑与和逻辑或，混合使用时需要注意加括号避免逻辑错误。

// 错误示例：优先级问题导致逻辑不符合预期
let val1 = null || undefined ?? '默认值';
// 实际执行顺序：(null || undefined) ?? '默认值'，输出默认值

let val2 = null && undefined ?? '默认值';
// 实际执行顺序：(null && undefined) ?? '默认值'，输出null

// 正确示例：明确优先级加括号
let val3 = null || (undefined ?? '默认值');
let val4 = (null && undefined) ?? '默认值';

常见使用误区

误区1：空值合并运算符左侧可以是任意表达式，但右侧表达式只有在左侧为null/undefined时才会执行，这也是短路特性的体现。

误区2：不能直接将空值合并运算符和逻辑与、逻辑或混合使用，否则会抛出语法错误，必须加括号明确优先级。

// 错误写法：直接混合使用会报错
// let result = null || undefined ?? '默认值';

// 正确写法：加括号
let result = (null || undefined) ?? '默认值';

总结

空值合并运算符和逻辑运算符的合理使用可以大幅减少冗余的条件判断代码，提升开发效率。开发者需要明确??和||的适用场景，掌握短路求值、组合使用等技巧，同时注意运算符优先级和语法限制，避免写出不符合预期的逻辑。在实际开发中，可以根据具体场景选择最合适的运算符，让代码更简洁易维护。

JavaScript空值合并运算符逻辑与运算符逻辑或运算符可选链运算符修改时间：2026-07-11 14:24:29