En Java, vous pouvez utiliser une forboucle pour parcourir des objets dans un tableau comme suit:

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

Pouvez-vous faire de même en JavaScript?

Vous avez plusieurs options:

1. forBoucle séquentielle :

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(myStringArray[i]);
    //Do something
}

Avantages

• Fonctionne sur tous les environnements
• Vous pouvez utiliser breaket continuecontrôler les instructions de flux

Les inconvénients

• Trop verbeux
• Impératif
• Facile à avoir des erreurs ponctuelles (parfois aussi appelé erreur de poteau de clôture )

2. Array.prototype.forEach

La spécification ES5 a introduit de nombreuses méthodes de tableau bénéfiques, l'une d'entre elles, Array.prototype.forEachet elle nous donne un moyen concis d'itérer sur un tableau:

const array = ["one", "two", "three"]
array.forEach(function (item, index) {
  console.log(item, index);
});

Étant près de dix ans au moment de la publication de la spécification ES5 (décembre 2009), elle a été implémentée par presque tous les moteurs modernes dans les environnements de bureau, de serveur et mobiles, il est donc sûr de les utiliser.

Et avec la syntaxe de la fonction flèche ES6, c'est encore plus succinct:

array.forEach(item => console.log(item));

Les fonctions fléchées sont également largement implémentées, sauf si vous prévoyez de prendre en charge les anciennes plates-formes (par exemple, IE11); vous pouvez également aller en toute sécurité.

Avantages

• Très court et succinct.
• Déclaratif

Les inconvénients

• Impossible d'utiliser break/continue

Normalement, vous pouvez remplacer la nécessité de breaksortir des boucles impératives en filtrant les éléments du tableau avant de les itérer, par exemple:

array.filter(item => item.condition < 10)
     .forEach(item => console.log(item))

Gardez à l'esprit que si vous itérez un tableau pour en construire un autre , vous devriez utiliser map, j'ai vu cet anti-modèle tant de fois.

Anti-motif:

const numbers = [1,2,3,4,5], doubled = [];

numbers.forEach((n, i) => { doubled[i] = n * 2 });

Cas d'utilisation approprié de la carte :

const numbers = [1,2,3,4,5];
const doubled = numbers.map(n => n * 2);

console.log(doubled);

En outre, si vous essayez de réduire le tableau à une valeur, par exemple, vous souhaitez additionner un tableau de nombres, vous devez utiliser la méthode de réduction .

Anti-motif:

const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { sum += num });

Utilisation appropriée de réduire :

const numbers = [1,2,3,4,5];
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(sum);

3. ES6 for-ofdéclaration

La norme ES6 introduit le concept d'objets itérables et définit une nouvelle construction pour parcourir les données, l' for...ofinstruction.

Cette instruction fonctionne pour tout type d'objet itérable et également pour les générateurs (tout objet ayant une [Symbol.iterator]propriété).

Les objets tableau sont par définition des itérables intégrés dans ES6, vous pouvez donc utiliser cette instruction sur eux:

let colors = ['red', 'green', 'blue'];
for (const color of colors){
    console.log(color);
}

Avantages

• Il peut parcourir une grande variété d'objets.
• Peut utiliser des instructions de contrôle de flux normales ( break/ continue).
• Utile pour itérer des valeurs asynchrones en série.

Les inconvénients

• Si vous ciblez des navigateurs plus anciens, la sortie transpilée pourrait vous surprendre .

Ne pas utiliser for...in

@zipcodeman suggère l'utilisation de l' for...ininstruction, mais pour itérer les tableaux for-in, cette instruction est destinée à énumérer les propriétés des objets.

Il ne doit pas être utilisé pour les objets de type tableau car:

• L'ordre d'itération n'est pas garanti; les index de tableau ne peuvent pas être visités dans l'ordre numérique.
• Les propriétés héritées sont également énumérées.

Le deuxième point est que cela peut vous poser beaucoup de problèmes, par exemple, si vous étendez l' Array.prototypeobjet 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 consolera le journal "a", "b", "c" et "foo!".

Cela peut être particulièrement problématique si vous utilisez une bibliothèque qui dépend fortement de l'augmentation des prototypes natifs (comme MooTools).

L' for-ininstruction comme je l'ai déjà dit est là pour énumérer les propriétés des objets, 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 hasOwnPropertyméthode vous permet d'énumérer uniquement ses propres propriétés , c'est tout, uniquement les propriétés que possède physiquement l'objet, pas de propriétés héritées.

Je vous recommande de lire l'article suivant:

• Énumération VS itération

Oui, en supposant que votre implémentation inclut la fonctionnalité for...of introduite dans ECMAScript 2015 (la version "Harmony") ... ce qui est une hypothèse assez 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, car ECMAScript 2015 fournit également des variables de portée bloc:

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

(La variable sest différente à chaque itération, mais peut toujours être déclarée constà l'intérieur du corps de la boucle tant qu'elle n'y est pas modifiée.)

Une note sur les tableaux clairsemés: un tableau en JavaScript peut ne pas réellement stocker autant d'éléments que rapporté par son length; ce nombre déclaré est simplement supérieur de un à l'indice le plus élevé auquel une valeur est stockée. Si le tableau contient moins d'éléments que ne l'indique sa longueur, il est dit qu'il est rare . Par exemple, il est parfaitement légitime d'avoir un tableau avec des éléments uniquement aux index 3, 12 et 247; le rapport lengthd'un tel tableau est signalé comme 248, bien qu'il ne stocke en réalité que 3 valeurs. Si vous essayez d'accéder à un élément à tout autre index, le tableau semblera y avoir la undefinedvaleur. Donc, quand vous voulez "boucler" un tableau, vous avez une question à répondre: voulez-vous boucler sur toute la plage indiquée par sa longueur et son processusundefineds pour tout élément manquant, ou souhaitez-vous uniquement traiter les éléments réellement présents? Il existe de nombreuses applications pour les deux approches; cela dépend simplement de la raison pour laquelle vous utilisez le tableau.

Si vous parcourez un tableau avec for.. of, le corps de la boucle est exécuté lengthfois et la variable de contrôle de boucle est définie sur undefinedpour tous les éléments qui ne sont pas réellement présents dans le tableau. Selon les détails de votre code "faire quelque chose avec", ce comportement peut être ce que vous voulez, mais sinon, vous devez utiliser une approche différente.

Bien sûr, certains développeurs ont pas d'autre choix que d'utiliser de toute façon une approche différente, parce que , pour une raison quelconque , ils ciblez une version de JavaScript qui ne supporte pas encore for... of.

Tant que votre implémentation JavaScript est conforme à l' édition précédente de la spécification ECMAScript (qui exclut, par exemple, les versions d'Internet Explorer avant 9), vous pouvez utiliser la Array#forEachméthode itérateur au lieu 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 ...
} );

Contrairement à for... of, .forEachn'appelle la fonction que pour les éléments réellement présents dans le tableau. Si passé notre tableau hypothétique avec trois éléments et une longueur de 248, il n'appellera la fonction que trois fois, pas 248 fois. Il distingue également les éléments manquants des éléments réellement définis sur undefined; pour ce dernier, il appellera toujours la fonction, en passant undefinedcomme argument. Si cela est la façon dont vous voulez gérer des tableaux rares, .forEachpeut - être le chemin à parcourir , même si vos supports d'interprétation for... of.

La dernière option, qui fonctionne dans toutes les versions de JavaScript, est une boucle de comptage explicite . Vous comptez simplement de 0 à un de moins que la longueur et utilisez le compteur comme index. La boucle de base ressemble à ceci:

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  s = myStringArray[i];
  // ... do something with s ...
}

Un avantage de cette approche est que vous pouvez choisir comment gérer les tableaux clairsemés; le code ci - dessus courra le corps de la boucle les pleins lengthtemps, avec sjeu à undefinedpour les éléments manquants, tout comme for.. of. Si vous souhaitez gérer uniquement les éléments réellement présents d'un tableau fragmenté, comme .forEach, vous pouvez ajouter un intest simple sur l'index:

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'attribution de la valeur de longueur à la variable locale (au lieu d'inclure l' myStringArray.lengthexpression complète dans la condition de boucle) peut faire une différence significative dans les performances car elle ignore une recherche de propriété à chaque fois; en utilisant Rhino sur ma machine, l'accélération est de 43%.

Vous pouvez voir la mise en cache de longueur effectuée dans la clause d'initialisation de boucle, comme ceci:

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

La boucle de comptage explicite signifie également que vous avez accès à l'index de chaque valeur, si vous le souhaitez. L'index est également passé en tant que paramètre supplémentaire à la fonction à laquelle vous passez forEach, vous pouvez donc y accéder également:

myStringArray.forEach( function(s, i) {
   // ... do something with s and i ...
});

