Iterazione matrice JavaScript
I metodi di iterazione dell'array operano su ogni elemento dell'array.
Matrice JavaScript forEach()
Il forEach()metodo chiama una funzione (una funzione di callback) una volta per ogni elemento dell'array.
Esempio
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Nota che la funzione accetta 3 argomenti:
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
L'esempio precedente utilizza solo il parametro value. L'esempio può essere riscritto in:
Esempio
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
JavaScript Array map()
Il map()metodo crea un nuovo array eseguendo una funzione su ciascun elemento dell'array.
Il map()metodo non esegue la funzione per gli elementi dell'array senza valori.
Il map()metodo non modifica l'array originale.
Questo esempio moltiplica ogni valore dell'array per 2:
Esempio
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Nota che la funzione accetta 3 argomenti:
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
Quando una funzione di callback utilizza solo il parametro value, i parametri index e array possono essere omessi:
Esempio
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Filtro array JavaScript()
Il filter()metodo crea una nuova matrice con elementi della matrice che supera un test.
Questo esempio crea una nuova matrice da elementi con un valore maggiore di 18:
Esempio
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Nota che la funzione accetta 3 argomenti:
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
Nell'esempio precedente, la funzione di callback non utilizza i parametri dell'indice e dell'array, quindi possono essere omessi:
Esempio
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Array JavaScript reduce()
Il reduce()metodo esegue una funzione su ciascun elemento dell'array per produrre (ridurre a) un singolo valore.
Il reduce()metodo funziona da sinistra a destra nell'array. Vedi anche reduceRight().
Il reduce()metodo non riduce l'array originale.
Questo esempio trova la somma di tutti i numeri in una matrice:
Esempio
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Nota che la funzione accetta 4 argomenti:
- Il totale (il valore iniziale/il valore precedentemente restituito)
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
L'esempio precedente non utilizza i parametri dell'indice e dell'array. Può essere riscritto in:
Esempio
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Il reduce()metodo può accettare un valore iniziale:
Esempio
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
Array JavaScript reduceRight()
Il reduceRight()metodo esegue una funzione su ciascun elemento dell'array per produrre (ridurre a) un singolo valore.
Le reduceRight()opere da destra a sinistra nell'array. Vedi anche reduce().
Il reduceRight()metodo non riduce l'array originale.
Questo esempio trova la somma di tutti i numeri in una matrice:
Esempio
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Nota che la funzione accetta 4 argomenti:
- Il totale (il valore iniziale/il valore precedentemente restituito)
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
L'esempio precedente non utilizza i parametri dell'indice e dell'array. Può essere riscritto in:
Esempio
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Matrice JavaScript ogni()
Il every()metodo controlla se tutti i valori dell'array superano un test.
Questo esempio controlla se tutti i valori dell'array sono maggiori di 18:
Esempio
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Nota che la funzione accetta 3 argomenti:
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
Quando una funzione di callback utilizza solo il primo parametro (valore), gli altri parametri possono essere omessi:
Esempio
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
JavaScript Array alcuni()
Il some()metodo controlla se alcuni valori dell'array superano un test.
Questo esempio controlla se alcuni valori dell'array sono maggiori di 18:
Esempio
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Nota che la funzione accetta 3 argomenti:
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
Matrice JavaScript indexOf()
Il indexOf()metodo ricerca in una matrice un valore di elemento e ne restituisce la posizione.
Nota: il primo elemento ha la posizione 0, il secondo elemento ha la posizione 1 e così via.
Esempio
Cerca in un array l'elemento "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Sintassi
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf() restituisce -1 se l'articolo non viene trovato.
Se l'elemento è presente più di una volta, restituisce la posizione della prima occorrenza.
Matrice JavaScript lastIndexOf()
Array.lastIndexOf()è uguale a Array.indexOf(), ma restituisce la posizione dell'ultima occorrenza dell'elemento specificato.
Esempio
Cerca in un array l'elemento "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Sintassi
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
JavaScript array trova()
Il find()metodo restituisce il valore del primo elemento dell'array che supera una funzione di test.
Questo esempio trova (restituisce il valore di) il primo elemento maggiore di 18:
Esempio
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Nota che la funzione accetta 3 argomenti:
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
Supporto browser
find() è una funzionalità ES6 (JavaScript 2015).
È supportato in tutti i browser moderni:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() non è supportato in Internet Explorer.
Matrice JavaScript findIndex()
Il findIndex()metodo restituisce l'indice del primo elemento dell'array che supera una funzione di test.
Questo esempio trova l'indice del primo elemento maggiore di 18:
Esempio
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Nota che la funzione accetta 3 argomenti:
- Il valore dell'oggetto
- L'indice degli articoli
- L'array stesso
Supporto browser
findIndex() è una funzionalità ES6 (JavaScript 2015).
È supportato in tutti i browser moderni:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() non è supportato in Internet Explorer.
JavaScript Array.from()
Il Array.from()metodo restituisce un oggetto Array da qualsiasi oggetto con una proprietà di lunghezza o qualsiasi oggetto iterabile.
Esempio
Crea un array da una stringa:
Array.from("ABCDEFG");
Supporto browser
from() è una funzionalità ES6 (JavaScript 2015).
È supportato in tutti i browser moderni:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() non è supportato in Internet Explorer.
Chiavi matrice JavaScript()
Il Array.keys()metodo restituisce un oggetto Array Iterator con le chiavi di una matrice.
Esempio
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
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.