Boucle dans un tableau en JavaScript
En Java, vous pouvez utiliser une boucle for pour parcourir les objets d'un tableau comme suit:
String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
// Do something
}
Pouvez-vous faire la même chose en JavaScript?
Utilisez une boucle for séquentielle:
var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
console.log(myStringArray[i]);
//Do something
}@zipcodeman suggère d'utiliser l'instruction for...in, mais pour les tableaux itératifs, for-in doit être évité, cette instruction étant destinée à enumerate les propriétés de l'objet.
Il ne devrait pas être utilisé pour des objets de type tableau parce que:
- L'ordre des itérations n'est pas garanti, les index du tableau ne peuvent pas être visités par ordre numérique.
- Les propriétés héritées sont également énumérées.
Le deuxième point est que cela peut vous donner beaucoup de problèmes, par exemple, si vous étendez l'objet Array.prototype pour y inclure une méthode, cette propriété sera également énumérée.
Par exemple:
Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];
for (var i in array) {
console.log(array[i]);
}Le code ci-dessus console "a", "b", "c" et "foo!".
Cela peut être particulièrement problématique si vous utilisez une bibliothèque qui repose fortement sur l’augmentation de prototypes natifs (comme MooTools, par exemple).
L’instruction for-in, comme je l’ai dit précédemment, existe pour énumérer} propriétés d’objet, par exemple:
var obj = {
"a": 1,
"b": 2,
"c": 3
};
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
// or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
console.log("prop: " + prop + " value: " + obj[prop])
}
}Dans l'exemple ci-dessus, la méthode hasOwnProperty vous permet d'énumérer uniquement propriétés propres}, c'est-à-dire uniquement les propriétés que l'objet possède physiquement, pas les propriétés héritées.
Je vous recommande de lire l'article suivant:
Oui, en supposant que votre implémentation inclue la fonction for...of introduite dans ECMAScript 2015 (la version "Harmony" ...), ce qui est une hypothèse relativement sûre de nos jours.
Cela fonctionne comme ceci:
// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
// ... do something with s ...
}
Ou mieux encore, puisque ECMAScript 2015 fournit également des variables à portée de bloc via let et const:
// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
// ... do something with s ...
}
// s is no longer defined here
Cependant, certains développeurs JavaScript travaillent encore dans un environnement inexistant, en particulier si vous écrivez du code à exécuter dans des navigateurs Web, où les développeurs de sites ne savent souvent pas quel navigateur/quelle version seront utilisés par leurs clients.
Si vous pouvez supposer que l'interpréteur JavaScript est conforme à l'édition previous de la spécification ECMAScript (qui exclut, par exemple, les versions d'Internet Explorer antérieures à 9), vous pouvez utiliser la méthode itératrice forEach à la place d'une boucle. Dans ce cas, vous passez une fonction à appeler sur chaque élément du tableau:
var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) {
// ... do something with s ...
} );
Mais si même cela est trop difficile à supposer et que vous voulez quelque chose qui fonctionne dans les versions all de JavaScript, vous devez utiliser une boucle de comptage explicite. La version la plus sûre, qui gère correctement les tableaux épars, ressemble à ceci:
var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
if (i in myStringArray) {
s = myStringArray[i];
// ... do something with s ...
}
}
L'affectation de la valeur de longueur à la variable locale (par opposition à l'inclusion de l'expression myStringArray.length complète dans la condition de boucle) peut avoir un impact significatif sur les performances, car elle ignore chaque fois une recherche de propriété. en utilisant Rhino sur ma machine, l’accélération est de 43%.
Vous verrez souvent la longueur de la mise en cache effectuée dans la clause d'initialisation de la boucle, comme ceci:
var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {
La syntaxe for...in mentionnée par d'autres permet de boucler sur les propriétés d'un objet; puisqu'un tableau en JavaScript n'est qu'un objet avec des noms de propriété numériques (et une propriété length mise à jour automatiquement), vous pouvez théoriquement boucler un tableau avec ce tableau. Mais le problème est qu’elle ne se limite pas aux valeurs des propriétés numériques (rappelez-vous que même les méthodes ne sont en réalité que des propriétés dont la valeur est une fermeture) et qu’elle n’itère pas plus que celles de l’ordre numérique. Par conséquent, la syntaxe for...in devrait pas être utilisée pour la lecture en boucle dans les tableaux.
Vous pouvez utiliser map, technique de programmation fonctionnelle également disponible dans d'autres langages tels que Python et Haskell .
[1,2,3,4].map( function(item) {
alert(item);
})
La syntaxe générale est la suivante:
array.map(func)
En général, func prendrait un paramètre, qui est un élément du tableau. Mais dans le cas de JavaScript, il peut prendre un deuxième paramètre qui est l'index de l'élément et un troisième paramètre qui est le tableau lui-même.
La valeur de retour de array.map est un autre tableau, vous pouvez donc l'utiliser comme ceci:
var x = [1,2,3,4].map( function(item) {return item * 10;});
Et maintenant, x est [10,20,30,40].
Vous n'êtes pas obligé d'écrire la fonction inline. Ce pourrait être une fonction séparée.
var item_processor = function(item) {
// Do something complicated to an item
}
new_list = my_list.map(item_processor);
ce qui serait en quelque sorte équivalent à:
for (item in my_list) {item_processor(item);}
Sauf que vous n'obtenez pas le new_list.
En JavaScript, il n'est pas conseillé de parcourir un tableau avec une boucle for-in, mais il est préférable d'utiliser une boucle for telle que
for(var i=0, len=myArray.length; i < len; i++){}
Il est également optimisé ("mise en cache" de la longueur du tableau). Si vous souhaitez en savoir plus, lisez mon post sur le sujet .
pour (var s de myStringArray) {
(Répondant directement à votre question: maintenant vous pouvez!)
La plupart des autres réponses sont exactes, mais elles ne mentionnent pas (à ce jour) que Script ECMA 6 2015 apporte un nouveau mécanisme pour effectuer l'itération, la boucle for..of.
Cette nouvelle syntaxe est le moyen le plus élégant d'itérer un tableau en javascript (tant que vous n'avez pas besoin de l'index d'itération), mais elle n'est pas encore largement prise en charge par les navigateurs.
Il fonctionne actuellement avec Firefox 13+, Chrome 37+ et ne fonctionne pas nativement avec les autres navigateurs (voir la compatibilité de navigateur ci-dessous). Heureusement, nous avons des compilateurs JS (tels que Babel ) qui nous permettent d’utiliser les fonctionnalités de nouvelle génération aujourd’hui.
Cela fonctionne également sur Node (je l'ai testé sur la version 0.12.0).
Itération d'un tableau
// You could also use "let" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) {
console.log(letter);
}
Itération d'un tableau d'objets
var band = [
{firstName : 'John', lastName: 'Lennon'},
{firstName : 'Paul', lastName: 'McCartney'}
];
for(var member of band){
console.log(member.firstName + ' ' + member.lastName);
}
Itérer un générateur:
(extrait de https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of )
function* fibonacci() { // a generator function
let [prev, curr] = [1, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
}
Tableau de compatibilité:http://kangax.github.io/es5-compat-table/es6/#For..des boucles
Spec:http://wiki.ecmascript.org/doku.php?id=harmony:iterators
}
Opera, Safari, Firefox et Chrome partagent désormais un ensemble de méthodes Array améliorées permettant d’optimiser de nombreuses boucles communes.
Vous n’avez peut-être pas besoin de tous, mais ils peuvent être très utiles, ou le seraient si tous les navigateurs les prenaient en charge.
Mozilla Labs a publié les algorithmes qu’ils et WebKit utilisent, afin que vous puissiez les ajouter vous-même.
filter renvoie un tableau d'éléments satisfaisant certaines conditions ou tests.
every renvoie true si tous les membres du groupe réussissent le test.
some renvoie true si aucun d'entre eux réussit le test.
forEach exécute une fonction sur chaque membre du tableau et ne renvoie rien.
map est semblable à forEach, mais renvoie un tableau des résultats de l'opération pour chaque élément.
Ces méthodes prennent toutes une fonction pour leur premier argument et ont un second argument facultatif, qui est un objet dont vous voulez imposer la portée aux membres du tableau lors de leur lecture en boucle.
Ignorez-le jusqu'à ce que vous en ayez besoin.
indexOf et lastIndexOf trouvent la position appropriée du premier ou du dernier élément qui correspond exactement à son argument.
(function(){
var p, ap= Array.prototype, p2={
filter: function(fun, scope){
var L= this.length, A= [], i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
val= this[i];
if(fun.call(scope, val, i, this)){
A[A.length]= val;
}
}
++i;
}
}
return A;
},
every: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i<L){
if(i in this && !fun.call(scope, this[i], i, this))
return false;
++i;
}
return true;
}
return null;
},
forEach: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
fun.call(scope, this[i], i, this);
}
++i;
}
}
return this;
},
indexOf: function(what, i){
i= i || 0;
var L= this.length;
while(i< L){
if(this[i]=== what)
return i;
++i;
}
return -1;
},
lastIndexOf: function(what, i){
var L= this.length;
i= i || L-1;
if(isNaN(i) || i>= L)
i= L-1;
else
if(i< 0) i += L;
while(i> -1){
if(this[i]=== what)
return i;
--i;
}
return -1;
},
map: function(fun, scope){
var L= this.length, A= Array(this.length), i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
A[i]= fun.call(scope, this[i], i, this);
}
++i;
}
return A;
}
},
some: function(fun, scope){
var i= 0, L= this.length;
if(typeof fun== 'function'){
while(i<L){
if(i in this && fun.call(scope, this[i], i, this))
return true;
++i;
}
return false;
}
}
}
for(p in p2){
if(!ap[p])
ap[p]= p2[p];
}
return true;
})();
Utilisez la boucle while ...
var i=0, item, items = ['one','two','three'];
while(item = items[i++]){
console.log(item);
}
journaux: 'un', 'deux', 'trois'
Et pour l'ordre inverse, une boucle encore plus efficace
var items = ['one','two','three'], i = items.length;
while(i--){
console.log(items[i]);
}
journaux: 'trois', 'deux', 'un'
Ou la boucle for classique
var items = ['one','two','three']
for(var i=0, l = items.length; i < l; i++){
console.log(items[i]);
}
journaux: 'un', 'deux', 'trois'
Référence: http://www.sitepoint.com/google-closure-how-not-to-write-javascript/
Si vous voulez un moyen concis d’écrire une boucle rapide et, vous pouvez effectuer une itération inverse:
for (var i=myArray.length;i--;){
var item=myArray[i];
}
Cela présente l'avantage de mettre en cache la longueur (similaire à for (var i=0, len=myArray.length; i<len; ++i) et contrairement à for (var i=0; i<myArray.length; ++i)) tout en réduisant le nombre de caractères à taper.
Il arrive même que vous deviez effectuer une itération inverse, par exemple lorsque vous effectuez une itération sur un NodeList en direct où vous prévoyez de supprimer des éléments du DOM pendant l'itération.
Quelques cas d'utilisation de la boucle dans un tableau dans la méthode de programmation fonctionnelle en JavaScript:
1. Passez en boucle dans un tableau
const myArray = [{x:100}, {x:200}, {x:300}];
myArray.forEach((element, index, array) => {
console.log(element.x); // 100, 200, 300
console.log(index); // 0, 1, 2
console.log(array); // same myArray object 3 times
});
Remarque: Array.prototype.forEach () n'est pas une manière fonctionnelle à proprement parler, car la fonction utilisée en tant que paramètre d'entrée n'est pas censée renvoyer une valeur, qui ne peut donc être considérée comme une fonction pure.
2. Vérifier si l'un des éléments d'un tableau passe un test
const people = [
{name: 'John', age: 23},
{name: 'Andrew', age: 3},
{name: 'Peter', age: 8},
{name: 'Hanna', age: 14},
{name: 'Adam', age: 37}];
const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true
3. Transformer en un nouveau tableau
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]
Remarque: La méthode map () crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
4. Résumer une propriété particulière et calculer sa moyenne
const myArray = [{x:100}, {x:200}, {x:300}];
const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300
const average = sum / myArray.length;
console.log(average); // 200
5. Créer un nouveau tableau basé sur l'original mais sans le modifier
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => {
return {
...element,
x: element.x * 2
};
});
console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]
6. Compter le nombre de chaque catégorie
const people = [
{name: 'John', group: 'A'},
{name: 'Andrew', group: 'C'},
{name: 'Peter', group: 'A'},
{name: 'James', group: 'B'},
{name: 'Hanna', group: 'A'},
{name: 'Adam', group: 'B'}];
const groupInfo = people.reduce((groups, person) => {
const {A = 0, B = 0, C = 0} = groups;
if (person.group === 'A') {
return {...groups, A: A + 1};
} else if (person.group === 'B') {
return {...groups, B: B + 1};
} else {
return {...groups, C: C + 1};
}
}, {});
console.log(groupInfo); // {A: 3, C: 1, B: 2}
7. Récupérer un sous-ensemble d'un tableau en fonction de critères particuliers
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}]
Remarque: La méthode filter () crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.
8. Trier un tableau
const people = [
{ name: "John", age: 21 },
{ name: "Peter", age: 31 },
{ name: "Andrew", age: 29 },
{ name: "Thomas", age: 25 }
];
let sortByAge = people.sort(function (p1, p2) {
return p1.age - p2.age;
});
console.log(sortByAge);
9. Trouver un élément dans un tableau
const people = [ {name: "john", age:23},
{name: "john", age:43},
{name: "jim", age:101},
{name: "bob", age:67} ];
const john = people.find(person => person.name === 'john');
console.log(john);
La méthode Array.prototype.find () renvoie la valeur du premier élément du tableau satisfaisant la fonction de test fournie.
Références
Il existe différentes manières de parcourir un tableau en JavaScript.
Boucle générique:
var i;
for (i = 0; i < substr.length; ++i) {
// Do something with `substr[i]`
}
ES5 pour chaque:
substr.forEach(function(item) {
// Do something with `item`
});
jQuery.each:
jQuery.each(substr, function(index, item) {
// Do something with `item` (or `this` is also `item` if you like)
});
Jetez un oeil sur this pour obtenir des informations détaillées ou vous pouvez également vérifier MDN pour une boucle dans un tableau en JavaScript et utiliser jQuery check jQuery pour each .
Il existe un moyen de le faire lorsque vous avez très peu de portée implicite dans votre boucle et de supprimer les variables supplémentaires.
var i = 0,
item;
// note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){
item; // This is the string at the index.
}
Ou si vous voulez vraiment obtenir l'identifiant et avoir une boucle for vraiment classique:
var i = 0,
len = myStringArray.length; // cache the length
for ( ; i < len ; i++ ){
myStringArray[i]; // Don't use this if you plan on changing the length of the array
}
Les navigateurs modernes supportent tous les méthodes itérateur forEach, map, reduce, filter et une foule d'autres méthodes sur le prototype Array .
Je recommande fortement d'utiliser la bibliothèque underscore.js . Il vous fournit diverses fonctions que vous pouvez utiliser pour parcourir des tableaux/collections.
Par exemple:
_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...
Boucle de tableau:
for(var i = 0; i < things.length; i++){
var thing = things[i];
console.log(thing);
}
Boucle d'objet:
for(var prop in obj){
var propValue = obj[prop];
console.log(propValue);
}
Oui, vous pouvez faire la même chose en JavaScript en utilisant une boucle, mais sans s'y limiter, de nombreuses façons de faire en boucle sur des tableaux dans JavaScrip. Imaginez que vous ayez ce tableau ci-dessous et que vous souhaitiez le faire en boucle:
var arr = [1, 2, 3, 4, 5];
Ce sont les solutions:
1) Pour la boucle
La boucle for est une méthode courante pour parcourir les tableaux en JavaScript, mais elle n’est pas considérée comme la solution la plus rapide pour les grands tableaux:
for (var i=0, l=arr.length; i<l; i++) {
console.log(arr[i]);
}
2) Boucle While
La boucle While est considérée comme le moyen le plus rapide de parcourir des tableaux longs, mais elle est généralement moins utilisée dans le JavaScript:
let i=0;
while (arr.length>i) {
console.log(arr[i]);
i++;
}
3) Faites en
Faites tout en faisant la même chose qu'avec while avec une différence de syntaxe comme ci-dessous:
let i=0;
do {
console.log(arr[i]);
i++;
}
while (arr.length>i);
Ce sont les principaux moyens de créer des boucles javascript, mais il existe peu d'autres moyens de le faire.
Nous utilisons également la boucle for in pour boucler des objets en javascript.
Regardez également les fonctions map(), filter(), reduce() etc. sur Array en JavaScript. Ils peuvent faire les choses beaucoup plus rapidement et mieux que d'utiliser while et for.
C'est un bon article si vous souhaitez en savoir plus sur les fonctions asynchrones des tableaux en JavaScript.
La programmation fonctionnelle a fait sensation dans le monde du développement ces jours-ci. Et pour cause: fonctionnel Des techniques peuvent vous aider à écrire davantage de code déclaratif plus facile à comprendre d’un coup d’œil, refactoriser et tester.
L’une des pierres angulaires de la programmation fonctionnelle est son utilisation particulière des listes et des opérations de liste. Et ces choses sont exactement ce que le sonner comme ils sont: tableaux de choses, et ce que vous leur faites . Mais la mentalité fonctionnelle les traite un peu différemment que vous pourrait s'attendre.
Cet article examinera de près ce que j'aime appeler les "grandes opérations de liste Trois": mapper, filtrer et réduire. Enveloppant votre tête autour de ces trois fonctions est un pas important vers la capacité écrire un code fonctionnel propre, et ouvre grand les portes techniques puissantes de programmation fonctionnelle et réactive.
Cela signifie également que vous n’aurez plus jamais à écrire une boucle for.
En savoir plus >> ici :
Si vous utilisez la bibliothèque jQuery, envisagez d'utiliser http://api.jquery.com/jQuery.each/
De la documentation:
jQuery.each( collection, callback(indexInArray, valueOfElement) )Retourne: Objet
Description: Fonction générique d'itérateur, qui peut être utilisée pour effectuer une itération transparente sur des objets et des tableaux. Les tableaux et les objets de type tableau dotés d'une propriété de longueur (tels que l'objet arguments d'une fonction) sont itérés par un index numérique, compris entre 0 et longueur-1. Les autres objets sont itérés via leurs propriétés nommées.
La fonction
$.each()n'est pas identique à$(selector).each(), utilisée pour itérer, exclusivement, sur un objet jQuery. La fonction$.each()peut être utilisée pour parcourir toute collection, qu'il s'agisse d'une carte (objet JavaScript) ou d'un tableau. Dans le cas d'un tableau, le rappel reçoit un index et une valeur de tableau correspondante à chaque fois. (La valeur est également accessible via le mot cléthis, mais Javascript encapsulera toujours la valeurthissous la forme d'unObjectmême s'il s'agit d'une simple chaîne ou d'une valeur numérique.) La méthode retourne son premier argument, l'objet qui a été itéré.
Si quelqu'un s'intéresse au côté performance des multiples mécanismes disponibles pour les itérations Array .__, j'ai préparé les tests JSPerf suivants:
https://jsperf.com/fastest-array-iterator
Résultats :
L'itérateur for() traditionnel est de loin la méthode la plus rapide, spécialement lorsqu'il est utilisé avec la longueur de tableau mise en cache.
let arr = [1,2,3,4,5];
for(let i=0, size=arr.length; i<size; i++){
// do something
}
Les méthodes Array.prototype.forEach() et Array.prototype.map() sont les approximations les plus lentes, probablement en raison de la surcharge de l'appel function
Je n'ai pas encore vu cette variante, que j'aime personnellement le mieux:
Étant donné un tableau:
var someArray = ["some", "example", "array"];
Vous pouvez le parcourir sans accéder à la propriété length:
for (var i=0, item; item=someArray[i]; i++) {
// item is "some", then "example", then "array"
// i is the index of item in the array
alert("someArray[" + i + "]: " + item);
}
Voir ce JsFiddle démontrant que: http://jsfiddle.net/prvzk/
Cela ne fonctionne que pour les tableaux qui sont pas clairsemés. Cela signifie qu’il existe une valeur à chaque index du tableau. Cependant, j'ai constaté qu'en pratique, je n'utilise presque jamais de tableaux épars en Javascript ... Dans de tels cas, il est généralement beaucoup plus facile d'utiliser un objet en tant que carte/table de hachage. Si vous avez un tableau fragmenté et souhaitez boucler sur 0 .. length-1, vous avez besoin de la construction for (var i = 0; i <someArray.length; ++ i), mais vous avez toujours besoin d'un if boucle pour vérifier si l’élément de l’index courant est bien défini.
De plus, comme le mentionne CMS dans un commentaire ci-dessous, vous ne pouvez l’utiliser que sur des tableaux qui ne contiennent aucune valeur fausse. Le tableau de chaînes de l'exemple fonctionne, mais si vous avez des chaînes vides, ou des nombres qui sont 0 ou NaN, etc., la boucle sera interrompue prématurément. Encore une fois dans la pratique, cela ne pose pratiquement jamais de problème pour moi, mais c’est une chose à garder à l’esprit, ce qui en fait une boucle à laquelle réfléchir avant de l’utiliser ... Cela peut le disqualifier pour certaines personnes :)
Ce que j'aime dans cette boucle c'est:
- C'est court pour écrire
- Pas besoin d'accéder (et même de mettre en cache) la propriété length
- L'élément auquel accéder est défini automatiquement dans la boucle Body sous le nom que vous choisissez.
- Se combine très naturellement avec array.Push et array.splice pour utiliser des tableaux comme des listes/piles
La raison pour laquelle cela fonctionne est que la spécification de tableau impose que lorsque vous lisez un élément à partir d'un index> = la longueur du tableau, il renverra undefined. Lorsque vous écrivez à un tel endroit, la longueur sera mise à jour.
Pour moi, cette construction imite le plus étroitement la syntaxe Java 5 que j'aime beaucoup:
for (String item : someArray) {
}
... avec l'avantage supplémentaire de connaître également l'indice actuel dans la boucle
Le moyen le plus élégant et rapide
var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
value + 1
}
http://jsperf.com/native-loop-performance/8
Edité (parce que j'avais tort)
Comparer les méthodes pour parcourir en boucle un tableau de 100 000 éléments et effectuer une opération minimale avec la nouvelle valeur chaque fois.
Préparation:
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
Benchmark.prototype.setup = function() {
// Fake function with minimal action on the value
var tmp = 0;
var process = function(value) {
tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
};
// Declare the test Array
var arr = [];
for (var i = 0; i < 100000; i++)
arr[i] = i;
};
</script>
Tests:
<a href="http://jsperf.com/native-loop-performance/16"
title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>
Il y a plusieurs façons de le faire en JavaScript. Les deux premiers exemples sont des exemples JavaScript. La troisième utilise une bibliothèque JavaScript, c’est-à-dire que jQuery utilise la fonction .each().
var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
alert(myStringArray[i]);
}var myStringArray = ["hello", "World"];
for (var i=0; i < myStringArray.length; i++) {
alert(myStringArray[i]);
}var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
alert(value);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Il existe une méthode pour parcourir uniquement les propriétés propres à un objet, sans inclure celles du prototype:
for (var i in array) if (array.hasOwnProperty(i)) {
// do something with array[i]
}
mais il sera toujours itérer sur les propriétés personnalisées.
En javascript, toute propriété personnalisée peut être affectée à n'importe quel objet, y compris un tableau.
Si vous voulez parcourir un tableau éparpillé, utilisez for (var i = 0; i < array.length; i++) if (i in array) ou array.forEach avec es5shim.
En JavaScript, il existe de nombreuses solutions pour boucler un tableau.
Le code ci-dessous est populaire
/** Declare inputs */
const items = ['Hello', 'World']
/** Solution 1. Simple for */
console.log('solution 1. simple for')
for (let i = 0; i < items.length; i++) {
console.log(items[i])
}
console.log()
console.log()
/** Solution 2. Simple while */
console.log('solution 2. simple while')
let i = 0
while (i < items.length) {
console.log(items[i++])
}
console.log()
console.log()
/** Solution 3. forEach*/
console.log('solution 3. forEach')
items.forEach(item => {
console.log(item)
})
console.log()
console.log()
/** Solution 4. for-of*/
console.log('solution 4. for-of')
for (const item of items) {
console.log(item)
}
console.log()
console.log()L'approche optimisée consiste à mettre en cache la longueur du tableau et à utiliser un modèle unique var initialisant toutes les variables avec un mot clé unique var.
var i, max, myStringArray = ["Hello","World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
alert(myStringArray[i]);
//Do something
}
Si l'ordre des itérations n'a pas d'importance, essayez la boucle inversée, elle est la plus rapide car elle réduit les tests de condition de surdébit et la décrémentation s'effectue dans une déclaration:
var i,myStringArray = ["item1","item2"];
for (i = myStringArray.length; i--) {
alert(myStringArray[i]);
}
ou mieux et plus propre à utiliser en boucle:
var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
// do something with fruits[i]
}
Réponse courte: oui. Vous pouvez faire avec ça:
var myArray = ["element1", "element2", "element3", "element4"];
for (i = 0; i < myArray.length; i++) {
console.log(myArray[i]);
}
Dans une console de navigateur, vous pouvez voir quelque chose comme "élément1", "élément2", etc., imprimé.
La meilleure façon, à mon avis, consiste à utiliser la fonction Array.forEach. Si vous ne pouvez pas utiliser cela, je suggèrerais que le polyfill de MDN rende i disponible, c’est certainement le moyen le plus sûr d’itérer un tableau en JavaScript.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Donc, comme d'autres l'ont suggéré, c'est presque toujours ce que vous voulez:
var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
sum += n;
});
Cela garantit que tout ce dont vous avez besoin dans le cadre du traitement du tableau reste dans ce cadre et que vous ne traitez que les valeurs du tableau, pas les propriétés de l'objet et les autres membres, ce qui est la raison d'être de .. dans.
dans la plupart des cas, en utilisant un style c normal pour les boucles, il est important de se rappeler que tout ce qui se trouve dans la boucle partage sa portée avec le reste de votre programme, le {} ne crée pas de nouvelle portée.
Par conséquent:
var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];
for(var i = 0; i<numbers.length; ++i){
sum += numbers[i];
}
alert(i);
affichera "11" - ce qui peut être ou ne pas être ce que vous voulez.
Exemple de travail jsFiddle: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/
Par exemple, j'ai utilisé dans une console Firefox:
[].forEach.call(document.getElementsByTagName('pre'), function(e){
console.log(e);
})
var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
console.log(i,j);
}
Beaucoup plus propre ...
Si vous voulez utiliser jQuery, sa documentation contient un exemple intéressant:
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
Ce n'est pas 100% identique, mais similaire:
var myStringArray = ['Hello', 'World']; // array uses [] not {}
for (var i in myStringArray) {
console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item
}Juste une solution simple en une ligne
arr = ["table", "chair"];
// solution
arr.map((e) => {
console.log(e);
return e;
});Bien sûr, c'est inefficace et beaucoup le méprisent, mais c'est l'un des plus proches de ceux mentionnés:
var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
// Do something
})
Il semble que la liste de toutes les variantes sauf forEach par lodash :
_.forEach([1, 2], (value) => {
console.log(value);
});
Eh bien, que diriez-vous de ceci:
for (var key in myStringArray) {
console.log(myStringArray[key]);
}
var myStringArray = ["hello", "World"];
myStringArray.forEach(function(val, index){
console.log(val, index);
})
Il est préférable d’utiliser une boucle for séquentielle:
for (var i = 0; i < myStringArray.length; i++) {
// Do something
}
var obj = ["one","two","three"];
for(x in obj){
console.log(obj[x]);
}
Faire une boucle récursive dans un tableau
const data = ['one', 'two', 'three']
const loop = (items, index=0) => {
if (items.length === index) {
return;
}
console.log(items[index], index)
loop(items, index+=1)
}
loop(data)
Vous pouvez soit utiliser arr.forEach(...):
var arr = ["Apple", "banana", "cherry", "mango"];
arr.forEach((item, index)=>{
//Some code...
});
Ou arr.map(...):
var arr = ["Apple", "banana", "cherry", "mango"];
arr.map((item, index)=>{
//Some code...
});
Ou le jquery ou pour les moyens de boucle mentionnés précédemment.
var array = ['hai', 'hello', 'how', 'are', 'you']
$(document).ready(function () {
$('#clickButton').click(function () {
for (var i = 0; i < array.length; i++) {
alert(array[i])
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input id="clickButton" value="click Me" type="button"/>
<div id="show"></div>