Destrukturierung und Spread

Zwei syntaktische Features aus derselben Familie, die durch ES6 eingeführt wurden und heute zum täglichen Brot für jeden gehören, der modernes JS schreibt:

• Destructuring (Destrukturierung): Extrahiere mehrere Werte aus Arrays/Objekten in einer einzigen Zeile.
• Spread ... (Verteilung): „Verteilt“ ein Array oder ein Objekt in ein anderes.

Zusammen machen sie den Code viel prägnanter und lesbarer.

Destrukturierung von Objekten

Einfach ausgedrückt: „Erstelle die Konstanten nome und eta mit den Werten der gleichnamigen Eigenschaften von utente“.

const utente = { nome: 'Anna', eta: 28, ruolo: 'admin' };

const { nome, eta } = utente;
console.log(nome); // 'Anna'
console.log(eta); // 28

Umbenennen

Füge : neuerName nach dem Schlüssel hinzu:

const { nome: n, eta: years } = utente;
// crea le variabili n e years

Standardwert

Wenn die Eigenschaft fehlt (oder undefined ist), wird der Standardwert verwendet:

const { ruolo = 'reader', telefono = 'n/d' } = utente;
// ruolo = 'admin' (presente), telefono = 'n/d' (assente)

Destrukturierung von Arrays

Funktioniert nach Position:

const colori = ['rosso', 'verde', 'blu'];
const [primo, secondo] = colori;
// primo = 'rosso', secondo = 'verde'

const [, , terzo] = colori; // salta i primi due
const [a, ...resto] = colori; // a = 'rosso', resto = ['verde','blu']

Spread bei Arrays

...arr „verteilt“ die Elemente:

const a = [1, 2, 3];
const b = [4, 5];

const unione = [...a, ...b]; // [1, 2, 3, 4, 5]
const copia = [...a]; // copia superficiale di a
const conPiu = [0, ...a, 4]; // [0, 1, 2, 3, 4]

Spread bei Objekten

Nachfolgende Schlüssel überschreiben die vorherigen — grundlegend für unveränderliche (immutable) Aktualisierungen:

const utente = { nome: 'Anna', eta: 28 };

const aggiornato = { ...utente, eta: 29 };
// { nome: 'Anna', eta: 29 } — utente NON è stato toccato

const con = { ...utente, attivo: true };
// { nome: 'Anna', eta: 28, attivo: true }

Probier es aus

Wiederholungsübung