JavaScript Iteration


Beispiel

Ein traditioneller for -loop

Eine traditionelle for Schleife besteht aus drei Komponenten:

  1. Die Initialisierung: wird ausgeführt, bevor der Look-Block zum ersten Mal ausgeführt wird
  2. Die Bedingung: prüft eine Bedingung vor jeder Ausführung des Schleifenblocks und beendet die Schleife, wenn sie falsch ist
  3. Der Nachgedanke: Wird jedes Mal ausgeführt, nachdem der Loop-Block ausgeführt wurde

Diese drei Komponenten sind durch a voneinander getrennt ; Symbol. Der Inhalt für jede dieser drei Komponenten ist optional. Dies bedeutet, dass die folgende minimale for Schleife möglich ist:

for (;;) {
    // Do stuff
}

Natürlich müssen Sie eine if(condition === true) { break; } oder ein if(condition === true) { return; } irgendwo in dem for -loop, damit er nicht mehr läuft.

Normalerweise wird die Initialisierung jedoch zur Deklaration eines Indexes verwendet, die Bedingung wird verwendet, um diesen Index mit einem Minimal- oder Maximalwert zu vergleichen, und der Index wird nachträglich verwendet, um den Index zu erhöhen:

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

Verwenden einer traditionellen for Schleife zum Durchlaufen eines Arrays

Die traditionelle Methode zum Durchlaufen eines Arrays lautet wie folgt:

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

Oder, wenn Sie es vorziehen, rückwärts zu laufen, machen Sie Folgendes:

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

Es sind jedoch viele Variationen möglich, wie zum Beispiel diese:

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

... oder dieses ...

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

... oder dieses:

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

Was am besten funktioniert, hängt hauptsächlich vom persönlichen Geschmack und vom konkreten Anwendungsfall ab, den Sie implementieren.

Beachten Sie, dass jede dieser Varianten von allen Browsern unterstützt wird, einschließlich sehr alter Browser!


Eine while Schleife

Eine Alternative zu einer for Schleife ist eine while Schleife. Um ein Array zu durchlaufen, können Sie Folgendes tun:

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

Wie traditionelle for Loops, while Loops sogar von den ältesten Browsern unterstützt werden.

Beachten Sie auch, dass jede while-Schleife als for Schleife überschrieben werden kann. Zum Beispiel verhält sich die while Schleife genau wie for -loop:

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

for...in

In JavaScript können Sie auch Folgendes tun:

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

Dies sollte jedoch mit Vorsicht erfolgen, da es sich nicht in allen Fällen wie eine herkömmliche for Schleife verhält und potenzielle Nebenwirkungen in Betracht gezogen werden müssen. Siehe Warum ist die Verwendung von "for ... in" mit Array-Iteration eine schlechte Idee? für mehr Details.

for...of

In ES 6 wird die for-of Schleife empfohlen, um die Werte eines Arrays zu durchlaufen:

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

Das folgende Beispiel zeigt den Unterschied zwischen einer for...of Schleife und einer for...in Schleife:

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()

Die Array.prototype.keys() -Methode kann verwendet werden, um Indizes wie Array.prototype.keys() :

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()

Die .forEach(...) -Methode ist eine Option in ES 5 und höher. Es wird von allen modernen Browsern sowie Internet Explorer 9 und höher unterstützt.

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

Verglichen mit der traditionellen for Schleife können wir in .forEach() nicht aus der Schleife .forEach() . Verwenden Sie in diesem Fall die for Schleife oder verwenden Sie die unten dargestellte partielle Iteration.

In allen Versionen von JavaScript ist es möglich, die Indizes eines Arrays unter Verwendung einer traditionellen C-Schleife for Schleife zu durchlaufen.

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);
}

Es ist auch möglich, while Schleife zu verwenden:

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

Array.prototype.every

Wenn Sie seit ES5 einen Teil eines Arrays Array.prototype.every , können Sie Array.prototype.every , das so lange wiederholt wird, bis wir 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
}); 

Entspricht in jeder JavaScript-Version:

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 iteriert, bis wir 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
}); 

Entspricht in jeder JavaScript-Version:

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

Bibliotheken

Schließlich haben viele Utility-Bibliotheken auch ihre eigene foreach Variante. Drei der beliebtesten sind diese:

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);
});

Siehe auch die folgende Frage zu SO, wo viele dieser Informationen ursprünglich gepostet wurden: