JavaScript Iterazione


Esempio

Un tradizionale for -loop

Un ciclo for tradizionale ha tre componenti:

  1. L'inizializzazione: eseguita prima che il blocco di visualizzazione venga eseguito la prima volta
  2. La condizione: controlla una condizione ogni volta prima che venga eseguito il blocco del ciclo e chiude il ciclo se falso
  3. Il ripensamento: eseguito ogni volta dopo l'esecuzione del blocco del ciclo

Queste tre componenti sono separate l'una dall'altra da a ; simbolo. Contenuto di ciascuno di questi tre componenti è opzionale, il che significa che il seguente è il più minimo for ciclo possibile:

for (;;) {
    // Do stuff
}

Naturalmente, è necessario includere un if(condition === true) { break; } o un if(condition === true) { return; } da qualche parte all'interno che for -loop per farlo smettere di funzionare.

Di solito, tuttavia, l'inizializzazione viene utilizzata per dichiarare un indice, la condizione viene utilizzata per confrontare tale indice con un valore minimo o massimo e il ripensamento viene utilizzato per incrementare l'indice:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Utilizzo di un ciclo tradizionale for eseguire il ciclo di un array

Il modo tradizionale di scorrere un array è questo:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

Oppure, se preferisci eseguire il looping all'indietro, fai questo:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

Ci sono, tuttavia, molte varianti possibili, come ad esempio questa:

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... o questo ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... o questo:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

Qualunque cosa funzioni meglio dipende in gran parte sia dal gusto personale che dal caso d'uso specifico che stai implementando.

Nota che ognuna di queste variazioni è supportata da tutti i browser, compresi quelli molto vecchi!


Un while ciclo

Un'alternativa a un ciclo for è un ciclo while . Per eseguire il ciclo di un array, è possibile eseguire questa operazione:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Come tradizione for cicli, while i cicli sono supportati da anche il più antico dei browser.

Inoltre, si noti che ogni ciclo while può essere riscritto come ciclo for . Ad esempio, il ciclo while hereabove si comporta esattamente allo stesso modo di questo for -loop:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

for...in

In JavaScript, puoi anche fare questo:

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

Questo dovrebbe essere usato con cautela, tuttavia, come non si comporta lo stesso come un tradizionale for ciclo in tutti i casi, e ci sono potenziali effetti collaterali che devono essere considerati. Vedi Perché l'uso di "for ... in" con l'iterazione degli array è una cattiva idea? per ulteriori dettagli.

for...of

In ES 6, il ciclo for-of è il metodo consigliato per iterare su un valore di un array:

6
let myArray = [1, 2, 3, 4];
for (let value of myArray) {
  let twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
}

L'esempio seguente mostra la differenza tra a for...of loop e a for...in loop:

6
let myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Array.prototype.keys()

Il metodo Array.prototype.keys() può essere utilizzato per iterare su indici come questo:

6
let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
  let twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

Array.prototype.forEach()

Il .forEach(...) è un'opzione in ES 5 e versioni successive. È supportato da tutti i browser moderni, nonché da Internet Explorer 9 e versioni successive.

5
[1, 2, 3, 4].forEach(function(value, index, arr) {
  var twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
});

Confrontando il tradizionale ciclo for , non possiamo saltare fuori dal ciclo in .forEach() . In questo caso, utilizzare il ciclo for oppure utilizzare l'iterazione parziale presentata di seguito.

In tutte le versioni di JavaScript, è possibile scorrere gli indici di un array usando uno stile C tradizionale for ciclo.

var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
  var twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

È anche possibile utilizzare il ciclo while :

var myArray = [1, 2, 3, 4],
    i = 0, sum = 0;
while(i++ < myArray.length) {
  sum += i;
}
console.log(sum);

Array.prototype.every

Dal momento che ES5, se si desidera eseguire un'iterazione su una parte di un array, è possibile utilizzare Array.prototype.every , che itera fino a quando non viene restituito false :

5
// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
  console.log(value);
  return value % 2 === 0; // iterate until an odd number is found
}); 

Equivalente in qualsiasi versione JavaScript:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
  console.log(arr[i]);
}

Array.prototype.some

Array.prototype.some itera fino a quando non si restituisce true :

5
// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
  console.log(value);
  return value === 7; // iterate until we find value 7
}); 

Equivalente in qualsiasi versione JavaScript:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
  console.log(arr[i]);
}

biblioteche

Infine, molte librerie di utilità hanno anche la loro variazione foreach . Tre dei più popolari sono questi:

jQuery.each() , in jQuery :

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each() , in Underscore.js :

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach() , in Lodash.js :

_.forEach(myArray, function(value, key) {
    console.log(value);
});

Vedi anche la seguente domanda su SO, dove molte di queste informazioni sono state originariamente pubblicate: