EMZETT.
Login

Emzett Wiki

JavaScript: Destructuring, Spread und Rest

Properties1
tagsprogrammiersprachen, javascript

4 Min. Lesezeit

Kurz: Seit ES2015 gibt es kompakte Schreibweisen, um Daten aus Arrays und Objekten zu entpacken und zu verteilen.

Teil des Kurses JavaScript

Kapitel 16 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Seit ES2015 gibt es kompakte Schreibweisen, um Daten aus Arrays und Objekten zu entpacken und zu verteilen.

Array-Destructuring

const [a, b, c] = [10, 20, 30];
console.log(a, b, c);
const [erstes, , drittes] = ["x", "y", "z"];     // Lücke überspringt
console.log(erstes, drittes);
const [kopf, ...rest] = [1, 2, 3, 4];
console.log(kopf, rest);
const [p = 5, q = 6] = [1];                      // Standardwerte
console.log(p, q);
let m = 1, n = 2;
[m, n] = [n, m];                                 // Tauschen
console.log(m, n);

Ausgabe:

10 20 30
x z
1 [ 2, 3, 4 ]
1 6
2 1

Objekt-Destructuring

const nutzer = { name: "Mia", alter: 17, stadt: "Köln" };
const { name, alter } = nutzer;
console.log(name, alter);
const { stadt: ort, land = "DE" } = nutzer;      // umbenennen + Standardwert
console.log(ort, land);
const { name: n1, ...uebrige } = nutzer;
console.log(n1, uebrige);

Ausgabe:

Mia 17
Köln DE
Mia { alter: 17, stadt: 'Köln' }

Verschachtelt

const antwort = { daten: { nutzer: { id: 7, tags: ["a", "b"] } } };
const { daten: { nutzer: { id, tags: [ersterTag] } } } = antwort;
console.log(id, ersterTag);

Ausgabe:

7 a

In Funktionsparametern

function zeige({ name, alter = 0 }, [x, y] = [0, 0]) {
  return `${name} (${alter}) bei ${x}/${y}`;
}
console.log(zeige({ name: "Tom" }));
console.log(zeige({ name: "Mia", alter: 17 }, [3, 4]));

Ausgabe:

Tom (0) bei 0/0
Mia (17) bei 3/4

Spread: Verteilen mit …

const a = [1, 2], b = [3, 4];
console.log([...a, ...b, 5]);
console.log(Math.max(...a, ...b));
const o1 = { x: 1, y: 2 }, o2 = { y: 20, z: 3 };
console.log({ ...o1, ...o2 });                   // spätere überschreiben
console.log({ ...o1, y: "neu" });
console.log([..."abc"], [...new Set([1, 1, 2])]);

Ausgabe:

[ 1, 2, 3, 4, 5 ]
4
{ x: 1, y: 20, z: 3 }
{ x: 1, y: 'neu' }
[ 'a', 'b', 'c' ] [ 1, 2 ]

Rest: Sammeln mit …

Rest sieht gleich aus, steht aber auf der Empfängerseite (Parameterliste oder Destructuring) und sammelt den Rest:

function erster(a, ...andere) { return [a, andere]; }
console.log(erster(1, 2, 3, 4));

Ausgabe:

[ 1, [ 2, 3, 4 ] ]

Praktische Muster

// Eigenschaft aus Objekt entfernen (ohne es zu verändern)
const { passwort, ...oeffentlich } = { name: "Mia", passwort: "geheim", rolle: "user" };
console.log(oeffentlich);
 
// Element in Liste ändern, ohne das Original zu verändern
const liste = [1, 2, 3];
const neu = [...liste.slice(0, 1), 99, ...liste.slice(2)];
console.log(liste, neu);
 
// Mehrere Rückgabewerte
const [min, max] = [Math.min(4, 2, 9), Math.max(4, 2, 9)];
console.log(min, max);
 
// Über Einträge iterieren
for (const [key, { preis }] of Object.entries({ a: { preis: 3 }, b: { preis: 5 } })) console.log(key, preis);

Ausgabe:

{ name: 'Mia', rolle: 'user' }
[ 1, 2, 3 ] [ 1, 99, 3 ]
2 9
a 3
b 5

Merke

  • const [a, b] = array und const { x, y } = objekt entpacken Werte
  • Umbenennen (x: neu), Standardwerte (x = 1), Rest (...rest)
  • Spread ... verteilt Arrays/Objekte beim Erzeugen oder Aufrufen
  • Rest ... sammelt übrige Werte beim Empfangen
  • Mit Spread änderst du Daten, ohne das Original zu verändern

Übungsaufgabe

Schreibe eine Funktion, die ein Objekt mit x und y per Destructuring annimmt und {x, y} verschoben um ein Offset zurückgibt, ohne das Original zu verändern.

Quiz zur Selbstkontrolle

= [1, 2, 3]; für rest?

  • [2, 3] (richtig)
  • 2
  • [1, 2]
  • [3]

Weiter im Kurs

Zurück: Objekte

Weiter: Map, Set und WeakMap

Alle Kapitel: JavaScript im Überblick

Graphansicht

Backlinks