試一試
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 |
瀏覽器相容性
載入中…