JavaScript loop attraverso un array

1. Usa il cicli for per scorrere un array in JavaScript
2. Usa il cicli while per scorrere un array in JavaScript
3. Utilizza il bucle do...while per eseguire il bucle in un array in JavaScript
4. Usa il bucle forEach per scorrere un array in JavaScript
5. Usa for...of per scorrere un array in JavaScript
6. Usa for...in per scorrere un array in JavaScript
7. Usa il metodo map per scorrere un array in JavaScript
8. Utilizza il metodo reduce per eseguire il bucle attraverso un array in JavaScript
9. Utilizza il metodo filter per eseguire il bucle attraverso un array in JavaScript
10. Usa some per scorrere un array in JavaScript
11. Usa every per scorrere un array in JavaScript

Questo tutorial spiega come eseguire il bucle attraverso un array in JavaScript. Possiamo farlo utilizzando metodi tradizionali in Vanilla JavaScript come for loop e while loop o utilizzando i metodi più recenti introdotti da ES5, ES6 come forEach, for ... of, for ... in e molti altri metodi a seconda del nostro caso d’uso e della velocità/efficienza del codice.

Usa il cicli for per scorrere un array in JavaScript

Il tradizionale cicli for è simile al cicli for in altri linguaggi come C++, Java, ecc. Ha 3 parti:

1. L’inizializzazione di variabili/iteratori viene eseguita prima dell’esecuzione del bucle for.
2. La condizione da controllare ogni volta prima che il bucle venga eseguito.
3. Il passaggio da eseguire ogni volta dopo l’esecuzione del bucle.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
for (var i = 0; i < length; i++) {
  console.log(arr[i]);
}

Produzione:

1
2
3
4
5
6

Prendiamo un iteratore i e ripetiamo l’array usando un cicli for che incrementa i di 1 dopo ogni iterazione e lo sposta all’elemento next.

Usa il cicli while per scorrere un array in JavaScript

Il cicli while è molto semplice perché ha una condizione che controlla dopo ogni iterazione e, a meno che questa condizione non sia soddisfatta, continua ad essere eseguita.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

Come il cicli for, prendiamo l’iteratore i e lo aumentiamo fino alla lunghezza dell’array per scorrere tutti gli elementi.

Utilizza il bucle do...while per eseguire il bucle in un array in JavaScript

Il bucle do...while è lo stesso del cicli while tranne per il fatto che viene eseguito almeno una volta anche se la condizione del bucle è falsa. Quindi, dobbiamo stare attenti durante la scrittura di questo bucle.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
var i = 0;

do {
  console.log(arr[i]);
  i++;
} while (i < length);

Usa il bucle forEach per scorrere un array in JavaScript

ES5 ha introdotto forEach come un nuovo modo di iterare sugli array. forEach prende una funzione come argomento e la chiama per ogni elemento presente all’interno dell’array.

const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => console.log(item));

Qui, abbiamo scritto una funzione freccia per stampare l’argomento passato alla funzione e assegnata quella funzione a forEach per iterare sull’array e stampare quell’elemento.

Usa for...of per scorrere un array in JavaScript

ES6 ha introdotto il concetto di oggetti iterabili e ha fornito for ... of che può essere utilizzato per iterare oggetti Array.

let arr = [1, 2, 3, 4, 5, 6];
for (const item of arr) {
  console.log(item);
}

Lo usiamo come un normale bucle ma iteriamo facilmente una vasta gamma di oggetti e non solo array.

Usa for...in per scorrere un array in JavaScript

Possiamo iterare array usando for ... in, ma non è raccomandato perché enumera le proprietà dell’oggetto. Enumera anche i metodi allegati a Array.prototype oltre agli elementi dell’array.

var arr = [1, 2, 3, 4, 5, 6];

for (var i in arr) {
  console.log(arr[i]);
}

Usa il metodo map per scorrere un array in JavaScript

Il metodo map esegue un bucle sull’array, utilizza la funzione di callback su ogni elemento e restituisce un nuovo array, cioè prende in input un array e lo mappa su un nuovo array con calcoli eseguiti dalla funzione di callback.

arr = [1, 2, 3, 4, 5, 6];
const square = (x) => {
  return Math.pow(x, 2);
} mapped = arr.map(square);
console.log(arr);
console.log(mapped);

Qui abbiamo iterato sull’array di input e formato un array con quadrati di elementi all’interno dell’array.

Utilizza il metodo reduce per eseguire il bucle attraverso un array in JavaScript

Il metodo reduce esegue un bucle sull’array e chiama la funzione reducer per memorizzare il valore del calcolo dell’array da parte di una funzione di accumulatore. Un accumulatore è una variabile ricordata durante tutte le iterazioni per memorizzare i risultati accumulati del bucle attraverso un array.

const arr = [1, 2, 3, 4];
const reducer = (accumulator, curr) => accumulator + curr;
console.log(arr.reduce(reducer));

Qui eseguiamo un bucle sull’array e sommiamo tutti gli elementi all’interno di un accumulatore.

Utilizza il metodo filter per eseguire il bucle attraverso un array in JavaScript

I metodi filter passano in rassegna l’array e filtrano gli elementi che soddisfano una determinata condizione.

const fruits =
    ['apple', 'orange', 'pomegranete', 'banana', 'pear', 'blueberry'];
const result = fruits.filter(word => word.length > 6);
console.log(result);

Qui eseguiamo un bucle attraverso l’array e controlliamo se la lunghezza del nome del frutto dato è maggiore di 6. Se sì, lo includiamo nel nostro array dei risultati, cioè filtriamo gli elementi richiesti.

Usa some per scorrere un array in JavaScript

Viene utilizzato per scorrere l’array e controllare se una data condizione è soddisfatta da almeno uno degli elementi presenti all’interno dell’array.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.some(under_three));

Qui usiamo some per controllare se qualche elemento presente all’interno dell’array è minore di 3. Restituisce un valore booleano true o false.

Usa every per scorrere un array in JavaScript

Viene utilizzato per scorrere l’array e controllare se una data condizione è soddisfatta da tutti gli elementi all’interno di un array.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.every(under_three));

Qui usiamo every per controllare se tutti gli elementi presenti all’interno dell’array sono minori di 3 o meno. Restituisce un valore booleano true o false.