Destrutturazione degli array in

Informazioni su Destrutturazione degli array

La destrutturazione di un array è un modo conciso per estrarre valori da un array. La sua sintassi è simile a quella di un'espressione letterale di array, ma compare a sinistra dell'assegnazione invece che a destra.

const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
const [french80, french90, french100] = frenchNumbers;

french80;
// => 'quatre-vingts'
french90;
// => 'quatre-vingt-dix'
french100;
// => 'cent'

Riassegnazione

Dato che le variabili vengono associate ai valori dell'array in base alla posizione, la sintassi di destrutturazione permette di assegnare o riassegnare più variabili in un'unica espressione.

let [a, b] = ['world', 'hello'];
[b, a] = [a, b];

a;
// => 'hello'
b;
// => 'world'

Funziona anche con gli array annidati.

let [a, b, c] = ['orange', 'purple', 'green'];
[[a, b], c] = [[c, a], b];

a;
// => 'green'
b;
// => 'orange'
c;
// => 'purple'

Saltare dei valori

La sintassi permette di saltare dei valori durante l'abbinamento, per esempio per ignorare posizioni specifiche dell'array. Nell'esempio qui sotto, immagina di avere una funzione getUserInfo che restituisce un array contenente il nome, il cognome e l'indirizzo di una persona.

getUserInfo();
// => ["Valerie", "Noir", "Sunny Lane 523"]

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

Scartare dei valori

Non è nemmeno necessario che l'assegnazione usi tutti i valori.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

Estrarre più valori di quelli disponibili

È persino possibile estrarre più valori di quanti ne contenga l'array: alle variabili rimaste verrà assegnato undefined. Può essere utile quando non si sa in anticipo quanti valori ci saranno.

const pickAtLeastOne = ['first choice', 'second choice'];
const [first, second, third, fourth] = pickAtLeastOne;

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

Valori predefiniti

L'assegnazione tramite destrutturazione di array può fornire dei valori predefiniti nel caso in cui non ce ne sia nessuno nell'array di origine.

const [first, second, third = 'none selected', fourth] = pickAtLeastOne;

third;
// => 'none selected'

fourth;
// => undefined

Concetti correlati

object-destructuring rest-and-spread