JS逻辑赋值运算符全面解析

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《现代JS：逻辑赋值运算符详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

逻辑赋值运算符&&=、||=、??=可简化条件赋值：1. &&=在左侧为真值时赋值，适用于有值才更新；2. ||=在左侧为假值时赋值，常用于设置默认值；3. ??=仅当左侧为null或undefined时赋值，避免覆盖0或空字符串等合法值，提升代码安全性与可读性。

逻辑赋值运算符是现代 JavaScript 中简洁且实用的特性，它们结合了逻辑运算和赋值操作，能有效减少重复代码并提升可读性。这些运算符包括 &&=、||= 和 ??=，分别对应“与赋值”、“或赋值”和“空值合并赋值”。它们只在满足特定条件时才执行赋值，避免不必要的操作。

1. 逻辑与赋值（&&=）

该运算符仅在左侧操作数为真值（truthy）时，才会将右侧的值赋给变量。

适用场景：当你想在变量已有“有意义的值”时更新它，否则保持原状。

let user = { name: "Alice" };
user.name &&= "Bob";
console.log(user.name); // 输出 "Bob"

这里因为 user.name 原本是真值，所以被赋为 "Bob"。如果初始为假值，则不会赋值。

2. 逻辑或赋值（||=）

当左侧操作数为假值（falsy）时，才会执行赋值。这是最常见的默认值设置方式。

适合用于初始化未定义或空的变量。

let config = {};
config.timeout ||= 5000;
console.log(config.timeout); // 5000，因为原值为 undefined（falsy）

若 config.timeout 已有非零数值，就不会被覆盖。

3. 空值合并赋值（??=）

仅当左侧为 null 或 undefined 时才赋值，对其他假值如 0、空字符串不起作用。

更精确地处理“缺失值”，避免误覆盖合法但为假的值。

let settings = {
  volume: 0
};
settings.volume ??= 80;
console.log(settings.volume); // 仍为 0，因为 volume 不是 null 或 undefined

相比 ||=，??= 更安全，不会把 0 或 "" 当作需要替换的值。

基本上就这些。合理使用这三个逻辑赋值运算符，可以让代码更紧凑、语义更清晰，特别是在配置初始化和条件更新中非常实用。注意区分它们的触发条件，选择最合适的那一个。

到这里，我们也就讲完了《JS逻辑赋值运算符全面解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！