Destructureren en verspreiden

Twee syntaxis van broers en zussen uit dezelfde familie, geïntroduceerd door ES6 en nu dagelijks brood voor iedereen die moderne JS schrijft:

Destructurering: extraheer meerdere waarden uit arrays/objecten in één lijn.
Spread ...: "verspreidt" een array of een object binnen een andere.

Samen maken ze de code veel beknopter en leesbaarder.

Object destructureren

Lees hardop: "maak de constanten nome en eta met de waarden van de gelijknamige eigenschappen van utente".

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

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

Hernoemen

Voeg : newName toe na de sleutel:

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

Standaardwaarde

Als de eigenschap ontbreekt (of undefined is), wordt de standaardwaarde gebruikt:

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

Array-destructurering

Het werkt via positie:

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']

Verspreid over arrays

...arr "verspreidt" de elementen:

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]

Verspreid over voorwerpen

Latere sleutels overschrijven eerdere - fundamenteel voor onveranderlijke updates:

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 }

Probeer het

Oefening#js.m3.l3.e1

Pogingen: 0Laden…

Gegeven `user = { naam: 'Marco', leeftijd: 34, stad: 'Torino' }`, gebruik destructurering om alleen `naam` en `stad` in twee constanten te extraheren en `\`${naam} di ${stad}\`` te retourneren (moet gelijk zijn aan 'Marco di Torino').

Editor laden…

Toon hint

const {naam, stad } = gebruiker; vervolgens een letterlijke sjabloon met de twee waarden.

Oplossing beschikbaar na 3 pogingen

Oefening beoordelen

Oefening#js.m3.l3.e2