Certains C style d'utilisation des langues foreach à boucle à travers des énumérations. En JavaScript ceci est fait avec le for..in structure de boucle :

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

il y a une prise. for..in fera une boucle à travers chacun des membres dénombrables de l'objet, et les membres sur son prototype. Pour éviter de lire des valeurs héritées par le prototype de l'objet, il suffit de vérifier si la propriété appartient à la objet:

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

en outre, ECMAScript 5 a ajouté un forEach méthode à Array.prototype qui peut être utilisé pour énumérer sur un tableau en utilisant un calback (le polyfill est dans le docs donc vous pouvez toujours l'utiliser pour les navigateurs plus anciens):

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 trait de Soulignement.js fournissent leurs propres variations sur each pour fournir des boucles qui peuvent être court-circuitées.

si vous voulez boucler un tableau, utilisez la boucle standard en trois parties for .

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

vous pouvez obtenir des optimisations de performance en cache myArray.length ou en itérant sur elle à l'envers.

Un forEach mise en œuvre ( 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
  }
);

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 il sera retiré du tableau. Vous pouvez également utiliser shift() qui donnera et supprimer le premier élément de y .

je sais que c'est un vieux poste, et il y a tellement de grandes réponses déjà. Pour être un peu plus complet, j'ai pensé en rajouter un autre en utilisant AngularJS . Bien sûr, cela ne s'applique que si vous utilisez L'angle, évidemment, néanmoins je voudrais le dire de toute façon.

angular.forEach prend 2 arguments et un troisième argument optionnel. Le premier argument est l'objet (array) pour itérer sur, le deuxième argument est l'itérateur fonction, et le troisième argument optionnel est le contexte de l'objet (essentiellement désigné à l'intérieur de la boucle comme "ceci".

Il y a différentes façons d'utiliser la boucle forEach angulaire. Le plus simple et probablement le plus utilisé est

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

une autre façon qui est utile pour copier des éléments d'un tableau à un autre est

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

cependant, vous ne devez pas faire cela, vous pouvez simplement faire ce qui suit et il est équivalent à la exemple précédent:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

maintenant, il y a des avantages et des inconvénients de l'utilisation de la fonction angular.forEach par opposition à la boucle for à saveur de vanille.

Pros

• lisibilité facile
• facilité d'écriture
• si disponible, angular.forEach utilisera la boucle ES5 forEach. Maintenant, je vais passer à l'efficience dans la section cons, comme les boucles forEach sont beaucoup plus lent que les boucles for. Je le mentionne en tant que pro parce que c'est agréable d'être cohérent et standardisé.

considérez les 2 boucles imbriquées suivantes, qui font exactement la même chose. Disons que nous avons 2 tableaux d'objets et chaque objet contient un tableau de résultats, dont chacun a une propriété de valeur qui est une chaîne (ou autre). Et disons que nous devons itérer sur chacun des résultats et si ils sont égaux alors Effectuer une certaine action:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

accordé c'est un exemple hypothétique très simple, mais j'ai écrit triple embedded pour les boucles en utilisant la deuxième approche et il était très difficile à lire, et écrire pour cette matière.

Cons

• efficacité. angular.forEach , et le natif forEach , d'ailleurs, sont tous les deux ainsi beaucoup plus lent que la boucle normale for ....environ 90% plus lent . Ainsi, pour les grands ensembles de données, Mieux vaut s'en tenir à la boucle for native.
• Pas de pause, continuer, ou de l'aide au retour. continue est en fait soutenu par " accident ", pour continuer dans un angular.forEach vous avez simplement mis un return; déclaration dans la fonction comme angular.forEach(array, function(item) { if (someConditionIsTrue) return; }); qui la fera continuer hors de la fonction pour cette itération. Cela est également dû au fait que le natif forEach ne supporte pas break ou continuer non plus.

je suis sûr qu'il y a d'autres avantages et inconvénients, et s'il vous plaît n'hésitez pas à ajouter ceux que vous jugez bon. Je pense que, en fin de compte, si vous avez besoin d'efficacité, restez avec juste la boucle for natif pour vos besoins de bouclage. Mais, si vos ensembles de données sont plus petits et une certaine efficacité est acceptable d'abandonner en échange de lisibilité et ecrivabilité, puis par tous les moyens jeter un angular.forEach dans ce mauvais garçon.

une solution facile serait maintenant d'utiliser le soulignement .bibliothèque js . Il fournit de nombreux outils utiles, tels que each et déléguera automatiquement le travail au natif forEach si disponible.

un exemple de code de la façon dont il fonctionne est:

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

voir aussi

• "1519180920 à la Documentation" natif Array.prototype.forEach() .
• Dans for_each... (MDN), il est expliqué que for each (variable in object) est obsolète, puisque la partie de l'ECMA-357 ( EAX ) standard.
• ...de (MDN) décrit la prochaine façon d'itérer en utilisant for (variable of object) comme partie de la proposition Harmony (ECMAScript 6).

probablement la boucle for(i = 0; i < array.length; i++) n'est 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] . Tout d'abord, cela fera référence à des variables que vous n'avez même pas, ensuite 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 retourne:

//Hello
//World
//!!!

il y a 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

de ES6:

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

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

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

il n'y a pas de for each boucle en natif JavaScript . Vous pouvez utiliser les 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 encore plus simple for (voir la question sur le débordement de la pile Pourquoi utiliser "for...in" avec l'itération du tableau est une si mauvaise idée? )

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

il s'agit d'un itérateur pour la liste NON-sparse où l'index commence à 0, ce qui est le scénario typique lorsqu'il s'agit de document.getelemensbytagname ou document.querySelectorAll)

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

exemples d'utilisation:

exemple #1

var arr = [];
[1, 2, 3].each( function(a){ a.push( this * this}, arr);
arr = [1, 4, 9]

exemple #2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

chaque étiquette p obtient class="blue"

exemple #3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

chaque autre étiquette p obtient class="red" >

exemple #4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

et finalement les 20 premières étiquettes bleues p sont changées en vert

attention lors de l'utilisation de la chaîne comme fonction: la fonction est créée hors contexte et ne doit être utilisée que si vous êtes certain de la portée de la variable. Autrement, mieux passer des fonctions où scoping est plus intuitif.

Il y a peu de moyens pour parcourir un tableau en JavaScript, comme ci-dessous:

pour - c'est le plus commun. Bloc complet de code pour boucle

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>

tandis que - boucle pendant qu'une condition est terminée. Il semble être 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 alors que la condition est vraie, sera exécuté 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>

functional loops - forEach , map , filter , aussi reduce (ils boucle à travers la fonction, mais utilisé si vous avez besoin de faire 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 des exemples de programmation fonctionnelle sur les tableaux, consultez le blog programmation fonctionnelle en JavaScript: carte, filtre et réduit .

il n'y a pas de capacité intégrée pour entrer 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 parce que some retourne true dès que l'un des callbacks, exécuté dans l'ordre du tableau, retourne true, court-circuitant l'exécution du reste. Réponse Originale voir prototype de tableau pour certains

ECMAScript5 (la version en Javascript) pour travailler avec des tableaux.

forEach - itère à travers chaque élément dans le tableau et faire tout ce dont vous avez besoin avec chaque élément.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in 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é sur le fonctionnement sur le tableau en utilisant une certaine fonctionnalité intégrée.

carte - Il crée un nouveau tableau avec le résultat de la fonction de rappel. Cette méthode est bonne à utiliser 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']

reduce - comme le nom le dit, il réduit le tableau à une seule valeur en appelant la fonction donnée passant dans l'élément currenct 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

every - retourne true ou false si tous les éléments du tableau passent 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 renvoie un tableau avec les éléments qui reviennent vrais à 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]

espérons que ce sera utile.

je voudrais également ajouter ce que une composition d'une boucle de retournement et une réponse ci-dessus pour quelqu'un qui voudrait de cette syntaxe.

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

Pour:

l'avantage pour ceci: vous avez la référence déjà dans le premier comme cela ne devra pas être déclaré plus tard avec une autre ligne. Il est pratique lors de la boucle à travers le tableau d'objets.

Inconvénients:

cela se casse chaque fois que la référence est false - falsey (Non défini, etc.). Il peut être utilisé comme un avantage. Cependant, il serait un peu plus difficile à lire. Et aussi selon le navigateur, il peut être" pas " optimisé pour travailler plus vite que l'original.

jQuery façon à l'aide de $.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];

d'Une façon plus proche de votre idée serait d'utiliser Array.forEach() qui accepte un clojure fonction qui sera exécutée pour chaque élément du tableau.

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

une autre façon viable serait d'utiliser Array.map() qui fonctionne de la même manière mais aussi mutates chaque élément et le renvoie comme:

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

console.log(myArray); // [2, 3, 4]

la syntaxe lambda ne fonctionne habituellement pas dans IE 10 ou en dessous.

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


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})

vous pouvez appeler forEach comme ceci:

let Array = [1,3,2];

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

élément aura la valeur de chaque indice de 0 à la longueur du tableau.

sortie:

1    
3    
2

explication:

forEach est en classe prototype. vous pouvez aussi l'appeler theArray.prototype.forEach(...);

prototype: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

vous pouvez également modifier sur un tableau comme ceci:

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}

Si vous voulez utiliser forEach() , il ressemblera -

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

Si vous voulez utiliser for() , il ressemblera -

for(let idx = 0; idx < theArray.length; idx++){ let element = theArray[idx]; console.log(element); }

si vous avez un tableau massif que vous devriez utiliser iterators pour gagner en efficacité. Les itérateurs sont une propriété de certaines collections JavaScript (comme Map , Set , String , Array ). Même, for..of emplois iterator sous le capot.

améliorent l'efficacité en vous permettant de consommer les articles d'une liste un par un comme s'ils étaient un flux. Ce qui rend un iterator spécial, c'est la façon dont il traverse une collection. D'autres boucles ont besoin de charger la totalité de la collection à l'avance pour itérer dessus, alors qu'un itérateur n'a besoin de connaître que la position actuelle dans la collection.

vous accédez à l'élément courant en appelant l'itérateur next la méthode. La méthode suivante retournera le value de l'article courant et un boolean pour indiquer quand vous avez atteint la fin de la collection. Ce qui suit est un exemple de création d'un itérateur à partir d'un tableau.

Transformez votre tableau régulier en itérateur en utilisant values() 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 aussi transformer votre tableau régulier en itérateur en utilisant Symbol.iterator 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 aussi transformer votre régulier array en un iterator 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}

NOTE :

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

résumé:

lorsque nous itérons sur un tableau, nous pouvons souvent vouloir accomplir l'un des buts suivants:

1. nous voulons itérer sur le tableau et créer un nouveau tableau:

   Array.prototype.map
   
   
   
   

2. Nous voulons parcourir le tableau et ne pas créer un nouveau tableau:

   Array.prototype.forEach



for..of boucle

dans JS il y a plusieurs façons d'atteindre ces deux objectifs. Toutefois, certains sont plus conventionnels que d'autres. Ci-dessous, vous pouvez trouver quelques méthodes couramment utilisées (la plus conventionnelle imo) pour accomplir l'itération du tableau en javascript.

création d'un nouveau tableau: Map

map() est une fonction située sur Array.prototype qui peut transformer chaque élément d'un tableau et retourne ensuite un nouveau tableau. map() prend comme argument une fonction de rappel et fonctionne de la façon suivante:

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

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

le callback que nous avons passé dans map() comme argument est exécuté pour chaque élément. Ensuite, un tableau revient qui a la même longueur que le tableau d'origine. Dans ce nouveau tableau, l'élément est transformé par la fonction callback passée en argument à map() .

la différence nette entre map et un autre mécanisme de boucle comme forEach et une for..of boucle sont que map retourne comme nouveau tableau et laisse le vieux tableau intact (sauf si vous le manipulez explicitement avec pense comme splice ).

également noter que le callback de la fonction map fournit comme second argument le numéro d'index de l'itération courante. De plus, le troisième argument fournit-il le tableau sur lequel map a été appelé. Parfois, ces propriétés peuvent être très utiles.

Boucle utilisant forEach

forEach est une fonction située sur Array.prototype qui prend une fonction de rappel comme argument. Il exécute alors cette fonction de rappel pour chaque élément dans le tableau. Contrairement à la fonction map() , la fonction forEach ne renvoie rien ( undefined ). Par exemple:

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

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

tout comme la fonction map , le forEach callback fournit comme second argument le numéro d'index de l'itération courante. Le troisième argument fournit également le tableau sur lequel forEach a été appelé.

boucle à travers des éléments en utilisant for..of

les boucles de boucle for..of à travers chaque élément d'un tableau (ou tout autre objet itérable). Il fonctionne de la manière suivante:

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

for(let element of arr) {
  console.log(element * 2);
}

Dans l'exemple ci-dessus element signifie un élément de tableau et arr est le tableau que nous voulons boucle. Non pas que le nom element soit arbitraire et nous aurions pu choisir n'importe quel autre nom comme " el " ou quelque chose de plus déclaratif quand c'est le cas.

ne confondez pas la boucle for..in avec la boucle for..of . for..in fera une boucle à travers toutes les propriétés énumérables du tableau alors que la boucle for..of ne fera qu'une boucle à travers les éléments du tableau. Par exemple:

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

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}