Comment puis-je parcourir toutes les entrées d'un tableau à l'aide de JavaScript?

Je pensais que c'était quelque chose comme ça:

forEach(instance in theArray)

theArray est mon tableau, mais cela semble être incorrect.

4618
Dante1986 17 févr. 2012 à 17:51

22 réponses

Si vous avez un tableau massif, vous devez utiliser {{X0 }} pour gagner en efficacité. Les itérateurs sont une propriété de certaines collections JavaScript (comme {{X1 }}, Set , String, < a href = "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" rel = "noreferrer"> Array ). Même, {{X5} } utilise iterator sous le capot.

Les itérateurs améliorent l'efficacité en vous permettant de consommer les éléments d'une liste un par un comme s'ils étaient un flux. Ce qui rend un itérateur spécial, c'est comment il parcourt une collection. D'autres boucles doivent charger la collection entière à l'avance afin d'itérer dessus, alors qu'un itérateur n'a besoin que de connaître la position actuelle dans la collection.

Vous accédez à l'élément en cours en appelant la méthode next de l'itérateur. La méthode suivante renverra le value de l'élément actuel et un boolean pour indiquer quand vous avez atteint la fin de la collection. Voici un exemple de création d'un itérateur à partir d'un tableau.

Transformez votre tableau standard en itérateur à l'aide de {{X0} } méthode comme celle-ci:

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Vous pouvez également transformer votre tableau standard en itérateur à l'aide de { {X0}} comme ceci:

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Vous pouvez également transformer votre array habituel en un {{ X1}} comme ceci:

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

REMARQUE :

  • Les itérateurs sont de nature épuisable.
  • Les objets ne sont pas iterable par défaut. Utilisez for..in dans ce cas, car au lieu de valeurs, il fonctionne avec des clés.

Vous pouvez en savoir plus sur iteration protocol ici.

5
BlackBeard 6 juil. 2018 à 11:32

Un moyen le plus proche de votre idée serait d'utiliser Array.forEach() qui accepte une fonction de fermeture qui sera exécutée pour chaque élément du tableau.

myArray.forEach(
  (item) => {
    // Do something
    console.log(item);
  }
);

Un autre moyen viable serait d'utiliser Array.map() qui fonctionne de la même manière, mais il prend également toutes les valeurs que vous retournez et les renvoie dans un nouveau tableau (mappant essentiellement chaque élément à un nouveau), comme ceci:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]
7
CherryDT 4 sept. 2019 à 17:51

ECMAScript 5 (la version sur JavaScript) pour travailler avec les tableaux:

forEach : parcourt chaque élément du tableau et fait tout ce dont vous avez besoin avec chaque élément.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is #" + (index+1) + " in the musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

Dans le cas, plus intéressé par le fonctionnement sur la baie en utilisant une fonctionnalité intégrée.

map - Il crée un nouveau tableau avec le résultat de la fonction de rappel. Cette méthode peut être utilisée lorsque vous devez formater les éléments de votre tableau.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

réduire - Comme son nom l'indique, il réduit le tableau à une seule valeur en appelant la fonction donnée en passant l'élément actuel et le résultat de l'exécution précédente.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

tous - Renvoie vrai ou faux si tous les éléments du tableau réussissent le test dans la fonction de rappel.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];
ages.every(function(elem) {
  return elem >= 18;
});

// Output: false

filtre - Très similaire à tous sauf que le filtre retourne un tableau avec les éléments qui retournent vrai à la fonction donnée.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]
18
Peter Mortensen 3 sept. 2019 à 20:55

Si vous souhaitez utiliser forEach(), cela ressemblera à -

theArray.forEach ( element => {
    console.log(element);
});

Si vous souhaitez utiliser for(), cela ressemblera à -

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}
5
cfnerd 4 janv. 2019 à 23:18

Méthode jQuery utilisant $.map:

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];
11
Daniel W. 1 avril 2014 à 11:15

La boucle for(i = 0; i < array.length; i++) n'est probablement pas le meilleur choix. Pourquoi? Si vous avez ceci:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

La méthode appellera de array[0] à array[2]. Premièrement, cela référencera d'abord les variables que vous n'avez même pas, deuxièmement vous n'aurez pas les variables dans le tableau, et troisièmement cela rendra le code plus audacieux. Regardez ici, c'est ce que j'utilise:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

Et si vous voulez que ce soit une fonction, vous pouvez le faire:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

Si vous voulez casser, un peu plus de logique:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

Exemple:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

Il renvoie:

//Hello
//World
//!!!
27
Peter Mortensen 8 mars 2014 à 10:49

Si vous souhaitez parcourir un tableau d'objets avec la fonction flèche:

