Logisches ODER-Zuweisung (||=)
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.
Der logische ODER-Zuweisungsoperator (||=
) wertet nur den rechten Operanden aus und weist den linken Operanden zu, wenn der linke Operand falsy ist.
Probieren Sie es aus
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."
Syntax
x ||= y
Beschreibung
Die logische ODER-Zuweisung short-circuits, was bedeutet, dass x ||= y
äquivalent zu x || (x = y)
ist, mit der Ausnahme, dass der Ausdruck x
nur einmal ausgewertet wird.
Es wird keine Zuweisung durchgeführt, wenn die linke Seite nicht falsy ist, aufgrund des Short-Circuiting des logischen ODER-Operators. Zum Beispiel führt das Folgende nicht zu einem Fehler, obwohl x
als const
deklariert ist:
const x = 1;
x ||= 2;
Auch das Folgende würde den Setter nicht auslösen:
const x = {
get value() {
return 1;
},
set value(v) {
console.log("Setter called");
},
};
x.value ||= 2;
Tatsächlich wird y
überhaupt nicht ausgewertet, wenn x
nicht falsy ist.
const x = 1;
x ||= console.log("y evaluated");
// Logs nothing
Beispiele
Standardinhalt setzen
Wenn das Element „lyrics“ leer ist, wird ein Standardwert angezeigt:
document.getElementById("lyrics").textContent ||= "No lyrics.";
Hier ist das Short-Circuiting besonders vorteilhaft, da das Element nicht unnötig aktualisiert wird und keine unerwünschten Nebenwirkungen wie zusätzliche Parsing- oder Rendering-Arbeiten oder Verlust des Fokus verursacht werden.
Hinweis:
Achten Sie auf den Wert, der von der API zurückgegeben wird, gegen die Sie testen. Wenn ein leerer String zurückgegeben wird (ein falsy Wert), muss ||=
verwendet werden, damit „No lyrics.“ angezeigt wird, anstatt eines leeren Bereichs. Wenn die API jedoch null
oder undefined
im Falle von leerem Inhalt zurückgibt, sollte ??=
verwendet werden.
Spezifikationen
Specification |
---|
ECMAScript® 2025 Language Specification # sec-assignment-operators |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Logical OR assignment ( x ||= y ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support