试一试
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 只会被评估一次。
由于逻辑或运算符的短路特性,如果左侧不是假值,则不会执行赋值。例如,以下代码不会抛出错误,尽管 x 是 const
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 在内容为空时返回null或undefined,则应改用??=。
规范
| 规范 |
|---|
| ECMAScript® 2026 语言规范 # sec-assignment-operators |
浏览器兼容性
加载中…