for... ofne vous donne pas l'index associé à chaque objet, mais tant que l'objet que vous parcourez est en fait un Array( for.. offonctionne pour d'autres types itérables qui peuvent ne pas avoir cette méthode), vous pouvez utiliser le tableau #entries, méthode pour le changer en un tableau de paires [index, item], puis itérer sur cela:

for (const [i, s] of myStringArray.entries()) {
  // ... do something with s and i ...
}

La syntaxe for... inmentionnée par d'autres est pour 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és numériques (et une lengthpropriété mise à jour automatiquement ), vous pouvez théoriquement boucler sur un tableau avec lui. Mais le problème est qu'il ne se limite pas aux valeurs des propriétés numériques (rappelez-vous que même les méthodes ne sont en fait que des propriétés dont la valeur est une fermeture), et il n'est pas non plus garanti d'itérer sur celles dans l'ordre numérique. Par conséquent, la syntaxe for... nein doit pas être utilisée pour parcourir les tableaux.

Vous pouvez utiliser map, qui est une technique de programmation fonctionnelle qui est également disponible dans d'autres langages comme Python et Haskell .

[1,2,3,4].map( function(item) {
     alert(item);
})

La syntaxe générale est:

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.mapest 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 l'est [10,20,30,40].

Vous n'avez pas besoin d'écrire la fonction en ligne. Ce pourrait être une fonction distincte.

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 ne comprenez pas 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 forboucle 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 article sur le sujet .

pour (soit s de myStringArray) {

(Répondre directement à votre question: maintenant vous pouvez!)

La plupart des autres réponses sont exactes, mais elles ne mentionnent pas (au moment où nous écrivons) que ECMA Script  6  2015 apporte un nouveau mécanisme pour faire l'itération, la for..ofboucle.

Cette nouvelle syntaxe est la manière la plus élégante d'itérer un tableau en javascript (tant que vous n'avez pas besoin de l'index d'itération).

Il fonctionne actuellement avec Firefox 13+, Chrome 37+ et il ne fonctionne pas nativement avec d'autres navigateurs (voir la compatibilité du navigateur ci-dessous). Heureusement, nous avons des compilateurs JS (tels que Babel ) qui nous permettent d'utiliser des fonctionnalités de nouvelle génération aujourd'hui.

Il 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ération d'un générateur:

(exemple 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..of loops

Spec: http://wiki.ecmascript.org/doku.php?id=harmony:iterators

}

Opera, Safari, Firefox et Chrome partagent désormais tous un ensemble de méthodes Array améliorées pour optimiser de nombreuses boucles courantes.

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 utilisent et WebKit , afin que vous puissiez les ajouter vous-même.

Le filtre renvoie un tableau d'éléments qui satisfont à une condition ou à un test.

every renvoie true si chaque membre du tableau réussit le test.

certains retournent vrai si aucun passe le test.

forEach exécute une fonction sur chaque membre du tableau et ne renvoie rien.

map est comme forEach, mais il retourne 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 deuxième argument facultatif, qui est un objet dont vous souhaitez imposer la portée aux membres du tableau lors de leur boucle dans la fonction.

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

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 IFinstructions, les FORboucles et les WHILEboucles.

Une forboucle traditionnelle

Une forboucle traditionnelle a trois composantes:

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. 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 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 forboucle 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 whileboucle

Une alternative à une forboucle est une whileboucle. Pour parcourir un tableau, vous pouvez procéder comme suit:

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

Comme les forboucles traditionnelles , les whileboucles 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 forboucle. Par exemple, la whileboucle ci-dessus se comporte exactement de la même manière que cette forboucle:

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 forboucle 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...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
}

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...inné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 foreachvariante. 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);
});

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 forboucle 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 une manière concise d'écrire une boucle rapide et vous pouvez répéter en sens inverse:

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

Cela a l'avantage de mettre en cache la longueur (similaire for (var i=0, len=myArray.length; i<len; ++i)et différente for (var i=0; i<myArray.length; ++i)) tout en étant moins de caractères à taper.

Il y a même des moments où vous devez effectuer une itération inverse, comme lors de l'itération sur une NodeList en direct où vous prévoyez de supprimer des éléments du DOM pendant l'itération.

Certains cas d'utilisation de bouclage à travers un tableau de la manière de programmation fonctionnelle en JavaScript:

1. Il suffit de parcourir 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 qu'il prend comme paramètre d'entrée n'est pas censée renvoyer une valeur, qui ne peut donc pas être considérée comme une fonction pure.

2. Vérifiez si l'un des éléments d'un tableau réussit 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. Transformez-vous 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ésumez une propriété particulière et calculez 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éez 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. Comptez 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 réussissent 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 qui satisfait la fonction de test fournie.

Références

• Array.prototype.some ()
• Array.prototype.forEach ()
• Array.prototype.map ()
• Array.prototype.filter ()
• Array.prototype.sort ()
• Syntaxe de propagation
• Array.prototype.find ()

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'id et avoir une forboucle 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 toutes les méthodes iterator de soutien forEach, map, reduce, filteret une foule d'autres méthodes sur le prototype Array .

Il existe différentes façons de parcourir le tableau en JavaScript.

Boucle générique:

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

ES5 forEach:

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 à cela pour des informations détaillées ou vous pouvez également vérifier MDN pour boucler à travers un tableau en JavaScript et en utilisant jQuery vérifier jQuery pour chacun .

Je recommande vivement d'utiliser la bibliothèque underscore.js . Il vous offre diverses fonctions que vous pouvez utiliser pour parcourir les 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 , il existe de nombreuses façons de faire une boucle sur des tableaux en JavaScript. Imaginez que vous avez ce tableau ci-dessous et que vous souhaitez faire une boucle dessus:

var arr = [1, 2, 3, 4, 5];

Ce sont les solutions:

1) Pour la boucle

Une forboucle est un moyen courant de parcourir les tableaux en JavaScript, mais 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) En boucle

Une boucle while est considérée comme le moyen le plus rapide de parcourir de longs tableaux, mais elle est généralement moins utilisée dans le code JavaScript:

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3) Faites pendant que
A do whilefait la même chose whilequ'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 principales façons de faire des boucles JavaScript, mais il existe plusieurs autres façons de le faire.

Nous utilisons également une for inboucle pour faire une boucle sur des objets en JavaScript.

Regardez aussi les map(), filter(), reduce(), etc. fonctions sur un tableau en JavaScript. Ils peuvent faire les choses beaucoup plus rapidement et mieux que d'utiliser whileet for.

C'est un bon article si vous souhaitez en savoir plus sur les fonctions asynchrones sur les tableaux en JavaScript.

La programmation fonctionnelle a fait sensation dans le monde du développement ces jours-ci. Et pour cause: les techniques fonctionnelles peuvent vous aider à écrire du code déclaratif plus facile à comprendre en un coup d'œil, à refactoriser et à tester.

L'une des pierres angulaires de la programmation fonctionnelle est son utilisation spéciale des listes et des opérations de liste. Et ces choses sont exactement ce qu'elles sont: des tableaux de choses et ce que vous leur faites. Mais l'état d'esprit fonctionnel les traite un peu différemment que vous ne le pensez.

Cet article examinera de près ce que j'aime appeler les «grandes trois» opérations de liste: mapper, filtrer et réduire. Envelopper votre tête autour de ces trois fonctions est une étape importante vers la possibilité d'écrire du code fonctionnel propre et ouvre les portes aux techniques extrêmement 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 quelqu'un s'intéresse aux performances des multiples mécanismes disponibles pour les itérations de tableau, j'ai préparé les tests JSPerf suivants:

https://jsperf.com/fastest-array-iterator

Résultats:

L' for()itérateur traditionnel est de loin la méthode la plus rapide, surtout 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 Array.prototype.forEach()et les Array.prototype.map()méthodes sont les plus lents approximations, probablement en raison de la surcharge d'appel de fonction .

Si vous utilisez la bibliothèque jQuery, pensez à utiliser http://api.jquery.com/jQuery.each/

De la documentation:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

Renvoie: Object

Description: une fonction d'itérateur générique, qui peut être utilisée pour itérer de manière transparente sur les objets et les tableaux. Les tableaux et les objets de type tableau avec une propriété length (comme un objet arguments d'une fonction) sont itérés par un index numérique, de 0 à length-1. D'autres objets sont itérés via leurs propriétés nommées.

La $.each()fonction n'est pas la même que celle $(selector).each()qui est utilisée pour itérer, exclusivement, sur un objet jQuery. La $.each() fonction peut être utilisée pour itérer sur n'importe quelle collection, qu'il s'agisse d'une carte (objet JavaScript) ou d'un tableau. Dans le cas d'un tableau, le rappel reçoit à chaque fois un index de tableau et une valeur de tableau correspondante. (La valeur est également accessible via le thismot clé, mais Javascript encapsulera toujours la thisvaleur en tant que Objectmême s'il s'agit d'une simple chaîne ou d'une valeur numérique.) La méthode renvoie son premier argument, l'objet qui a été itéré.

