JavaScript 逻辑赋值运算符

摘要：在本教程中，您将了解 JavaScript 逻辑赋值运算符，包括逻辑或赋值运算符 (||=)、逻辑与赋值运算符 (&&=) 和空值合并赋值运算符 (??=)。

ES2021 引入了三个逻辑赋值运算符，包括

• 逻辑或赋值运算符 (||=)
• 逻辑与赋值运算符 (&&=)
• 空值合并赋值运算符 (??=)

下表显示了逻辑赋值运算符的等效项

逻辑或赋值运算符

逻辑或赋值运算符 (||=) 接受两个操作数，如果左操作数为假值，则将右操作数赋值给左操作数

x ||= y

在此语法中，||= 运算符仅在 x 为假值时才将 y 赋值给 x。例如

let title;
title ||= 'untitled';

console.log(title);Code language: JavaScript (javascript)

输出

untitled

在此示例中，title 变量为 undefined，因此为假值。由于 title 为假值，因此 ||= 运算符将 'untitled' 赋值给 title。输出如预期所示为 untitled。

查看另一个示例

let title = 'JavaScript Awesome';
title ||= 'untitled';

console.log(title);Code language: JavaScript (javascript)

输出

'JavaScript Awesome'Code language: JavaScript (javascript)

在此示例中，title 为 'JavaScript Awesome'，因此为真值。因此，逻辑或赋值运算符 (||=) 不会将字符串 'untitled' 赋值给 title 变量。

逻辑或赋值运算符

x ||= y

等效于以下使用 逻辑或运算符 的语句

x || (x = y)

与逻辑或运算符类似，逻辑或赋值运算符也会短路。这意味着逻辑或赋值运算符仅在 x 为假值时执行赋值。

以下示例使用逻辑赋值运算符在搜索结果元素为空时显示默认消息

document.querySelector('.search-result').textContent ||= 'Sorry! No result found';Code language: JavaScript (javascript)

逻辑与赋值运算符

逻辑与赋值运算符仅在 x 为真值时才将 y 赋值给 x

x &&= y;

逻辑与赋值运算符也会短路。这意味着

x &&= y;

等效于

x && (x = y);

以下示例使用逻辑与赋值运算符在姓氏为真值时更改 person 对象的姓氏

let person = {
    firstName: 'Jane',
    lastName: 'Doe',
};

person.lastName &&= 'Smith';

console.log(person);Code language: JavaScript (javascript)

输出

{firstName: 'Jane', lastName: 'Smith'}Code language: CSS (css)

空值合并赋值运算符

空值合并赋值运算符仅在 x 为 null 或 undefined 时才将 y 赋值给 x

x ??= y;

它等效于以下使用 空值合并运算符 的语句

x ?? (x = y);

以下示例使用空值合并赋值运算符将缺失的属性添加到对象

let user = {
    username: 'Satoshi'
};
user.nickname ??= 'anonymous';

console.log(user);Code language: JavaScript (javascript)

输出

{username: 'Satoshi', nickname:'anonymous'}Code language: CSS (css)

在此示例中，user.nickname 为 undefined，因此为空值。空值合并赋值运算符将字符串 'anonymous' 赋值给 user.nickname 属性。

下表说明了逻辑赋值运算符的工作原理

总结

• 逻辑或赋值 (x ||= y) 运算符仅在 x 为假值时才将 y 赋值给 x。
• 逻辑与赋值 (x &&= y) 运算符仅在 x 为真值时才将 y 赋值给 x。
• 空值合并赋值 (x ??= y) 运算符仅在 x 为空值时才将 y 赋值给 x。