逻辑或赋值（||=）

基线广泛可用

自 2020年9月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

逻辑或赋值（x ||= y）运算仅在 x 为假值时为其赋值。

本文内容

尝试一下

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."

语法

expr1 ||= expr2

描述

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

x || (x = y);

如果左操作数不为假值，则由于逻辑或运算符的短路运算，不进行赋值操作。例如，由于 x 为 const（常量），以下式子不会抛出错误：

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”元素为空时，则显示默认值：

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

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

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

规范

ECMAScript® 2027 Language Specification
# sec-assignment-operators

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

参见

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年7月16日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题