Intro
Depuis mon passage à l'université, j'ai programmé en Java, JavaScript, Pascal, ABAP , PHP, Progress 4GL, C / C ++ et peut-être quelques autres langages auxquels je ne peux pas penser en ce moment.
Bien qu'ils aient tous leurs propres idiosyncrasies linguistiques, chacune de ces langues partage bon nombre des mêmes concepts de base. Ces concepts incluent les procédures / fonctions, les IF
instructions, les FOR
boucles et les WHILE
boucles.
Une for
boucle traditionnelle
Une for
boucle traditionnelle a trois composantes:
- L'initialisation: exécutée avant la première exécution du bloc look
- La condition: vérifie une condition à chaque fois avant l'exécution du bloc de boucle et quitte la boucle si elle est fausse
- L'après-réflexion: effectuée à chaque fois après l'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 la for
boucle la plus minimale possible:
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 cette for
boucle pour qu'elle cesse de fonctionner.
Habituellement, cependant, l'initialisation est 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 après coup est utilisée pour incrémenter l'index:
for (var i = 0, length = 10; i < length; i++) {
console.log(i);
}
Utilisation d'une for
boucle traditionnelle pour parcourir un tableau
La façon 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 boucler en arrière, vous procédez comme suit:
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);
}
Celui 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 très anciens!
Une while
boucle
Une alternative à une for
boucle est une while
boucle. Pour parcourir un tableau, vous pouvez procéder comme suit:
var key = 0;
while(value = myArray[key++]){
console.log(value);
}
Comme les for
boucles traditionnelles , les while
boucles sont prises en charge par même les plus anciens des navigateurs.
Notez également que chaque boucle while peut être réécrite sous forme de for
boucle. Par exemple, la while
boucle ci-dessus se comporte exactement de la même manière que cette for
boucle:
for(var key = 0; value = myArray[key++];){
console.log(value);
}
For...in
et for...of
En JavaScript, vous pouvez également faire ceci:
for (i in myArray) {
console.log(myArray[i]);
}
Cependant, cela doit être utilisé avec précaution, car il ne se comporte pas de la même manière qu'une for
boucle traditionnelle dans tous les cas, et il existe des effets secondaires potentiels qui doivent être pris en compte. Voir Pourquoi l'utilisation de "for ... in" avec l'itération de tableau est une mauvaise idée? pour plus de détails.
Comme alternative à for...in
, il y a maintenant aussi pour for...of
. L'exemple suivant montre la différence entre une for...of
boucle et une for...in
boucle:
var 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
}
De plus, vous devez considérer qu'aucune version d'Internet Explorer ne prend en charge for...of
( Edge 12+ le fait) et cela for...in
nécessite au moins Internet Explorer 10.
Array.prototype.forEach()
Une alternative à for
-loops est Array.prototype.forEach()
, qui utilise la syntaxe suivante:
myArray.forEach(function(value, key, myArray) {
console.log(value);
});
Array.prototype.forEach()
est pris en charge par tous les navigateurs modernes, ainsi qu'Internet Explorer 9 et versions ultérieures.
Bibliothèques
Enfin, de nombreuses bibliothèques d'utilitaires ont également leur propre foreach
variante. AFAIK, 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);
});