Gli Array in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Un Array() è una tabella di dati che vengono incapsulati secondo un certo criterio in una griglia astratta per un qualsivoglia scopo, vediamo la sintassi:

var esempio = new Array();
Per leggere un i dati memorizzati in questo particolare tipo di variabile si possono seguire due strade, la prima consiste nel dichiarare i singoli dati su più righe passando tra parentesi quadre un numerico intero univoco identificativo di ogni singole voce, da zero a n:
var esempio = new Array();
    esempio[0] = "primo dato";
    esempio[1] = "secondo dato";
    esempio[2] = "terzo dato";
e così via, il secondo consiste nel passare i dati tra parentesi come parametri dell'oggetto:
var esempio = new Array("primo dato", "secondo dato", "terzo dato");
La differenza consiste sostanzialmente in una questione di ordine nel codice, è assurdo pensare di riempire un Array() con 300 dati passandoli come parametri tra parentesi!

Per leggere i dati di un Array() occorre ciclarlo con l'istruzione for(), ipotizziamo il caso precedente:
<script language="javascript">
 <!--
  var esempio = new Array();
      esempio[0] = "primo dato";
      esempio[1] = "secondo dato";
      esempio[2] = "terzo dato";
          for (var i=0; i<3; i++) {
               document.write(esempio[i] + "<br>");
          }
 //-->
</script>
Per stampare l'output a video ci serviamo come sempre del document.write() passandogli la variabile di tipo Array() associata al contatore [i] del ciclo, ecco l'output di questo esempio:


Lavorando con gli Array() si ha casisticamente l'esigenza di manipolare i dati in maniera diversa da quella nativa, ad esempio ordinando i dati secondo un certo criterio o manipolandoli come una stringa, occupiamoci ora di definire i principali metodi e le proprietà che ci permettono di stabilire questi controlli.

Ordinamento di un Array()

Possiamo decidere di ordinare un Array() in ordine alfabetico grazie al metodo sort(), vediamo un esempio:
<script language="javascript">
 <!--
  var nominativi = new Array();
      nominativi[0] = "Paolo Rossi";
      nominativi[1] = "Gianni Rivera";
      nominativi[2] = "Claudio Gentile";
      nominativi.sort();
          for (var i=0; i<nominativi.length; i++) {
              document.write(nominativi[i] + "<br>");
          }
 //-->
</script>
Nonostante l'ordine stabilito all'atto della creazione dell'Array(), ci troveremo di fronte ad una situazione del genere:


Siamo in questo modo riusciti ad ordinare i dati dell'Array() in ordine alfabetico in considerazione della prima lettera che viete trovata nella lettura delle singole stringhe rappresentanti i valori associati ai singoli indici dell'Array(), per ordinarlo in base al cognome, ovvero l'iniziale che viene trovata nella stringa subito dopo lo spazio tra nome e cognome, dobbiamo ricorrere a delle particolari funzioni sulle stringhe, argomento non ancora trattato nel corso del manuale, rimando quindi al prossimo capitolo che avrà come oggetto, per l'appunto, le stringhe.

Nel corso dello script analizzato ci siamo trovati di fronte alla proprietà length che, come la traduzione letterale dall'inglese può lasciare ad intendere, calcola la lunghezza: la stessa proprietà può essere applicata anche ad una stringa per contarne i caratteri, nel caso degli Array() viene calcolato il numero di indici presenti, vediamo un esempio:
<script language="javascript">
 <!--
  var frutta = new Array();
      frutta[0] = "Mele";
      frutta[1] = "Pere";
      frutta[2] = "Banane";
          document.write("Ci sono " + frutta.length + " categorie di frutta");
 //-->
</script>
L'output:



Grazie al metodo reverse() possiamo invertire l'ordine di un Array() in senso contrario, se riprendiamo il primo codice di esempio proposto in questo paragrafo e lo modifichiamo come segue:
<script language="javascript">
 <!--
  var nominativi = new Array();
      nominativi[0] = "Paolo Rossi";
      nominativi[1] = "Gianni Rivera";
      nominativi[2] = "Claudio Gentile";
          document.write(nominativi.reverse());
 //-->
</script>
otterremo i dati ordinati come (indici) [2] [1] [0] separati da una virgola che verrà inserita in automatico... in questo caso, per pura combinazione, il risultato sarà visivamente lo stesso, dato che l'ordine alfabetico dei nomi dei calciatori nei relativi indici utilizzati per l'esempio sono già in ordine alfabetico inverso! per ottenere un "effetto" diverso implementate l'indice dell'Array() con altri nomi.

Esaminiamo brevemente gli altri metodi degli Array().

Il metodo concat() che ci permette di implementare gli indici dell'Array() come se gli indici fossero realmente tali, se ad esempio abbiamo un Array() con 10 voci e ci sta bene che siano tali e tante, ma occasionalmente abbiamo bisogno di implementarlo per una singola routine, questo metodo diventa oro!

Vediamo un esempio:
<script language="javascript">
 <!--
  var lettere = new Array();
      lettere[0] = "A";
      lettere[1] = "B";
      lettere[2] = "C";
          document.write(lettere.concat('D,E,F,G,H,I,L,M,N,O,P,Q,R,S,T,U,V,Z'));
 //-->
</script>
Otterremo

Simili tra loro i metodi toString() e join(), la loro funzione è quella di separare con una virgola tutti gli elementi dell'Array(): a differenza di toString() (che utilizza solo la virgola) join() permette di scegliere il o i caratteri da utilizzare per la separazione, vediamo un esempio di entrambi:
<script language="javascript">
 <!--
  var lettere = new Array();
      lettere[0] = "A";
      lettere[1] = "B";
      lettere[2] = "C";
          document.write(lettere.toString());
 //-->
</script>
che ci restituirà A,B,C
<script language="javascript">
 <!--
  var lettere = new Array();
      lettere[0] = "A";
      lettere[1] = "B";
      lettere[2] = "C";
          document.write(lettere.join());
 //-->
</script>
che ci restituirà, in questo modo, lo stesso risultato, ma ci permette di specificare tra le parentesi, come predetto, il o i caratteri da utilizzare, modifichiamo quindi questa riga come segue:
document.write(lettere.join(' - '));
ed otterremo A - B - C.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.930)

:: Breve guida a jQuery (98.633)

:: Le espressioni regolari in Javascript (84.992)

:: Gestione delle stringhe in Javascript (74.990)

:: Stampare una pagina col Dhtml (42.851)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.670)

:: Menu orizzontale dinamico in Dhtml (37.191)

:: Temporizzazioni Javascript (31.634)

:: Istruzion condizionali in Javascript: if e switch (28.946)

:: DOM: rendere cross-browser il comando innerHTML (28.106)

IN EVIDENZA
DOWNLOAD