JavaScript 逻辑赋值运算符

ES2021逻辑赋值运算符：||=或赋值、&&=与赋值、??=空赋值（只在null/undefined时赋值）、与if判断赋值的语法糖对比、实际使用场景（默认值/惰性初始化） · 难度：入门 · +10XP

JavaScript 逻辑赋值运算符 —— 更简洁的条件赋值

ES2021引入了三个逻辑赋值运算符：||=、&&=、??=。它们把逻辑判断和赋值合并成一步，让代码更简洁。

三个运算符

// ||= : 如果左值为falsy，则赋值
let name = '';
name ||= '匿名';  // name = '' || '匿名' → '匿名'
// &&= : 如果左值为truthy，则赋值
let user = { name: '小明' };
user &&= user.name;  // user = user && user.name → '小明'
// ??= : 如果左值为null/undefined，则赋值
let theme = null;
theme ??= 'light';  // theme = null ?? 'light' → 'light'
theme ??= 'dark';   // theme已经是'light'，不改变

动手练习

1. 基础练习：用??=给函数参数设置默认值。
2. 进阶应用：用逻辑赋值简化项目中"如果为空则初始化"的代码。
3. 项目实战：用逻辑赋值模式重构项目中的大量if-default赋值代码。