let arr = [{name:'john', age:50}, {name:'clark', age:19}, {name:'mohan', age:26}];

arr.forEach((person)=>{
  console.log('I am ' + person.name + ' and I am ' + person.age + ' old');
})
6
Peter Mortensen 3 sept. 2019 à 20:04

Conformément à la nouvelle fonctionnalité mise à jour ECMAScript 6 (ES6) et ECMAScript 2015, vous pouvez utiliser les options suivantes avec des boucles:

pour les boucles

for(var i = 0; i < 5; i++){
  console.log(i);
}

// Output: 0,1,2,3,4

pour ... en boucles

let obj = {"a":1, "b":2}

for(let k in obj){
  console.log(k)
}

// Output: a,b

Array.forEach ()

let array = [1,2,3,4]

array.forEach((x) => {
  console.log(x);
})

// Output: 1,2,3,4

pour ... des boucles

let array = [1,2,3,4]

for(let x of array){
  console.log(x);
}

// Output: 1,2,3,4

tandis que les boucles

let x = 0

while(x < 5){
  console.log(x)
  x++
}

// Output: 1,2,3,4

faire ... tandis que les boucles

let x = 0

do{
  console.log(x)
  x++
}while(x < 5)

// Output: 1,2,3,4
4
Peter Mortensen 8 mars 2020 à 14:51

Depuis ECMAScript 6:

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

of évite les bizarreries associées à in et le fait fonctionner comme la boucle for de toute autre langue, et let lie i dans la boucle par opposition à l'intérieur de la fonction.

Les accolades ({}) peuvent être omises lorsqu'il n'y a qu'une seule commande (par exemple dans l'exemple ci-dessus).

28
Peter Mortensen 12 sept. 2019 à 05:12

Vous pouvez appeler chacun comme ceci:

forEach itérera sur le tableau que vous fournissez et pour chaque itération, il aura element qui contient la valeur de cette itération. Si vous avez besoin d'index, vous pouvez obtenir l'index actuel en passant le i comme deuxième paramètre dans la fonction de rappel pour forEach.

Foreach est fondamentalement une fonction d'ordre élevé, qui prend une autre fonction comme paramètre.

let theArray= [1,3,2];

theArray.forEach((element) => {
  // Use the element of the array
  console.log(element)
}

Production:

1
3
2

Vous pouvez également parcourir un tableau comme celui-ci:

for (let i=0; i<theArray.length; i++) {
  console.log(i); // i will have the value of each index
}
7
Nouman Dilshad 25 janv. 2020 à 12:13

Il n'y a pas de boucle for each dans le JavaScript natif. Vous pouvez utiliser des bibliothèques pour obtenir cette fonctionnalité (je recommande Underscore.js), utilisez un simple for en boucle.

for (var instance in objects) {
   ...
}

Cependant, notez qu'il peut y avoir des raisons d'utiliser une boucle for encore plus simple (voir la question Stack Overflow Pourquoi utilise "for … Dans "avec l'itération du tableau une si mauvaise idée? )

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}
22
Community 23 mai 2017 à 11:47

Si cela ne vous dérange pas de vider le tableau:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x contiendra la dernière valeur de y et elle sera supprimée du tableau. Vous pouvez également utiliser shift() qui donnera et supprimera le premier élément de y.

33
joeytwiddle 30 mai 2014 à 18:37

Il n'y a aucune capacité intégrée à s'introduire dans forEach. Pour interrompre l'exécution, utilisez le Array#some comme ci-dessous:

[1,2,3].some(function(number) {
    return number === 1;
});

Cela fonctionne car some retourne vrai dès que l'un des rappels, exécuté dans l'ordre du tableau, retourne vrai, court-circuitant l'exécution du reste. Réponse originale voir Array prototype pour certains

15
Community 23 mai 2017 à 12:34

Si vous utilisez la jQuery bibliothèque, vous pouvez utiliser jQuery.each :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

MODIFIER:

Selon la question, l'utilisateur veut du code en javascript au lieu de jquery donc la modification est

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}
237
Anik Islam Abhi 12 nov. 2015 à 05:17

La syntaxe lambda ne fonctionne généralement pas dans Internet Explorer 10 ou inférieur.

J'utilise habituellement le

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

Si vous êtes un fan de jQuery et que vous avez déjà un fichier jQuery en cours d'exécution, vous devez inverser les positions des paramètres d'index et de valeur

$("#ul>li").each(function(**index, value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});
6
Peter Mortensen 3 sept. 2019 à 20:36

Si vous voulez faire une boucle sur un tableau, utilisez la boucle standard for en trois parties.

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

