Homa Page di Daniele Franceschini

Introduzione agli Array Javascript

• 
• 

Valutazione attuale:  / 1

ScarsoOttimo 

Dettagli

Categoria principale: Code Snippets

Pubblicato Mercoledì, 08 Dicembre 2010 09:32

Visite: 560

Come per gli oggetti anche gli Array hanno molteplici modi per essere creati ne elenco gli esempi:

var arr = new Array(); //Attraverso l'operatore new, esattamente come per gli oggetti.
//In questo caso l'oggetto arr è un array vuoto

var arr = new Array(1,2,3,4,"ciao a tutti"); //Passando n parametri, anche di tipo diverso,
//al costruttore

var arr = Array(5); //Passando un singolo parametro numerico, specifico il numero di 
//elementi che compongono l'array.

Questo ultimo modo di creare l'array provoca 2 cose:

• tutti gli elementi dell'array sono valorizzati con "undefined"

• la proprietà length viene impostata con il valore specificato

Niente di grave, ma è bene tenere presente queste 2 cose per capire meglio eventuali errori.
Un aspetto da notare è che se voglio creare un array con un singolo elemento, non devo assolutamente utilizzare il terzo modo, in quanto un singolo parametro numerico passato al costruttore, ribadisco che rappresenta il numero degli elementi e non il valore del singolo elemento che voglio nell'array. Ricordare anche questa precisazione può essere utile per capire meglio eventuali errori.

var arr = [1,2,'ciao',true, 4.23] //Infine l'ultimo caso è attraverso i letterali array

In questo ultimo caso posso mettere dentro i letterali array anche elementi che siano altri letterali oggetto o letterali array.

Per accedere sia in scrittura che in lettura, ad un elemento dell'array basta indicare fra perentesi quadre, l'indice  dell'elemento desiderato. Preciso che gli indici degli array iniziano da zero.

var value = arr[0]; //Metto il primo elemento dell'array dentro la variabile value

Gli array in javascript sono abbastanza potenti in quanto sono molto flessibili, riporto alcune caratteristiche.

• Possono avere un qualsiasi numero di elementi
• Il numero di elemnti può variare in qualsiasi momento
• Si può aggiungere un nuovo elemento semplicemente assegnandone una valore ad esempio:

var arr = [1,2,3];
alert("l'array contiene " + arr.length + " elementi");
arr[3] = 4;
alert("l'array contiene " + arr.length + " elementi");

• gli indici degli array non devono essere necessariamente contigui
• la memoria viene allocata solo per gli elementi effettivamente presenti nell'array.

Una delle proprità degli array javascript è lenght, la quale ha delle caratteristiche interessanti:

1. Indica il numero di elementi presenti nell'array
2. E' aggiornata automaticamente dall'interprete
3. A questa proprietà è possibile accedere anche in scrittura, il che permette di ridefinere le dimensioni della'array. Ad esempio:

//crea un array di 8 elementi
var x = new Array(1,2,3,4,5,6,7,8);
alert(x);
//sovrascrivo la proprietà length
x.length = 5;
//adesso il mio array ha solo 5 elementi
alert(x);
//sovrascrivo nuovamente la proprietà
x.length = 8;
//adesso l'array ha 8 elementi di cui gli ultimi 3 con valore undefined
alert(x);

Qualora si intendesse eliminare elementi da un array, l'unico modo per poterlo fare è proprio attraverso questa proprietà.

Un Array, essendo un oggetto, ha molti metodi a disposizione per manipolare i suoi elementi. Sotto faccio un piccolo riepilogo.

join()
join() converte tutti gli elementi in una stringa e li concatena fra loro:

var x = [1,2,3];
var s = x.join();
alert(s);
//Attraverso l'operatore opzionale posso passare una stringa che funge da separatore fra gli elementi
s = x.join(" - ");
alert(s);

reverse()
reverse(), ovviamente inverte l'ordine degli elementi:

var x = [1,2,3];
var s = x.reverse();
//l'array è stato capovolto
alert(s);

sort()
sort() mette ordine, ma come per reverse(), non crea un nuovo array ordinato ma sposta gli elementi nelle nuove posizioni.
Questo metodo, se usato senza parametri effettua un ordinamento alfabetico. Per tutti gli altri ordinamenti, è necessario passare una funzione a questo metodo :-o
Questa funzioni decide quale dei 2 suoi argomenti deve essere posizionato per primo. Se il primo argomento deve comparire prima del secondo, la funzione deve restituire un numero inferiore a zero, altrimenti se deve comparire dopo il secondo, la funzione deve restituire un numero superiore a zero. Se la funzione restituisce zero vuol dire che non c'è niente da fare. Un esempio è forse più chiaro:

var x = [11,44,88,33];
alert('Array attuale ' + x);
//ordinamento predefinito
x.sort();
alert('Ordinamento predefinito ' + x);

x.sort(function(a,b){
    return a - b;
}
);
//ordinamento crescente
alert('Ordinamento crescente ' + x);

x.sort(function(a,b){
    return b - a;
}
);
//ordinamento decrescente
alert('Ordinamento decrescente ' + x);
//per un ordinamento alfabetico che non tenga in considerazione le maiuscole basta rimpiazzare il confronto con questa riga
//return a.toString().toLowerCase() - b.toString().toLowerCase();

slice()
slice() estrae da un array dagli elementi e restituisce un nuovo array. Questo metodo è molto utile per lavorare con gli array. Riporto qui sotto alcuni esempi:

var x = [1,2,3,4,5];
alert(x.slice(0,3));
alert(x.slice(3));
var b = x.slice(1,-1);
alert(b);
alert(x);

splice()
splice() a differnza di slice() modifica il contenuto dell'array e non restituisce un nuovo array.
Sotto una dimostrazione:

var x = [1,2,3,4,5];
alert(x.splice(4));
alert(x.splice(1,2));
alert(x);

concat()
concat permette di unire 2 array, lasciando invariato il loro contenuto, e restituisce un nuovo array come risultato dell'unione.

var pari = [2, 4];
var dispari = [1, 3];
var numeri = pari.concat(dispari);
document.write(numeri.sort());

push() e pop()
Permettono di lavorare con gli array come fossero degli stack, il metodo push aggiunge un elemento alla fine di un array e restituisce l'ultimo valore aggiunto. pop() invece elimina l'ultimo elemento aggiunto all'array.

var stack = [];
stack.push(1,2,3);
alert(stack)
stack.pop();
alert(stack);
stack.push([3,4])
alert(stack);
stack.pop();
alert(stack);
stack.pop();
alert(stack);

unshift() e shift()
Va subito detto che questi 2 metodi non sono compatibili con IE fino alla versione 8, speriamo che la versione 9 sia pronta per questi 2 metodini. Purtroppo Microsoft si distingue sempre …
Per tutti gli altri browsers siamo tranquilli. Questi 2 metodi si comportano in modo opposto rispetto a  push() e pop(), unshift() aggiunge uno o più elementi all’inizio dell’array spostando gli altri elementi verso indici più alti e restituisce il primo elemento dell’array. shift() fa il contrario, ossia elemina dall’array il primo elemento spostando gli altri verso il basso.

var x = [];
x.unshift(1);
alert(x);
x.unshift(2);
alert(x);
x.shift();
alert(x);

• < Prec
• Succ >