JavaScript Itération


Exemple

Un traditionnel for -loop

Un traditionnel for boucle a trois composants:

  1. L'initialisation: exécutée avant l'exécution du bloc de recherche la première fois
  2. La condition: vérifie une condition à chaque fois avant l'exécution du bloc de boucle et quitte la boucle si elle est fausse
  3. Après coup: effectué à chaque exécution du bloc de boucle

Ces trois composants sont séparés les uns des autres par un ; symbole. Le contenu de chacun de ces trois composants est facultatif, ce qui signifie que ce qui suit est le plus minimal possible for boucle:

for (;;) {
    // Do stuff
}

Bien sûr, vous devrez inclure un if(condition === true) { break; } ou un if(condition === true) { return; } quelque part à l'intérieur de cela for que Loop arrête de fonctionner.

Cependant, l'initialisation est généralement utilisée pour déclarer un index, la condition est utilisée pour comparer cet index avec une valeur minimale ou maximale, et la réflexion est utilisée pour incrémenter l'index:

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

Utiliser une boucle for traditionnelle for parcourir un tableau

La manière traditionnelle de parcourir un tableau est la suivante:

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

Ou, si vous préférez faire une boucle en arrière, vous faites ceci:

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

Il existe cependant de nombreuses variantes possibles, comme par exemple celle-ci:

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

... ou celui-ci ...

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

... ou celui-ci:

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

Tout ce qui fonctionne le mieux est en grande partie une question de goût personnel et de cas d'utilisation spécifique que vous implémentez.

Notez que chacune de ces variantes est supportée par tous les navigateurs, y compris les très anciens!


A while la boucle

Une alternative à une for la boucle est while boucle. Pour parcourir un tableau, vous pouvez le faire:

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

Comme traditionnel for les boucles, while les boucles sont prises en charge par même les plus anciennes des navigateurs.

Notez également que chaque boucle while peut être réécrite comme une boucle for . Par exemple, le while ci - dessus de la boucle se comporte de la même manière exacte que cela for -loop:

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

for...in

En JavaScript, vous pouvez aussi faire ceci:

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

Cela devrait être utilisé avec précaution, cependant, car il ne se comporte pas comme un traditionnel for boucle dans tous les cas, et il y a des effets secondaires potentiels qui doivent être pris en considération. Voir Pourquoi utiliser "for ... in" avec une itération de tableau est-il une mauvaise idée? pour plus de détails.

for...of

Dans l'ES 6, la boucle for-of défaut est la méthode recommandée pour itérer sur les valeurs d'un tableau:

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

L'exemple suivant montre la différence entre un for...of boucle et for...in boucle:

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

La méthode Array.prototype.keys() peut être utilisée pour parcourir des index comme celui-ci:

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

La .forEach(...) est une option dans ES 5 et .forEach(...) . Il est pris en charge par tous les navigateurs modernes, ainsi qu’Internet Explorer 9 et les versions ultérieures.

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

En comparaison avec la boucle for traditionnelle, nous ne pouvons pas sortir de la boucle dans .forEach() . Dans ce cas, utilisez la boucle for ou utilisez l'itération partielle présentée ci-dessous.

Dans toutes les versions de JavaScript, il est possible de parcourir les index d'un tableau en utilisant un style C traditionnel for boucle.

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

Il est également possible d'utiliser while loop:

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

Array.prototype.every

Depuis ES5, si vous souhaitez effectuer une itération sur une partie d'un tableau, vous pouvez utiliser Array.prototype.every , qui itère jusqu'à ce que nous Array.prototype.every 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
}); 

Équivalent dans toute version 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 itère jusqu'à ce que nous Array.prototype.some 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
}); 

Équivalent dans toute version JavaScript:

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

Bibliothèques

Enfin, de nombreuses bibliothèques de services publics ont aussi leur propre foreach variation. Les trois plus populaires sont les suivantes:

jQuery.each() , dans jQuery :

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

_.each() , dans Underscore.js :

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

_.forEach() , dans Lodash.js :

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

Voir aussi la question suivante sur SO, où une grande partie de ces informations a été initialement publiée: