Corsi on-line

JavaScript e destrutturazione: ciclare un array con for-of

ECMAScript 6, cioè lo standard su cui si basano le più recenti specifiche del linguaggio JavaScript, introduce il concetto di destrutturazione (destructuring); esso si presenta come una modalità semplificata per estrarre più valori da dati archiviati all’interno di array e oggetti, possibilmente annidati. La destrutturazione potrà essere utilizzata in tutte quelle applicazioni che ricevono dati e presenta una sintassi relativamente semplice.

es6Per la destrutturazione applicata agli oggetti possiamo quindi basarci su un modello come il seguente:

const obj = { primo: 'Homer', secondo: 'Bart' };
const {primo: p, secondo: s} = obj;
// quindi 
// p = 'Homer'; s = 'Bart'

Mentre per gli array abbiamo:

const iterable = ['Homer', 'Bart'];
const [a, b] = iterable;
// quindi 
// a = 'Homer'; b = 'Bart'

Parlando di array è logico pensare immediatamente ad una possibile applicazione di tale procedura nell’ambito dei cicli d’iterazione. A questo proposito sappiamo che il metodo forEach() ci consente di iterare gli elementi che costituiscono un array, nel contempo esso permette di ottenere gli indici associati a ciascun elemento:

var arr = ['Homer', 'Bart', 'Lisa'];
    arr.forEach(function (elem, index) {
        console.log('index = '+index+', elem = '+elem);
    });
    // il risultato sarà il seguente:
    // index = 0, elem = Homer
    // index = 1, elem = Bart
    // index = 2, elem = Lisa

ECMAScript 6 introduce però alcune ulteriori novità che possono essere utilizzate in combinazione con la destrutturazione: il ciclo for-of e nuovi metodo di iterazione; tra questi ultimi è particolarmente interessante il nuovo metodo entries() per gli array. L’esempio seguente mostra come utilizzare tutte queste feature insieme nell’iterazione di un array:

const arr = ['Homer', 'Bart', 'Lisa'];
    for (const [index, elem] of arr.entries()) {
        console.log(`index = ${index}, elem = ${elem}`);
    }

Il risultato dell’esecuzione di questo script sarà identico a quello del codice precedente basato su forEach(), si noti però come con for-of e arr.entries() (il cui compito è quello di restituire un dato iterabile) sia stato utilizzato un pattern per la destrutturazione ([index, elem]) che ha consentito un accesso diretto ad entrambi i componenti di ciascuna copia indice/elemento dell’array.

Post correlati
I più letti del mese
Tematiche