Iterazione degli array JavaScript

I metodi di iterazione dell'array operano su ogni elemento dell'array.

Array.forEach()

forEach() Il metodo chiama la funzione una volta per ogni elemento dell'array (funzione di callback).

Esempio

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

Prova tu stesso

Nota:La funzione accetta 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Nell'esempio sopra, è stato utilizzato solo il parametro value. Questo esempio può essere riscritto come:

Esempio

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Prova tu stesso

Tutti i browser lo supportano Array.forEach()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

Array.map()

map() Il metodo crea un nuovo array eseguendo la funzione su ogni elemento dell'array.

map() Il metodo non esegue la funzione sugli elementi dell'array senza valore.

map() Il metodo non modifica l'array originale.

Questo esempio moltiplica ogni valore dell'array per 2:

Esempio

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

Prova tu stesso

Si prega di notare che la funzione ha 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Quando la funzione di callback utilizza solo il parametro value, i parametri index e array possono essere omessi:

Esempio

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Prova tu stesso

Tutti i browser lo supportano Array.map()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

Array.filter()

filter() Il metodo crea un nuovo array che contiene gli elementi dell'array che superano il test.

Questo esempio crea un nuovo array con gli elementi di valore maggiore di 18:

Esempio

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Prova tu stesso

Si prega di notare che questa funzione accetta 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Nell'esempio sopra, la funzione di callback non utilizza i parametri index e array, quindi possono essere omessi:

Esempio

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Prova tu stesso

Tutti i browser lo supportano Array.filter()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

Array.reduce()

reduce() Il metodo esegue la funzione su ogni elemento dell'array per generare (ridurre) un singolo valore.

reduce() Il metodo lavora nell'array da sinistra a destra. Vedi anche reduceRight().

reduce() Il metodo non riduce l'array originale.

Questo esempio determina la somma di tutti i numeri nell'array:

Esempio

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Prova tu stesso

Si prega di notare che questa funzione accetta 4 parametri:

  • Somma (valore iniziale/precedente valore restituito)
  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Nell'esempio precedente non sono stati utilizzati i parametri index e array. Puoi riscriverlo come:

Esempio

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Prova tu stesso

reduce() Il metodo può accettare un valore iniziale:

Esempio

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

Prova tu stesso

Tutti i browser lo supportano Array.reduce()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

Array.reduceRight()

reduceRight() Il metodo esegue la funzione su ogni elemento dell'array per generare (ridurre) un singolo valore.

reduceRight() Il metodo lavora nell'array da destra a sinistra. Vedi anche reduce().

reduceRight() Il metodo non riduce l'array originale.

Questo esempio determina la somma di tutti i numeri nell'array:

Esempio

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Prova tu stesso

Si prega di notare che questa funzione accetta 4 parametri:

  • Somma (valore iniziale/precedente valore restituito)
  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Nell'esempio precedente non sono stati utilizzati i parametri index e array. Puoi riscriverlo come:

Esempio

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Prova tu stesso

Tutti i browser lo supportano Array.reduceRight()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

Array.every()

every() Il metodo verifica se tutti i valori dell'array superano il test.

Questo esempio verifica se tutti i valori dell'array sono maggiori di 18:

Esempio

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Prova tu stesso

Si prega di notare che questa funzione accetta 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Se la funzione di callback utilizza solo il primo parametro (valore), è possibile omettere altri parametri:

Esempio

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Prova tu stesso

Tutti i browser lo supportano Array.every()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

Array.some()

some() Il metodo verifica se alcuni valori dell'array superano il test.

Questo esempio verifica se alcuni valori dell'array sono maggiori di 18:

Esempio

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Prova tu stesso

Si prega di notare che questa funzione accetta 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Tutti i browser lo supportano Array.some()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

Array.indexOf()

indexOf() Il metodo cerca un elemento in un array e restituisce la sua posizione.

Nota:La posizione del primo elemento è 0, la posizione del secondo elemento è 1, ecc.

Esempio

Ricerca dell'elemento "Apple" nell'array:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Prova tu stesso

Tutti i browser lo supportano Array.indexOf()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

sintassi

array.indexOf(elemento, inizio)
elemento obbligatorio. Gli elementi da cercare.
inizio Opzionale. Da dove iniziare la ricerca. I valori negativi iniziano dalla fine dell'array alla posizione data e vanno avanti.

Se non viene trovato l'elemento:Array.indexOf() Restituisce -1.

Se l'elemento appare più volte, restituisce la posizione della prima occorrenza.

Array.lastIndexOf()

Array.lastIndexOf() con Array.indexOf() Simile, ma la ricerca parte dalla fine dell'array.

Esempio

Ricerca dell'elemento "Apple" nell'array:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Prova tu stesso

Tutti i browser lo supportano Array.lastIndexOf()eccetto Internet Explorer 8 o versioni precedenti:

Sì 9.0 Sì Sì Sì

sintassi

array.lastIndexOf(elemento, inizio)
elemento obbligatorio. Gli elementi da cercare.
inizio Opzionale. Da dove iniziare la ricerca. Un valore negativo partirà dalla fine del dato punto e recherà fino all'inizio.

Array.find()

find() Il metodo restituisce il valore del primo elemento dell'array che supera il test della funzione.

Questo esempio cerca (restituisce) il valore del primo elemento maggiore di 18:

Esempio

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Prova tu stesso

Si prega di notare che questa funzione accetta 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Browser obsoleti non supportano Array.find()Di seguito è riportata la prima versione del browser che supporta completamente questo metodo:

45 12 25 8 32

Array.findIndex()

findIndex() Il metodo restituisce l'indice del primo elemento dell'array che supera il test della funzione.

Questo esempio cerca l'indice del primo elemento maggiore di 18:

Esempio

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Prova tu stesso

Si prega di notare che questa funzione accetta 3 parametri:

  • Valore dell'elemento
  • Indice dell'elemento
  • Array stesso

Browser obsoleti non supportano Array.findIndex()Di seguito è riportata la prima versione del browser che supporta completamente questo metodo:

45 12 25 8 32