逻辑或赋值(||=)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

逻辑或赋值(x ||= y)运算仅在 x值时为其赋值。

尝试一下

语法

js
expr1 ||= expr2

描述

逻辑或的短路运算意味着 x ||= y 与下式等价:

js
x || (x = y);

如果左操作数不为假值,则由于逻辑或运算符的短路运算,不进行赋值操作。例如,由于 xconst(常量),以下式子不会抛出错误:

js
const x = 1;
x ||= 2;

也不会触发 setter 函数:

js
const x = {
  get value() {
    return 1;
  },
  set value(v) {
    console.log("调用了 setter");
  },
};

x.value ||= 2;

实际上,如果 x 为真值,则根本不会对 y 求值。

js
const x = 1;
x ||= console.log("y 进行了求值");
// 什么都不会输出

示例

设定默认内容

当“lyrics”元素为空时,则显示默认值:

js
document.getElementById("lyrics").textContent ||= "没有歌词。";

在这里,短路运算特别有用,因为元素不会产生不必要的更新,也不会引起诸如额外的解析、渲染、失去焦点等副作用。

注意:请注意检查 API 返回的值。如果返回的是空字符串(是值),则必须使用 ||=,以显示“没有歌词。”而不是空内容。然而,如果接口返回 nullundefined,则应该使用 ??=(空值合并赋值)运算符代替空白内容。

规范

Specification
ECMAScript Language Specification
# sec-assignment-operators

浏览器兼容性

BCD tables only load in the browser

参见