array JavaScript vengono utilizzate per memorizzare valori multipli in una singola variabile.
Visualizzazione Array
In questo tutorial useremo uno script per visualizzare gli array all'interno di un <p> elemento con id="demo" :
Esempio
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
La prima linea (nello script) crea un array di nome automobili.
La seconda linea "trova" l'elemento con id="demo" , e "displays" la matrice nella "innerHTML" di esso .;
Prova tu stesso
Creare un array e assegnare valori ad esso:
Gli spazi e le interruzioni di riga non sono importanti. Una dichiarazione può estendersi su più righe:
Mai mettere una virgola dopo l'ultimo elemento (come "BMW" ,).
L'effetto è incoerente tutti i browser.
Che cosa è un array?
Un array è una variabile speciale, che può contenere più di un valore per volta.
Se si dispone di un elenco di elementi (un elenco di nomi di automobili, per esempio), la memorizzazione delle vetture in singole variabili potrebbe essere la seguente:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
Tuttavia, quello che se si desidera ciclo attraverso le auto e trovare una specifica? E che cosa se non avesse 3 auto, ma 300?
La soluzione è un array!
Un array può contenere molti valori sotto un unico nome, ed è possibile accedere ai valori facendo riferimento ad un numero di indice.
Creazione di un array
L'utilizzo di un array letterale è il modo più semplice per creare un array JavaScript.
Sintassi:
var array-name = [ item1 , item2 , ...];
esempio:
var cars = ["Saab", "Volvo", "BMW"];Utilizzando il nuovo JavaScript Chiave
L'esempio seguente crea anche una serie, e assegna i valori ad esso:
I due esempi sopra fanno esattamente la stessa. Non vi è alcuna necessità di utilizzare new Array() .
Per semplicità, leggibilità e velocità di esecuzione, utilizzare il primo (il metodo letterale array).
Accedere agli elementi di un array
Si fa riferimento a un elemento di un array facendo riferimento alnumero di indice.
Questa istruzione accede al valore del primo elemento in auto:
var
name = cars[0];
Questa affermazione modifica il primo elemento in auto:
cars[0] = "Opel";
[0] è il primo elemento di un array. [1] è il secondo. gli indici di matrice iniziano con 0.
Si può avere diversi oggetti in un array
variabili JavaScript possono essere oggetti. Gli array sono particolari tipi di oggetti.
A causa di questo, si possono avere le variabili di tipo diverso nello stesso array.
Si possono avere gli oggetti in un array. Si può avere funzioni in un array. Si può avere array in un array:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Gli array sono oggetti
Gli array sono un tipo speciale di oggetti. Il typeof operatore in JavaScript ritorna "object" per gli array.
Ma, gli array JavaScript sono meglio descritti come array.
Array utilizzano numbers per accedere ai suoi "elements" . In questo esempio, person[0] restituisce John :
Gli oggetti utilizzano nomi per accedere ai suoi "membri". In questo esempio, person.firstName restituisce John :
Proprietà e metodi Array
La vera forza di array JavaScript è il built-in proprietà e metodi di matrice:
Esempi
var x = cars.length;
// The length property returns the number of elements in cars
var y = cars.sort();
// The sort() method sort cars in alphabetical order
metodi di array sono coperti nel prossimo capitolo.
La lunghezza Proprietà
La length proprietà di un array restituisce la lunghezza di una matrice (il numero di elementi array).
Esempio
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
Prova tu stesso " La proprietà length è sempre uno in più il più alto indice di array.
L'aggiunta di elementi di matrice
Il modo più semplice per aggiungere un nuovo elemento di un array sta usando il metodo push:
Esempio
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits Prova tu stesso " Nuovo elemento può anche essere aggiunto a una matrice utilizzando la length immobile:
Esempio
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits Prova tu stesso " AVVERTIMENTO !
L'aggiunta di elementi con alti indici in grado di creare non definiti "holes" in un array:
Esempio
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon"; // adds a new element (Lemon) to fruits Prova tu stesso " Looping elementi di matrice
Il modo migliore per scorrere un array, sta usando un "for" ciclo:
Esempio
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
Prova tu stesso " array associativi
Molti linguaggi di programmazione supportano gli array con gli indici di nome.
Gli array con gli indici di nome sono chiamati array associativi (o hash).
JavaScript non supporta gli array con gli indici di nome.
In JavaScript, gli array utilizzare sempre gli indici numerati.
Esempio
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John" Prova tu stesso " AVVERTIMENTO !!
Se si utilizza un indice di nome, JavaScript ridefinirà la matrice di un oggetto standard.
Dopo di che, tutti i metodi e le proprietà di matrice produrranno risultati non corretti.
esempio:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined Prova tu stesso " La differenza tra array e gli oggetti
In JavaScript, gli array utilizzare gli indici numerati.
In JavaScript, oggetti di uso chiamati indici.
Gli array sono un particolare tipo di oggetti, con gli indici numerati.
Quando utilizzare le matrici. Quando utilizzare gli oggetti.
- JavaScript non supporta array associativi.
- Si dovrebbe usare oggetti quando si desidera che i nomi degli elementi per essere stringhe (testo).
- Si dovrebbe usare array quando si desidera che i nomi degli elementi per essere i numeri.
Evitare new Array()
Non vi è alcuna necessità di utilizzare incorporato nel costruttore matrice del JavaScript new Array() .
Usare [] invece.
Queste due affermazioni diverse sia creare un nuovo array punti vuoto denominato:
var points = new Array();
// Bad
var points = [];
// Good
Queste due affermazioni diverse sia creare un nuovo array contenente 6 numeri:
var points = new Array(40, 100, 1, 5, 25, 10) // Bad
var points = [40, 100, 1, 5, 25, 10];
// Good
Prova tu stesso " La new parola chiave complica solo il codice. Si può anche produrre alcuni risultati inaspettati:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)Che cosa succede se rimuovo uno degli elementi?
var points = new Array(40); // Creates an array with 40 undefined elements !!!!! Prova tu stesso " Come riconoscere una matrice
Una domanda comune è: come faccio a sapere se una variabile è un array?
Il problema è che l'operatore JavaScript typeof restituisce "oggetto":
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // returns object Prova tu stesso " I rendimenti operatore typeof oggetto perché un array JavaScript è un oggetto.
Soluzione 1:
Per risolvere questo problema ECMAScript 5 definisce un nuovo metodo Array.isArray() :
Array.isArray(fruits); // returns true Prova tu stesso " Il problema di questa soluzione è che ECMAScript 5 non è supportato nei browser più vecchi.
Soluzione 2:
Per risolvere questo problema, è possibile creare il proprio isArray() la funzione:
function isArray(x) {
return
x.constructor.toString().indexOf("Array") > -1;
} Prova tu stesso " La funzione di cui sopra sempre restituisce true se l'argomento è un array.
O più precisamente: restituisce vero se il prototipo oggetto contiene la parola "array".
Soluzione 3:
Il instanceof restituisce true se un oggetto è stato creato da un dato costruttore:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »