Come gestire JavaScript array foreach tramite JavaScript. Partiamo dalla sintassi Javascript per il metodo foreach, che è la seguente:
nomeArray.forEach(function(currentValue, index, array)).
nomeArray corrisponde alla variabile array che abbiamo nominato e dichiarato. currentValue rappresenta il valore corrente dell’elemento dell’array. Index è opzionale, rappresenta l’indice dell’elemento corrente del vettore. Array è invece opzionale, rappresenta l’array a cui appartiene l’elemento preso in considerazione. Vediamo alcuni esempi in cui è possibile sfruttare questo metodo JavaScript.
let numbers = [44, 25, 16, 0, 12, 9];
numbers.forEach(function(number, index){
console.log('indice: ' + index + ' numero: ' + numero);
});
Tramite il console.log stampiamo lungo tutta la durata del ciclo l’indice e il numero, ovvero ciò che è contenuto nell’array.
Vediamo adesso un esempio un po’ più complesso del JavaScript for each. Dichiarando in input un array di numeri, controlliamo la posizione pari o dispari utilizzando l’operatore modulo.
let sum_even = 0, sum_odd = 0;
let numbers = [44, 25, 16, 0, 17, 9];
numbers.forEach(sumEvenOdd);
function sumEvenOdd(element, index) {
if (index % 2 == 0){
sum_even += element;
}
else {
sum_odd += element;
}
document.getElementById("somma-pari").innerHTML = sum_even;
document.getElementById("somma-dispari").innerHTML = sum_odd;
}
Questo semplice script alla fine ci stamperà i valori, sommati, individuati come pari e come dispari mentre viene condotta l’iterazione sull’array. Il JS foreach è molto più compatto del ciclo for che comunemente viene utilizzato per iterare su un array o su un costrutto statico formato da più variabili.
let sum_even = 0, sum_odd = 0;
let numbers = [44, 25, 16, 0, 17, 9];
for(let i = 0; i < numbers.length; i++){
if (index % 2 == 0){
sum_even += numbers[i];
}
else {
sum_odd += numbers[i];
}
document.getElementById("somma-pari").innerHTML = sum_even;
document.getElementById("somma-dispari").innerHTML = sum_odd;
Il JS array foreach nella sua forma risulta molto più facile da scrivere, anche nel corpo della funzione stessa. Non dobbiamo inserire manualmente l’incremento e abbiamo più versatilità nella gestione dei parametri da passare in input alla funzione forEach. Di seguito verrà riportata la traccia di un esercizio basato sul foreach JavaScript che puoi provare a risolvere autonomamente.
Dato un array di numeri, per ogni elemento aggiungere un numero random. (Suggerimento: sfrutta la funzione Math.random built-in di JavaScript per generarne uno o, se ti piacciono le sfide, crea un secondo array di numeri su cui iterare per selezionare il numero random da aggiungere).
Ricorda che fare pratica nella programmazione è importante, specialmente per un aspirante web developer. Padroneggiare un linguaggio è un processo che richiede esercizio, esperienza ed approfondimento non solo del linguaggio di programmazione, ma proprio della logica che c’è alla base di ogni riga di codice.
A tal proposito, se ti interessa dedicarti maggiormente allo studio del linguaggio Javascript, abbiamo scritto per te una guida Javascript in Italiano, da consultare ogni qualvolta tu ne senta il bisogno.
