Destrukturyzacja i spread

Dwie składnie należące do tej samej rodziny, wprowadzone w standardzie ES6, które stały się chlebem powszednim każdego, kto pisze nowoczesny JS:

Destructuring (Destrukturyzacja): wyciągaj wiele wartości z tablic/obiektów w jednej linii.
Spread ... (Rozszczepienie/Rozwijanie): „rozsmaruj” tablicę lub obiekt wewnątrz innego.

Razem czynią one kod znacznie bardziej zwięzłym i czytelnym.

Destrukturyzacja obiektów

Mówiąc prosto: „utwórz stałe nome i eta z wartościami z właściwości o tych samych nazwach w obiekcie utente”.

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

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

Zmiana nazwy zmiennej

Dodaj : nowaNazwa po kluczu:

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

Wartość domyślna

Jeśli właściwość nie istnieje (lub wynosi undefined), używana jest wartość domyślna:

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

Destrukturyzacja tablic

Działa na podstawie pozycji:

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 na tablicach

Zapis ...arr „rozsmarowuje” elementy:

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 na obiektach

Kolejne klucze nadpisują poprzednie – jest to kluczowe przy niemutowalnych aktualizacjach:

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 }

Spróbuj sam

Ćwiczenie#js.m3.l3.e1

Próby: 0Ładowanie...

Mając obiekt `user = { name: 'Marco', age: 34, city: 'Torino' }`, wyciągnij za pomocą destrukturyzacji tylko właściwości `name` i `city` do dwóch stałych i zwróć `\`${name} di ${city}\`` (powinno dać wynik 'Marco di Torino').

Ładowanie edytora...

Pokaż wskazówkę

const { name, city } = user; a następnie szablon stringa (template literal) z obiema wartościami.

Rozwiązanie dostępne po 3 próbach

Ćwiczenie powtórzeniowe

Ćwiczenie#js.m3.l3.e2