Comment boucler tableau dans jQuery?
J'essaie de passer en boucle dans 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 dans le droit chemin s'il vous plaît?
(Mise à jour: mon autre réponse ici expose les options non-jQuery de manière beaucoup plus détaillée. La troisième option ci-dessous, jQuery.each, n'y figure cependant pas.)
Quatre options:
Boucle générique:
var i;
for (i = 0; i < substr.length; ++i) {
// do something with `substr[i]`
}
ou en 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 de préservation du sens de this dans le corps de la boucle, pas de surcharge inutile de appels de fonctions (par exemple, dans théorie plus rapidement, même si vous auriez en fait tellement d'éléments que vous auriez probablement d'autres problèmes; détails ).
ES5's forEach:
A partir de ECMAScript5, les tableaux ont une fonction forEach qui facilite la lecture en boucle du tableau:
substr.forEach(function(item) {
// do something with `item`
});
Note: Il y a beaucoup d'autres fonctions, pas seulement forEach; voir la réponse est mentionnée ci-dessus pour plus de détails.)
Advantages : Déclaratif, peut utiliser une fonction prédéfinie pour l'itérateur si vous en avez un à portée de main, si votre corps de boucle est complexe, la portée d'un appel de fonction est parfois utile, pas besoin d'un i variable dans votre étendue contenant.
Inconvénients : Si vous utilisez this dans le code contenant et que vous souhaitez utiliser this dans votre rappel forEach, vous devez soit A) Collez-le dans une variable pour pouvoir l'utiliser dans la fonction, B) Passez-le comme second argument de forEach pour que forEach le définisse comme this pendant le rappel, ou C) Utilisez une ES2015 + fonction de flèche, qui se ferme sur this. Si vous ne faites pas l'une de ces choses, dans le rappel this sera undefined (en mode strict) ou l'objet global (window) en mode détaché. Il y avait un deuxième inconvénient: forEach n'était pas universellement pris en charge, mais ici en 2018, le seul navigateur que vous allez rencontrer et qui n'a pas forEach est IE8 (et il peut ne soyez pas correctement polyfilled là-bas, soit).
Le for-of de ES2015 +:
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 en haut de la réponse pour savoir comment cela fonctionne.
Advantages : Simple, simple, offre une variable de portée contenue (ou constante, ci-dessus) pour l'entrée du tableau.
Inconvénients : non pris en charge par les versions d'IE.
jQuery.each:
jQuery.each(substr, function(index, item) {
// do something with `item` (or `this` is also `item` if you like)
});
( Lien vers la documentation )
Avantages : Tous les mêmes avantages que forEach, plus vous savez que c'est là depuis que vous utilisez jQuery.
Inconvénients : Si vous utilisez this dans le code qui le contient, vous devez le coller dans une variable pour pouvoir l'utiliser dans la fonction, car this signifie autre chose dans la fonction.
Vous pouvez cependant éviter la chose this, soit 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 de flèche:
jQuery.each(substr, (index, item) => {
// do something with `item` (`this` is the same as it was outside)
});
Ce que PAS == à faire:
Don't utilisez for..in pour cela (ou si vous le faites, faites-le avec les précautions appropriées). Vous verrez des gens dire à (en fait, brièvement, une réponse a été donnée ici), mais for..in ne fait pas ce que beaucoup de gens pensent que c'est le cas (il fait quelque chose d'encore plus utile!). Plus précisément, for..in parcourt les noms de propriétés énumérables d'un objet (et non 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 que la plupart du temps cela fonctionne dans un déploiement sans propriétés. 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/
Je devrais adoucir le "ne pas" ci-dessus. Si vous avez affaire à des tableaux fragmentés (par exemple, le tableau a 15 éléments au total mais leurs index sont éparpillés sur une plage allant de 0 à 150 000 pour une raison quelconque, et donc length vaut 150 001), et Si vous utilisez les sauvegardes appropriées comme hasOwnProperty et que le nom de la propriété est réellement numérique (voir le lien ci-dessus), for..in peut être un moyen parfaitement raisonnable d'éviter beaucoup de boucles inutiles, car seule la les index remplis seront énumérés.
jQuery.each ()
jQuery.each(array, callback)
itération du tableau
jQuery.each(array, function(Integer index, Object value){});
itération de l'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 array
pour la 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
Pas besoin de jquery ici, juste une boucle for:
var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
alert(substr[i]);
}
Utilisez la fonction each() de jQuery.
Voici un exemple:
$.each(currnt_image_list.split(','), function(index, value) {
alert(index + ': ' + value);
});
Utilisez Jquery chacun. Il y a d'autres moyens mais chacun est conçu à cet effet.
$.each(substr, function(index, value) {
alert(value);
});
Et ne mettez pas la virgule après le dernier chiffre.
Vous pouvez utiliser une boucle for:
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) {
})
es6 syntaxe avec fonction flèche et interpolation:
var data=["a","b","c"];
$(data).each((index, element) => {
console.log(`current index : ${index} element : ${element}`)
});
Méthodes alternatives d'itération par tableau/chaîne avec 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