J'essaie de parcourir un tableau. J'ai le code suivant:

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

J'essaie d'extraire toutes les données du tableau. Quelqu'un peut-il me conduire sur la bonne voie, s'il vous plaît?

(Mise à jour: mon autre réponse ici présente les options non jQuery de manière plus approfondie. La troisième option ci-dessous, cependant jQuery.each, n'y figure pas.)

Quatre options:

Boucle générique:

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

ou dans ES2015 +:

for (let i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

Avantages : simple, pas de dépendance à jQuery, facile à comprendre, pas de problème avec la préservation de la signification de l' thisintérieur du corps de la boucle, pas de surcharge inutile des appels de fonction (par exemple, en théorie plus rapide, bien qu'en fait vous devriez ont tellement d'éléments que les chances sont que vous auriez d'autres problèmes; détails ).

ES5 forEach:

Depuis ECMAScript5, les tableaux ont une forEachfonction qui facilite le bouclage du tableau:

substr.forEach(function(item) {
    // do something with `item`
});

Lien vers les documents

(Remarque: il existe de nombreuses autres fonctions, pas seulement forEach; voir la réponse référencée ci-dessus pour plus de détails.)

Avantages : Déclaratif, peut utiliser une fonction prédéfinie pour l'itérateur si vous en avez une à portée de main, si votre corps de boucle est complexe, la portée d'un appel de fonction est parfois utile, pas besoin de ivariable dans votre portée contenante.

Inconvénients : si vous utilisez thisdans le code conteneur et que vous souhaitez utiliser thisdans votre forEachrappel, vous devez soit A) le coller dans une variable afin de pouvoir l'utiliser dans la fonction, B) le passer comme deuxième argument à forEachso forEachle définit comme thislors du rappel, ou C) Utilisez une fonction de flèche ES2015 + , qui se ferme this. Si vous ne faites pas l'une de ces choses, le rappel thissera undefined(en mode strict) ou l'objet global ( window) en mode lâche. Autrefois, il y avait un deuxième inconvénient qui forEachn'était pas universellement pris en charge, mais ici en 2018, le seul navigateur que vous allez rencontrer qui n'a pas forEachest IE8 (et il ne peut pas être correctement polyfilled là, soit).

ES2015 + for-of:

for (const s of substr) { // Or `let` if you want to modify it in the loop body
    // do something with `s`
}

Voir la réponse liée en haut de cette réponse pour plus de détails sur la façon dont cela fonctionne.

Avantages : Simple, direct, offre une variable de portée contenue (ou constante, dans ce qui précède) pour l'entrée à partir du tableau.

Inconvénients : non pris en charge dans aucune version d'IE.

jQuery.each:

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

( Lien vers les documents )

Avantages : Tous les mêmes avantages que forEach, plus vous savez qu'il est là puisque vous utilisez jQuery.

Inconvénients : Si vous utilisez thisdans le code contenant, vous devez le coller dans une variable afin que vous puissiez l'utiliser dans la fonction, car thissignifie autre chose dans la fonction.

Vous pouvez cependant éviter le thisproblème en utilisant $.proxy:

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

... ou Function#bind:

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

... ou dans ES2015 ("ES6"), une fonction flèche:

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

À ne PAS faire:

Ne l' utilisez pasfor..in pour cela (ou si vous le faites, faites-le avec les garanties appropriées). Vous verrez des gens dire (en fait, brièvement il y avait une réponse ici disant cela), mais for..inne fait pas ce que beaucoup de gens pensent que cela fait (cela fait quelque chose d'encore plus utile!). Plus précisément, for..inparcourt les noms de propriété énumérables d'un objet (pas les index d'un tableau). Étant donné que les tableaux sont des objets et que leurs seules propriétés énumérables par défaut sont les index, il semble surtout fonctionner en quelque sorte dans un déploiement fade. Mais ce n'est pas une hypothèse sûre que vous pouvez simplement l'utiliser pour cela. Voici une exploration: http://jsbin.com/exohi/3

Je devrais adoucir le «ne pas» ci-dessus. Si vous avez affaire à des tableaux clairsemés (par exemple, le tableau a 15 éléments au total, mais leurs index sont répartis sur une plage de 0 à 150 000 pour une raison quelconque, et donc length150 001), et si vous utilisez des protections appropriées comme hasOwnPropertyet en vérifiant le le nom de la propriété est vraiment numérique (voir le lien ci-dessus), for..inpeut être un moyen parfaitement raisonnable d'éviter de nombreuses boucles inutiles, car seuls les index remplis seront énumérés.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

itération de tableau

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

itération d'objet

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

exemple :

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

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

boucles javascript pour le tableau

pour boucle

for (initialExpression; condition; incrementExpression)
  statement

exemple

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 dans

//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
}

pour chaque

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

Ressources

Boucles et itérateurs MDN

Pas besoin de jquery ici, juste une forboucle fonctionne:

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}

Option 1: la forboucle traditionnelle

Les bases

Une forboucle traditionnelle a trois composants:

1. l'initialisation: exécutée avant la première exécution du bloc look
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 fois après l'exécution du bloc de boucle

Ces trois composants sont séparés l'un de l'autre par un ;symbole. Le contenu de chacun de ces trois composants est facultatif, ce qui signifie que ce qui suit est la forboucle 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 forboucle 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 boucle fortraditionnelle 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. celui-là :

for (var key = 0, value = myArray[key], var 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.

Chacune de ces variantes est supportée par tous les navigateurs, y compris les anciens!

Option 2: la whileboucle

Une alternative à un for-loop est un while-loop. Pour parcourir un tableau, vous pouvez procéder comme suit:

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

Comme les for-loops traditionnels , les while-loops sont pris en charge par les navigateurs les plus anciens.

De plus, chaque boucle while peut être réécrite sous forme de forboucle. Par exemple, le while-loop ci-dessus se comporte exactement de la même manière que ce for-loop:

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

Option 3: for...inetfor...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 forboucle traditionnelle dans tous les cas, et il existe des effets secondaires potentiels qui doivent être pris en considération. 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...ofboucle et une for...inboucle:

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
}

Vous devez également considérer qu'aucune version d'Internet Explorer ne prend en charge for...of( Edge 12+ le fait) et cela for...innécessite au moins IE10.

Option 4: 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 que IE9 +.

Option 5: jQuery.each()

En plus des quatre autres options mentionnées, jQuery avait également sa propre foreachvariation.

Il utilise la syntaxe suivante:

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

Utilisez la each()fonction de jQuery.

Voici un exemple:

$.each(currnt_image_list.split(','), function(index, value) { 
  alert(index + ': ' + value); 
});

Utilisez jQuery each(). Il existe d'autres façons, mais chacune est conçue à cet effet.

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

Et ne mettez pas de virgule après le dernier chiffre.

Syntaxe ES6 avec fonction flèche et interpolation:

var data=["a","b","c"];
$(data).each((index, element) => {
        console.log(`current index : ${index} element : ${element}`)
    });

Vous pouvez utiliser une for()boucle:

var things = currnt_image_list.split(','); 
for(var i = 0; i < things.length; i++) {
    //Do things with things[i]
}

Essaye ça:

$.grep(array, function(element) {

})

Modes d'itération alternatifs à travers un tableau / chaîne avec des effets secondaires

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