Vous pouvez obtenir une certaine optimisation des performances en mettant en cache myArray.length ou en itérant en arrière.

42
Quentin 17 févr. 2012 à 13:55

Remarque : cette réponse est désespérément obsolète. Pour une approche plus moderne, consultez les méthodes disponibles sur un tableau. Les méthodes d'intérêt peuvent être:

  • pour chaque
  • carte
  • filtre
  • Zip *: français
  • réduire
  • chaque
  • certaines

La manière standard d'itérer un tableau dans JavaScript est une boucle for vanille:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

Notez cependant que cette approche n'est bonne que si vous avez un tableau dense et que chaque index est occupé par un élément. Si le tableau est clairsemé, vous pouvez rencontrer des problèmes de performances avec cette approche, car vous itérerez sur un grand nombre d'indices qui n'existent pas vraiment dans le tableau. Dans ce cas, une boucle for .. in pourrait être une meilleure idée. Cependant , vous devez utiliser les protections appropriées pour vous assurer que seules les propriétés souhaitées du tableau (c'est-à-dire les éléments du tableau) sont prises en compte, car la boucle for..in - sera également énumérée dans les navigateurs hérités, ou si les propriétés supplémentaires sont définies comme enumerable.

Dans ECMAScript 5, il y aura une méthode forEach sur le prototype de la matrice, mais elle est non pris en charge dans les anciens navigateurs. Donc, pour pouvoir l'utiliser de manière cohérente, vous devez disposer d'un environnement qui le prend en charge (par exemple, Node. js pour JavaScript côté serveur), ou utilisez un "Polyfill". Le Polyfill pour cette fonctionnalité est cependant trivial et comme il rend le code plus facile à lire, c'est un bon polyfill à inclure.

506
Peter Mortensen 3 sept. 2019 à 19:57

Je voudrais également ajouter ceci comme une composition d'une boucle inverse et une réponse ci-dessus pour quelqu'un qui aimerait cette syntaxe aussi.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Avantages:

L'avantage pour cela: vous avez déjà la référence dans la première comme celle-ci qui n'aura pas besoin d'être déclarée plus tard avec une autre ligne. C'est pratique lors de la boucle à travers le tableau d'objets.

Inconvénients:

Cela se cassera chaque fois que la référence est fausse - falsey (non défini, etc.). Il peut cependant être utilisé comme un avantage. Cependant, cela rendrait la lecture un peu plus difficile. Et en fonction du navigateur, il peut être "non" optimisé pour fonctionner plus rapidement que celui d'origine.

12
HZStudio 28 mars 2020 à 16:08

Certaines langues C utilisent le style foreach pour parcourir les énumérations. En JavaScript, cela se fait avec la for..in structure de boucle:

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Il y a un hic. for..in parcourra chacun des membres énumérables de l'objet et les membres de son prototype. Pour éviter de lire les valeurs héritées du prototype de l'objet, vérifiez simplement si la propriété appartient à l'objet:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

De plus, ECMAScript 5 a ajouté un forEach méthode à Array.prototype qui peut être utilisée pour énumérer un tableau à l'aide d'un calback (le polyfill est dans la documentation, vous pouvez donc toujours l'utiliser pour les anciens navigateurs):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Il est important de noter que Array.prototype.forEach ne se casse pas lorsque le rappel renvoie false. jQuery et Underscore.js fournissent leurs propres variations sur each pour fournir des boucles qui peuvent être court-circuitées.

83
Peter Mortensen 13 juil. 2013 à 01:18

Il existe plusieurs façons de parcourir un tableau en JavaScript, comme ci-dessous:

pour - c'est le plus courant . Bloc complet de code pour bouclage

var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - boucle pendant qu'une condition est remplie. Il semble que ce soit la boucle la plus rapide

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do / while - boucle également à travers un bloc de code pendant que la condition est vraie, s'exécutera au moins une fois

var text = ""
var i = 0;

do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);

document.getElementById("example").innerHTML = text;
<p id="example"></p>

Boucles fonctionnelles - forEach, map, filter, également reduce (elles parcourent la fonction, mais elles sont utilisées si vous en avez besoin) quelque chose avec votre tableau, etc.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

Pour plus d'informations et d'exemples sur la programmation fonctionnelle sur les tableaux, consultez le billet de blog Programmation fonctionnelle en JavaScript: mapper, filtrer et réduire .

20
Alireza 22 oct. 2019 à 23:32

Une implémentation forEach (voir dans jsFiddle):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);
31
nmoliveira 18 déc. 2013 à 12:22

Il existe trois implémentations de foreach dans jQuery comme suit.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3
28
Peter Mortensen 8 mars 2014 à 10:50