Matrici JavaScript
Un array è una variabile speciale, che può contenere più di un valore:
const cars = ["Saab", "Volvo", "BMW"];
Perché usare un array?
Se hai un elenco di elementi (un elenco di nomi di auto, ad esempio), la memorizzazione delle auto in singole variabili potrebbe essere simile a questa:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Tuttavia, cosa succede se si desidera scorrere le auto e trovarne una specifica? E se non avessi 3 macchine, ma 300?
La soluzione è un array!
Un array può contenere molti valori sotto un unico nome e puoi accedere ai valori facendo riferimento a un numero di indice.
Creazione di una matrice
L'uso di un valore letterale array è il modo più semplice per creare un array JavaScript.
Sintassi:
const array_name = [item1, item2, ...];
È pratica comune dichiarare array con la parola chiave const .
Scopri di più su const con gli array nel capitolo: JS Array Const .
Esempio
const cars = ["Saab", "Volvo", "BMW"];
Gli spazi e le interruzioni di riga non sono importanti. Una dichiarazione può estendersi su più righe:
Esempio
const cars = [
"Saab",
"Volvo",
"BMW"
];
Puoi anche creare un array e quindi fornire gli elementi:
Esempio
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Utilizzando la parola chiave JavaScript 'new
L'esempio seguente crea anche un array e gli assegna valori:
Esempio
const cars = new Array("Saab", "Volvo", "BMW");
I due esempi sopra fanno esattamente lo stesso.
Non c'è bisogno di usare new Array().
Per semplicità, leggibilità e velocità di esecuzione, utilizzare il metodo letterale array.
Accesso agli elementi dell'array
Si accede a un elemento dell'array facendo riferimento al numero di indice :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Nota: gli indici di array iniziano con 0.
[0] è il primo elemento. [1] è il secondo elemento.
Modifica di un elemento array
Questa istruzione cambia il valore del primo elemento in cars:
cars[0] = "Opel";
Esempio
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Accedi all'array completo
Con JavaScript, è possibile accedere all'intero array facendo riferimento al nome dell'array:
Esempio
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Gli array sono oggetti
Gli array sono un tipo speciale di oggetti. L' typeofoperatore in JavaScript restituisce "oggetto" per gli array.
Ma gli array JavaScript sono meglio descritti come array.
Gli array usano i numeri per accedere ai suoi "elementi". In questo esempio, person[0]
restituisce Giovanni:
Vettore:
const person = ["John", "Doe", 46];
Gli oggetti usano i nomi per accedere ai suoi "membri". In questo esempio,
person.firstName
restituisce Giovanni:
Oggetto:
const person = {firstName:"John", lastName:"Doe", age:46};
Gli elementi della matrice possono essere oggetti
Le variabili JavaScript possono essere oggetti. Gli array sono tipi speciali di oggetti.
Per questo motivo, puoi avere variabili di tipo diverso nella stessa matrice.
Puoi avere oggetti in un array. Puoi avere funzioni in un array. Puoi avere array in un array:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Proprietà e metodi dell'array
Il vero punto di forza degli array JavaScript sono le proprietà e i metodi dell'array integrati:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
I metodi array sono trattati nei capitoli successivi.
La proprietà di lunghezza
La lengthproprietà di un array restituisce la lunghezza di un array (il numero di elementi dell'array).
Esempio
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
La lengthproprietà è sempre uno in più rispetto all'indice di matrice più alto.
Accesso al primo elemento dell'array
Esempio
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Accesso all'ultimo elemento dell'array
Esempio
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Elementi di array in loop
Un modo per scorrere un array è usare un forciclo:
Esempio
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
Puoi anche usare la Array.forEach()funzione:
Esempio
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Aggiunta di elementi di array
Il modo più semplice per aggiungere un nuovo elemento a un array è utilizzare il push()metodo:
Esempio
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
Un nuovo elemento può anche essere aggiunto a un array usando la lengthproprietà:
Esempio
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
AVVERTIMENTO !
L'aggiunta di elementi con indici elevati può creare "buchi" non definiti in un array:
Esempio
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
Array associativi
Molti linguaggi di programmazione supportano array con indici denominati.
Gli array con indici denominati sono chiamati array associativi (o hash).
JavaScript non supporta gli array con indici denominati.
In JavaScript, gli array utilizzano sempre indici numerati .
Esempio
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
AVVERTIMENTO !!
Se utilizzi indici denominati, JavaScript ridefinirà l'array in un oggetto.
Successivamente, alcuni metodi e proprietà dell'array produrranno risultati errati .
Esempio:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
La differenza tra array e oggetti
In JavaScript, gli array utilizzano indici numerati .
In JavaScript, gli oggetti utilizzano gli indici denominati .
Gli array sono un tipo speciale di oggetti, con indici numerati.
Quando usare gli array. Quando usare gli oggetti.
- JavaScript non supporta gli array associativi.
- Dovresti usare gli oggetti quando vuoi che i nomi degli elementi siano stringhe (testo) .
- Dovresti usare gli array quando vuoi che i nomi degli elementi siano numeri .
JavaScript nuovo Array()
JavaScript ha un costruttore di array integrato new Array().
Ma puoi tranquillamente usare []invece.
Queste due diverse istruzioni creano entrambe un nuovo array vuoto denominato points:
const points = new Array();
const points = [];
Queste due diverse affermazioni creano entrambe un nuovo array contenente 6 numeri:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
La newparola chiave può produrre alcuni risultati inaspettati:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
Un errore comune
const points = [40];
non è uguale a:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
Come riconoscere un array
Una domanda comune è: come faccio a sapere se una variabile è un array?
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.