Spread- und Rest-Operatoren
Die drei Punkte ... haben zwei Aufgaben. Spread erweitert ein iterierbares Objekt zu einzelnen Positionen; Rest sammelt die ?brigen Werte. Die Position im Ausdruck entscheidet ?ber die Aufgabe.
Werte mit Spread erweitern
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
console.log(menu.join(" / "));
Die Ausgabe lautet genau tea / mint / lemon. extras wird nicht als ein Element eingef?gt; seine Elemente werden in das neue Array erweitert.
Arrays kopieren
const extras = ["mint", "lemon"];
const copy = [...extras];
copy[0] = "ginger";
console.log(extras[0]);
console.log(copy[0]);
copy ist ein neues ?u?eres Array. Eine ?nderung daran ?ndert extras nicht. Das ist eine flache Kopie: verschachtelte Objekte oder Arrays bleiben gemeinsam referenziert.
Object Spread
const order = { guest: "lida", drink: "tea" };
const withSize = { ...order, size: "regular" };
console.log(order.size);
console.log(withSize.size);
order hat kein size, withSize schon. Object Spread ist ebenfalls flach; verschachtelte Werte werden nicht unabh?ngig kopiert.
Rest sammelt ?briges
const menu = ["tea", "mint", "lemon"];
const [first, ...remaining] = menu;
const order = { guest: "lida", drink: "tea" };
const { guest, ...details } = order;
console.log(first, remaining, details);
first ist tea, remaining ist ["mint", "lemon"], und details enth?lt drink, aber nicht guest. Das kontrastiert nur kurz mit der vorherigen Destructuring-Lektion.
Restparameter
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Spread and Rest</title></head>
<body>
<p id="result"></p>
<script>
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
function list(first, ...others) {
return [first, ...others].join(" / ");
}
document.getElementById("result").textContent = list(...menu);
</script>
</body>
</html>
Bei list(...menu) wird am Aufruf erweitert. In function list(first, ...others) sammelt Rest zus?tzliche Argumente in einem echten Array. Sichtbar ist tea / mint / lemon.
Die Tabelle macht den Unterschied deutlich: Die Punkte bleiben gleich, doch ihre Position entscheidet zwischen Erweitern und Sammeln.
📊 Gleiche Punkte, andere Richtung
| Position | Bedeutung | Beispiel |
|---|---|---|
| Array, Object oder Funktionsaufruf | Spread erweitert | [..., extras], { ...order }, list(...menu) |
| Bindung oder Parameter | Rest sammelt | const [first, ...remaining] = menu, function list(first, ...others) |
Kurze ?bung
?ndere copy[0] und vergleiche es mit extras[0]. F?ge ein verschachteltes Objekt hinzu und beobachte die flache Kopie.
H?ufige Fehler
Setze einen Restparameter nicht in die Mitte, erwarte keine tiefe Kopie und verwechsle Spread nicht mit Rest.
Zusammenfassung
Spread steht in Array, Object oder Funktionsaufruf; Rest steht in einer Bindung oder einem Parameter. Die Zeichen sind gleich, die Richtung ist verschieden.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt