逻辑或赋值 (||=)

Baseline 已广泛支持

此功能已成熟,并可在许多设备和浏览器版本上使用。自 2020 年 9 月起,所有浏览器均已提供此功能。

逻辑或赋值 (||=) 运算符只在左侧操作数为假值时才评估右侧操作数并将其赋值给左侧。

试一试

const a = { duration: 50, title: "" };

a.duration ||= 10;
console.log(a.duration);
// Expected output: 50

a.title ||= "title is empty.";
console.log(a.title);
// Expected output: "title is empty."

语法

js
x ||= y

描述

逻辑或赋值会短路,这意味着 x ||= y 等同于 x || (x = y),不同之处在于表达式 x 只会被评估一次。

由于逻辑或运算符的短路特性,如果左侧不是假值,则不会执行赋值。例如,以下代码不会抛出错误,尽管 xconst

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

以下代码也不会触发 setter

js
const x = {
  get value() {
    return 1;
  },
  set value(v) {
    console.log("Setter called");
  },
};

x.value ||= 2;

事实上,如果 x 不是假值,y 根本不会被评估。

js
const x = 1;
x ||= console.log("y evaluated");
// Logs nothing

示例

设置默认内容

如果“lyrics”元素为空,则显示默认值

js
document.getElementById("lyrics").textContent ||= "No lyrics.";

在这里,短路尤其有利,因为元素不会不必要地更新,也不会引起不必要的副作用,例如额外的解析或渲染工作,或焦点丢失等。

注意:请注意您正在检查的 API 返回的值。如果返回空字符串(一个假值),则必须使用||=,以便显示“No lyrics.”而不是空白。但是,如果 API 在内容为空时返回nullundefined,则应改用??=

规范

规范
ECMAScript® 2026 语言规范
# sec-assignment-operators

浏览器兼容性

另见