Pillole di codice #7 Array di Oggetti in Javascript

Gli array sono una tipologia di variabile estremamente utile quando si vogliono raggruppare più variabili o oggetti dello stesso tipo all’interno di una lista.

Sono paragonabili agli elenchi (come possono essere le rubriche telefoniche presenti nei nostri smartphone).

Infatti ogni elemento di una nostra ipotetica rubrica contiene un nome ed un numero di telefono e può essere rappresentata nel seguente modo:

var rubrica = [];
//se poi vado a vedere gli oggetti presenti al suo interno posso vedere che....
rubrica[0] contiene un numero di telefono ed un nome 
rubrica[1] contiene un numero di telefono ed un nome 
rubrica[2] contiene un numero di telefono ed un nome 
...
rubrica[N] contiene un numero di telefono ed un nome 

Così funziona anche nel mondo del software.

Come ogni lista posso aggiungere elementi, toglierli o effettuare delle operazioni su di loro.

Per aggiungerli ci sono 2 metodi. Il primo (quello illustrato nella pillola) consiste nell’usare la funzione push(OGGETTO). Push inserirà alla fine della nostra lista l’oggetto specificato.

Il secondo metodo per inserire oggetti in una lista è il seguente

array[K]= oggetto;

Bisogna però fare attenzione, in quanto se il valore di K è errato rischiamo di sovrascrivere dei dati, o di generare errori (ad esempio inserire un oggetto in posizione 10 all’interno di un array vuoto genera un errore).

Esiste inoltre il metodo per rimuovere elementi dagli array. Questo metodo è splice(), e come si può vedere nella pillola si utilizza secondo la seguente sintassi:

array.splice(INDICE, LUNGHEZZA); //rimuovo gli oggetti per un numero di [LUNGHEZZA] partendo dall'indice [INDICE]

Bisogna sempre ricordare che gli indici degli array sono in base 0 (quindi il primo elemento è 0, non 1!) e che length ci restituisce il numero di elementi e non l’indice massimo.

Esiste inoltre una piccola precisazione che voglio fare sull’esercizio presente nella pillola. La parte finale in cui rimuovo gli elementi potrebbe essere scritta meglio, in quanto attualmente contiene un piccolo bug.

Infatti, controllo la posizione per rimuovere gli elementi ciclando gli indici da 0 a length, ma così facendo compio un piccolo errore.

Immaginiamo quindi di avere la seguente lista di oggetti (quelli marchiati con * sono fuori schermo)

[A*][B*][C][D*][E]

Ciclando da 0 a length mi trovo in questa situazione

Ciclo i=0, trovo A* e la rimuovo, si genera quindi un nuovo array composto da
[B*][C][D*][E]
Ciclo i=1, non controllo B* che si trova in posizione 0 adesso, ma vado a controllare C
Ciclo i=2, trovo D* lo rimuovo, si genera quindi un nuovo array composto da
[B*][C][E]
FINE CICLO

Come si può vedere facendo semplicemente la prima ciclata possono esistere casi in cui non vengono eliminati tutti gli elementi indesiderati dall’array. La soluzione che solitamente si adotta in questi casi è “ciclare al contrario” partendo quindi dall’elemento in posizione length-1 fino ad arrivare a 0. Partendo quindi dall’array A*-E specificato prima si ottiene:

Ciclo i=4, trovo E e va bene così
[A*][B*][C][D*][E]
Ciclo i=3, trovo D*, lo rimuovo, si genera quindi un nuovo array composto da 
[A*][B*][C][E]
Ciclo i=2, trovo C e va bene così
[A*][B*][C][E]
Ciclo i=1, trovo B*, lo rimuovo, si genera quindi un nuovo array composto da
[A*][C][E]
Ciclo i=0, trovo A*, lo rimuovo, si genera quindi un nuovo array composto da
[C][E]
FINE CICLO

In questo caso con un singolo ciclo pulisco completamente l’array senza tralasciare nessun elemento.

Ecco il video della pillola

Compila il form qui sotto per ricevere subito nella tua casella email i files della lezione.