Destructurare și răspândire

Două sintaxe de frați din aceeași familie, introduse de ES6 și acum zilnic pâine pentru oricine scrie JS modern:

Destructurare: extrage mai multe valori din matrice/obiecte într-o singură linie.
Răspândește ...: „împrăștie” o matrice sau un obiect în interiorul altuia.

Împreună, fac codul mult mai concis și mai ușor de citit.

Destructurarea obiectelor

Citiți cu voce tare: "creați constantele nome și eta cu valorile proprietățile cu același nume ale utente".

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

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

Redenumire

Adăugați : newName după cheie:

const { nome: n, eta: years } = utente;
// creates the variables n and years

Valoare implicită

Dacă proprietatea lipsește (sau este undefined), se utilizează implicit:

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

Destructurarea matricei

Funcționează după poziție:

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

const [, , terzo] = colori; // skips the first two
const [a, ...resto] = colori; // a = 'rosso', resto = ['verde','blu']

Răspândit pe matrice

...arr „împrăștie” elementele:

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

const unione = [...a, ...b]; // [1, 2, 3, 4, 5]
const copia = [...a]; // shallow copy of a
const conPiu = [0, ...a, 4]; // [0, 1, 2, 3, 4]

Răspândiți pe obiecte

Tastele ulterioare le overridesc pe cele anterioare - fundamentale pentru actualizările imuabile:

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

const aggiornato = { ...utente, eta: 29 };
// { nome: 'Anna', eta: 29 } — utente was NOT touched

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

Încearcă

Exercițiu#js.m3.l3.e1

Încercări: 0Se încarcă…

Dat `user = { nume: 'Marco', vârsta: 34, oraș: 'Torino' }`, utilizați destructurarea pentru a extrage doar `nume` și `oraș` în două constante și returnați `\`${name} di ${city}\`` (trebuie să fie egal cu 'Marco di Torino').

Se încarcă editorul...

Afișează indiciu

const { nume, oraș } = utilizator; apoi un șablon literal cu cele două valori.

Soluție disponibilă după 3 încercări

Exercițiu de revizuire

Exercițiu#js.m3.l3.e2