Comment faire une boucle par le biais de tableau en jQuery?

jQuery.chacun()

jQuery.chacun()

jQuery.each(array, callback)

matrice d'itération

jQuery.each(array, function(Integer index, Object value){});

objet d'itération

jQuery.each(object, function(string propertyName, object propertyValue){});

exemple:

JS:

var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) { 
  console.log(index, val)
});

var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
  console.log(propName, propVal);
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

javascript boucles pour tableau

pour la boucle

for (initialExpression; condition; incrementExpression)
  statement

exemple

JS:

var substr = [1, 2, 3, 4];

//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
  console.log("loop", substr[i])
}

//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
  console.log("reverse", substr[i])
}

//step loop
for(var i = 0; i < substr.length; i+=2) {
  console.log("step", substr[i])
}

pour en

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
    console.log(substr[i]) //note i returns index
}

pour de

for(var i of subs) {
    //can use break;
    console.log(i); //note i returns value
}

forEach

substr.forEach(function(v, i, a){
    //cannot use break;
    console.log(v, i, a);
})

Ressources

MDN boucles et itérateurs

Option 1 : Le traditionnel for-boucle

Les bases

Traditionnel for-boucle a trois composantes :

1. l'initialisation : exécuté avant que le look bloc est exécuté la première fois
2. la condition : vérifie une condition à chaque fois avant la boucle bloc est exécuté, et se ferme la boucle si la valeur est false
3. le coup : effectué chaque fois que la boucle de bloc est exécuté

Ces trois composantes sont séparées les unes des autres par un ; symbole. Le contenu de chacune de ces trois composantes est facultative, ce qui signifie que les éléments suivants sont les plus minimes for-boucle possible :

for (;;) {
    //Do stuff
}

Bien sûr, vous aurez besoin d'inclure un if(condition === true) { break; } ou un if(condition === true) { return; } quelque part à l'intérieur que for-boucle pour arriver à arrêter de courir.

Habituellement, cependant, l'initialisation est utilisé pour déclarer un index, la condition est utilisé pour comparer l'indice avec une valeur minimale ou maximale, et le coup est utilisé pour incrémenter l'index :

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

---

À l'aide d'un tradtional for-boucle pour parcourir un tableau

La manière traditionnelle de parcourir un tableau, est-ce :

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

Ou, si vous préférez boucle vers l'arrière, ce faire, vous :

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

Cependant, il existe de nombreuses variantes, comme par exemple. celui-ci :

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

... ou celui-là ...

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

Selon ce qui convient le mieux est en grande partie une question de goût personnel et le cas d'utilisation spécifiques vous êtes à la mise en œuvre.

Remarque :

Chacun de ces variations est pris en charge par tous les navigateurs, y compris véry anciens!

---

Option 2 : Le while-boucle

Une alternative à un for-loop est un whileen boucle. Pour parcourir un tableau, vous pourriez faire ceci :

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

Remarque :

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

Aussi, chaque boucle while peut être réécrite comme foren boucle. Par exemple, le while-boucle ci-dessus se comporte exactement de la même manière que ce for-boucle :

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

---

Option 3 : for...in et pour...de

En JavaScript, vous pouvez également le faire :

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

Cette fonction doit être utilisée avec soin, cependant, comme elle ne se comportent pas de la même chose qu'une traditionnelle foren boucle dans tous les cas, et il y a un risque d'effets secondaires doivent être pris en considération. Voir Pourquoi utiliser "pour..." avec matrice d'itération une mauvaise idée? pour plus de détails.

Comme une alternative à for...in, il y a maintenant aussi pour pour...de. L'exemple suivant montre la différence entre un for...of boucle et un 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
}

Remarque :

Vous devez également considérer qu'aucune version de Internet Explorer prend en charge for...of (Edge 12+ ne) et que for...in nécessite au moins IE10.

---

Option 4 : Array.le prototype.forEach()

Une alternative à For-boucles est Array.prototype.forEach(), qui utilise la syntaxe suivante :

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

Remarque :

Array.prototype.forEach() est pris en charge par tous les navigateurs modernes, ainsi que IE9+.

---

Option 5 : jQuery.chacun()

De plus en plus des quatre autres options mentionnées, jQuery a aussi son propre foreach variation.

Il utilise la syntaxe suivante :

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

Utiliser Jquery chaque. Il existe d'autres moyens, mais chacun est conçu à cet effet.

$.each(substr, function(index, value) { 
  alert(value); 
});

Et ne mettez pas de virgule après le dernier numéro.

essayez ceci:

$.grep(array, function(element) {

})

D'autres moyens de l'itération à travers array/string avec des effets secondaires

JS:

var str = '21,32,234,223';
var substr = str.split(',');

substr.reduce((a,x)=> console.log('reduce',x), 0)        //return undefined

substr.every(x=> { console.log('every',x); return true}) //return true

substr.some(x=> { console.log('some',x); return false})  //return false

substr.map(x=> console.log('map',x));                    //return array
 
str.replace(/(\d+)/g, x=> console.log('replace',x))      //return string