Je n'ai pas encore vu cette variation, que j'aime personnellement le mieux:

Étant donné un tableau:

var someArray = ["some", "example", "array"];

Vous pouvez faire une boucle dessus sans jamais 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 ne sont pas rares. Cela signifie qu'il existe en fait une valeur à chaque index du tableau. Cependant, j'ai trouvé que dans la pratique, j'utilise rarement des tableaux clairsemés en JavaScript ... Dans de tels cas, il est généralement beaucoup plus facile d'utiliser un objet comme carte / table de hachage. Si vous avez un tableau clairsemé et que vous souhaitez boucler sur 0 .. longueur-1, vous avez besoin de la construction for (var i = 0; i <someArray.length; ++ i), mais vous avez toujours besoin d'un ifà l'intérieur de la boucle pour vérifier si l'élément de l'index en cours est réellement défini.

De plus, comme CMS le mentionne 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 se rompra prématurément. Encore une fois dans la pratique, ce n'est presque jamais un problème pour moi, mais c'est quelque chose à garder à l'esprit, ce qui en fait une boucle à penser 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 (sans parler du cache) à la propriété length
• L'élément auquel accéder est automatiquement défini dans le corps de la boucle 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 du tableau stipule que lorsque vous lisez un élément à partir d'un index> = la longueur du tableau, il retournera indéfini. Lorsque vous écrivez à un tel emplacement, cela mettra à jour la longueur.

Pour moi, cette construction émule le plus fidèlement la syntaxe Java 5 que j'aime:

for (String item : someArray) {
}

... avec l'avantage supplémentaire de connaître également l'index actuel dans la boucle

Il existe une méthode pour parcourir uniquement les propriétés de ses propres objets, à l'exclusion de celles du prototype:

for (var i in array) if (array.hasOwnProperty(i)) {
    // Do something with array[i]
}

mais il itérera toujours 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 l'on veut parcourir un tableau épars, for (var i = 0; i < array.length; i++) if (i in array)ou array.forEachavec es5shimdoit être utilisé.

Il existe plusieurs façons de le faire en JavaScript. Les deux premiers exemples sont des exemples JavaScript. Le troisième utilise une bibliothèque JavaScript, c'est-à-dire que jQuery utilise la .each()fonction.

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>

La manière la plus élégante et la plus rapide

var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}

http://jsperf.com/native-loop-performance/8

Modifié (parce que j'avais tort)

Comparaison des méthodes pour parcourir un tableau de 100 000 éléments et effectuer à chaque fois une opération minimale avec la nouvelle valeur.

• http://jsben.ch/#/BQhED

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>

L'approche optimisée consiste à mettre en cache la longueur du tableau et à utiliser un modèle var unique initialisant toutes les variables avec un seul mot clé var.

var i, max, myStringArray = ["Hello","World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
    alert(myStringArray[i]);
   //Do something
}

Si l'ordre d'itération n'a pas d'importance que vous devriez essayer la boucle inversée, c'est plus rapide car cela réduit les tests de condition de surcharge et la décrémentation est dans une instruction:

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

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()

Si vous souhaitez utiliser jQuery, il a un bel exemple dans sa documentation:

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

À mon avis, la meilleure façon est d'utiliser la fonction Array.forEach. Si vous ne pouvez pas l'utiliser, je vous suggère d'obtenir le polyfill de MDN. Pour le rendre disponible, c'est certainement le moyen le plus sûr d'itérer sur un tableau en JavaScript.

Array.prototype.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 la portée du traitement du tableau reste dans cette portée, 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 ce que for .. cas.

Utilisation d'un style C normal for boucle fonctionne dans la plupart des cas. Il est juste important de se rappeler que tout 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" - qui peut ou non être ce que vous voulez.

Un exemple de jsFiddle fonctionnel: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

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
    }

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 ...

Réponse courte: oui. Vous pouvez faire cela:

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 "element1", "element2", etc., imprimé.

Vous pouvez soit utiliser Array.prototype.forEach(...):

var arr = ["apple", "banana", "cherry", "mango"];
arr.forEach((item, index)=>{
   //Some code...
});

Ou Array.prototype.map(...):

var arr = ["apple", "banana", "cherry", "mango"];
arr.map((item, index)=>{
   //Some code...
});

Ou le jquery ou pour les chemins de boucle mentionnés précédemment.