本篇介绍 ES2021 (ES12) 提供的 Logical assignment operators ( &&=、||= 和 ??= )。

过去的逻辑运算子和赋值表达式

假设你要先用 &&、|| 或 ?? 运算子检查某个值是否合适，然後再进行赋值，常见的作法有以下几种。

例如：nickName 是用来储存使用者的昵称，若没有设定 nickName，预设值为空字串，但显示在 UI 上会显示 Anonymous，代表是否者未设定昵称 (即匿名)。常见的作法会先用 || 运算子

let nickName = '';

nickName = nickName || 'Anonymous';
console.log(nickName);
// Anonymous

另一个情境：有一个 text 变数，若没有设定初始值时，会设为预设文字 default。常见的作法会先用 ?? 运算子 (或 || 运算子，依情境而定) 检查，然後再用 = 进行赋值：

let text;

text = text ?? 'default';
console.log(text);
// default

看起来没什麽问题啊？但本篇要介绍的提案将以上写法更简化！把逻辑运算子和赋值表达式合在一起！

现代的逻辑赋值运算子

把某个运算子和赋值表达式合在一起其实很常见，例如：

let count = 0;

count += 66;
console.log(count);
// 66

count -= 10;
console.log(count);
// 56

count /= 4;
console.log(count);
// 14

count *= 2;
console.log(count);
// 28

所以将逻辑运算子和赋值表达式合在一起就是逻辑赋值运算子：&&=、||= 和 ??=。

资料来源

• tc39/proposal-logical-assignment: A proposal to combine Logical Operators and Assignment Expressions
• Logical assignment · V8
• ECMAScript feature: Logical assignment operators | 2ality