parcourir Pour chacun sur un tableau en JavaScript?




tableau javascript html (23)

Comment puis-je parcourir toutes les entrées d'un tableau en utilisant JavaScript?

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

forEach(instance in theArray)

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


La for(i = 0; i < array.length; i++)boucle 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 va tout d'abord référencer les variables que vous n'avez même pas, ensuite vous n'auriez pas les variables dans le tableau, et troisièmement, cela rendra le code plus gras. 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 faire ceci:

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

Si vous voulez faire une pause, 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
//!!!

Résumé:

Lors d'une itération sur un tableau, nous pouvons souvent vouloir atteindre l'un des objectifs suivants:

  1. Nous voulons parcourir le tableau et créer un nouveau tableau:

    Array.prototype.map

  2. Nous voulons parcourir le tableau et ne créons pas de nouveau tableau:

    Array.prototype.forEach

    for..of boucle

Dans JS, il existe de nombreuses façons d’atteindre ces deux objectifs. Cependant, certains sont plus conventionnels que d'autres. Ci-dessous, vous trouverez quelques méthodes couramment utilisées (la plus conventionnelle) pour effectuer une itération de tableau en javascript.

Création d'un nouveau tableau: Map

map()est une fonction située sur Array.prototypelaquelle peut transformer chaque élément d'un tableau, puis retourne un nouveau tableau. map()prend en argument une fonction de rappel et fonctionne de la manière 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 rappel dans lequel nous avons passé map()un argument est exécuté pour chaque élément. Ensuite, un tableau est renvoyé qui a la même longueur que le tableau d'origine. Dans ce nouvel élément de tableau est transformé par la fonction de rappel transmise en tant qu'argument à map().

La différence distincte entre un mapautre mécanisme de boucle, comme forEachune for..ofboucle, est qu’elle mapretourne sous forme de nouveau tableau et laisse l’ancien tableau intact (sauf si vous le manipulez explicitement avec pense comme splice).

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

Boucle utilisant forEach

forEachest une fonction sur Array.prototypelaquelle prend une fonction de rappel en tant qu'argument. Il exécute ensuite cette fonction de rappel pour chaque élément du tableau. Contrairement à la map()fonction, chaque 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 mapfonction, le forEachrappel fournit comme second argument le numéro d'index de l'itération en cours. Le troisième argument fournit également le tableau sur lequel a forEachété appelé.

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

La for..ofboucle parcourt chaque élément d'un tableau (ou tout autre objet itérable). Cela 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, elementun élément de tableau arrest représenté et est le tableau que nous voulons boucler. Non pas que le nom elementsoit arbitraire et nous aurions pu choisir un autre nom comme «el» ou quelque chose de plus déclaratif lorsque cela est applicable.

Ne confondez pas la for..inboucle avec la for..ofboucle. for..inparcourra toutes les propriétés énumérables du tableau alors que la for..ofboucle ne parcourra que 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);
}


Boucle en arrière

Je pense que l' inverse de la boucle mérite une mention ici:

for (var i = array.length; i--; ) {
     // process array[i]
}

Avantages:

  • Vous n'avez pas besoin de déclarer une variable temporaire len , ni de la comparer à array.length à chaque itération, l'une ou l'autre pouvant être une optimisation minutieuse.
  • Supprimer les frères et sœurs du DOM dans l'ordre inverse est généralement plus efficace . (Le navigateur doit moins déplacer les éléments dans ses tableaux internes.)
  • Si vous modifiez le tableau en boucle, à ou après l'index i (par exemple, vous supprimez ou insérez un élément dans le array[i] ), une boucle avant ignorerait l'élément qui s'est déplacé vers la gauche à la position i ou traitera de nouveau le Le point qui a été déplacé à droite. Dans une boucle for traditionnelle, vous pouvez mettre à jour i pour indiquer le prochain élément à traiter - 1, mais inverser simplement le sens de l'itération est souvent une solution plus simple et plus élégante .
  • De même, lors de la modification ou de la suppression d'éléments DOM imbriqués , le traitement inversé peut contourner les erreurs . Par exemple, envisagez de modifier le innerHTML d'un nœud parent avant de manipuler ses enfants. Au moment où le nœud enfant est atteint, il sera détaché du DOM, après avoir été remplacé par un enfant nouvellement créé lors de l'écriture de innerHTML du parent.
  • Il est plus court à taper et à lire que certaines des autres options disponibles. Bien qu'il perde à forEach() et à ES6 for ... of .

Désavantages:

  • Il traite les éléments dans l'ordre inverse. Si vous construisez un nouveau tableau à partir des résultats ou imprimez des éléments à l'écran, la sortie sera naturellement inversée par rapport à la commande d'origine.
  • L'insertion répétée de frères et soeurs dans le DOM en tant que premier enfant afin de conserver leur ordre est moins efficace . (Le navigateur doit continuer à changer les choses correctement.) Pour créer des nœuds DOM efficacement et dans l’ordre, il suffit de faire une boucle et de l’ajouter comme d'habitude (et d'utiliser également un "fragment de document").
  • La boucle inverse est source de confusion pour les développeurs débutants. (Vous pouvez considérer cela comme un avantage, en fonction de vos perspectives.)

Dois-je toujours l'utiliser?

Certains développeurs utilisent par défaut la boucle inverse pour, sauf s'il existe une bonne raison de faire une boucle en avant.

Bien que les gains de performance soient généralement insignifiants, cela crie:

"Fais-le à chaque article de la liste, je me fiche de la commande!"

Cependant, dans la pratique, cela n’est pas réellement une indication fiable de l’intention, car il n’est pas possible de la distinguer des occasions où vous vous souciez de la commande et que vous avez vraiment besoin d’une boucle inversée. Donc, en fait, une autre construction serait nécessaire pour exprimer avec précision l'intention de "ne pas s'en soucier", quelque chose qui n'existe pas actuellement dans la plupart des langues, y compris ECMAScript, mais qui pourrait être appelé, par exemple, forEachUnordered() .

Si l'ordre n'a pas d'importance et si l' efficacité est un problème (dans la boucle la plus interne d'un jeu ou d'un moteur d'animation), il peut être acceptable d'utiliser la boucle inverse pour en tant que modèle à utiliser. Rappelez-vous simplement que voir une inversion de boucle dans le code existant ne signifie pas nécessairement que l'ordre n'est pas pertinent!

Il vaut mieux utiliser forEach ()

En général, pour les codes de niveau supérieur où la clarté et la sécurité sont des préoccupations majeures, je vous recommanderais d'utiliser Array::forEach comme modèle par défaut:

  • C'est clair à lire.
  • Cela indique que je ne vais pas être déplacé dans le bloc (ce qui est toujours une surprise possible en se cachant longtemps for et while boucle).
  • Cela vous donne une marge de manœuvre gratuite pour les fermetures.
  • Il réduit les fuites de variables locales et les collisions accidentelles avec (et la mutation) de variables externes.

Ensuite, lorsque vous voyez l'inverse de la boucle dans votre code, c'est un indice qu'il est inversé pour une bonne raison (peut-être l'une des raisons décrites ci-dessus). Et le fait de voir une boucle aller-retour traditionnelle peut indiquer que le décalage peut avoir lieu.

(Si la discussion sur l'intention n'a aucun sens pour vous, alors vous et votre code pourriez bénéficier de regarder la conférence de Crockford sur Programming Style & Your Brain .)

Comment ça marche?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

Vous remarquerez que i-- est la clause du milieu (où nous voyons généralement une comparaison) et que la dernière clause est vide (où nous voyons habituellement i++ ). Cela signifie que i-- est également utilisé comme condition de continuation. Surtout, il est exécuté et vérifié avant chaque itération.

  • Comment peut-il commencer à array.length sans exploser?

    Étant i-- que i-- s'exécute avant chaque itération, lors de la première itération, nous array.length - 1 à l'item at array.length - 1 ce qui évite les problèmes liés aux éléments undefined Array-out-of-of-of-of-of-the-bounds .

  • Pourquoi n'arrête-t-il pas d'itérer avant l'index 0?

    La boucle cesse d'itérer lorsque la condition i-- évaluée à une valeur de falsey (lorsqu'elle renvoie 0).

    L'astuce est que, contrairement à --i , l'opérateur de fin i-- décrémente i mais donne la valeur avant le décrément. Votre console peut démontrer ceci:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    Donc, lors de l'itération finale, i-- auparavant 1 et l’expression i-- change en 0 mais donne en réalité 1 (vérité), et la condition passe. A la prochaine itération, i-- change i en -1 mais donne 0 (falsey), ce qui provoque l'exécution immédiatement de l'exécution en bas de la boucle.

    Dans les boucles traditionnelles pour la boucle, i++ et ++i sont interchangeables (comme le souligne Douglas Crockford). Cependant, à l'inverse de la boucle, notre décrément étant également notre expression de condition, nous devons nous en tenir à i-- si nous voulons traiter l'élément à l'index 0.

Trivia

Certaines personnes aiment dessiner une petite flèche à l'envers for boucler et terminer par un clin d'œil:

for (var i = array.length; i --> 0 ;) {

Les crédits vont à WYL pour m'avoir montré les avantages et les horreurs du revers pour la boucle.


Si vous utilisez la bibliothèque jQuery , 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 afin que la modification soit

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

À partir de ES6:

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

ofévite les bizarreries associées à inet la fait fonctionner comme la forboucle de tout autre langage, et letse lie ià la boucle plutôt qu'à la fonction

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


Utilisation de boucles avec un opérateur de destructuring et d' étalement ES6

La déstructuration et l'utilisation de l'opérateur de propagation se sont révélées très utiles pour les nouveaux arrivants à ES6, car ils sont plus lisibles / esthétiques, bien que certains anciens combattants du javascript puissent le considérer comme désordonné, que des juniors ou d'autres le trouvent utile.

Les exemples suivants utiliseront for...ofstatement et .forEachmethod.

Exemples 6, 7 et 8 peuvent être utilisés avec des boucles fonctionnelles comme .map, .filter, .reduce, .sort, .every, .some, pour plus d' informations sur ces méthodes consultez l' objet Array .

Exemple 1:for...of boucle normale - pas d’astuce ici.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Exemple 2: diviser des mots en caractères

let arrFruits = ['apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

Exemple 3: Boucle avec un keyetvalue

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Exemple 4: Obtenir les propriétés d'objet en ligne

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Exemple 5: obtenez les propriétés profondes de l'objet dont vous avez besoin

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Exemple 6: L’ exemple 3 est-il utilisé avec.forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Exemple 7: L’ exemple 4 est-il utilisé avec.forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Exemple 8: L’ exemple 5 est-il utilisé avec.forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});


Si vous avez un vaste réseau, vous devriez utiliser iteratorspour gagner en efficacité. Itérateurs sont une propriété de certaines collections JavaScript (comme Map, Set, String, Array). Même, for...ofutilise iteratorsous le capot.

Les itérateurs améliorent l'efficacité en vous permettant de consommer les éléments d'une liste, l'un après l'autre, comme s'il s'agissait d'un flux. Ce qui rend un itérateur spécial, c'est la façon dont il parcourt une collection. Les autres boucles doivent charger toute la collection à l’avance pour pouvoir être parcourues, 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 nextméthode de l'itérateur . La méthode suivante renverra le valuede l'élément actuel et un booleanpour indiquer que 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 régulier en itérateur en utilisant une 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 également transformer votre tableau régulier en itérateur en utilisant Symbol.iteratorceci:

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 habitué arrayen un iteratorscomme 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 épuisables par nature.
  • Les objets ne sont pas iterablepar défaut. Utilisez for..indans ce cas car au lieu de valeurs, cela fonctionne avec des clés.

Vous pouvez en savoir plus sur iteration protocol here .


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

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

Il y a une prise. for..in parcourt 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
    }
}

En outre, ECMAScript 5 a ajouté une méthode forEach à Array.prototype qui peut être utilisée pour énumérer un tableau à l'aide d'un calback (le polyfill se trouve dans la documentation afin que vous puissiez 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 Array.prototype.forEach pas lorsque le rappel renvoie false . jQuery et Underscore.js fournissent leurs propres variations sur each afin de fournir des boucles pouvant être court-circuitées.


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

pour - c'est le plus commun. Bloc complet de code pour la mise en 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>

while - boucle tant qu'une condition est remplie. Cela 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 - effectue également une boucle dans un bloc de code lorsque la condition est vraie et s'exécute 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, filteraussi reduce(ils boucle par 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 d'exemples sur la programmation fonctionnelle de tableaux, consultez l'article de blog Programmation fonctionnelle en JavaScript: mapper, filtrer et réduire .


Un moyen plus proche de votre idée serait d’utiliser Array.forEach()une fonction qui accepte une fonction de verrouillage 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()ce qui fonctionne de la même manière, mais également mutateschaque élément et le renvoie comme suit:

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

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

Je sais que ceci est un ancien post, et il y a déjà tellement de bonnes réponses. Pour un peu plus de complétude, j'ai imaginé en utiliser un autre avec AngularJS . Bien sûr, cela ne s'applique que si vous utilisez Angular, évidemment, j'aimerais quand même le dire de toute façon.

angular.forEachprend 2 arguments et un troisième argument optionnel. Le premier argument est l'objet (le tableau) sur lequel itérer, le deuxième argument est la fonction itérateur, et le troisième argument optionnel est le contexte de l'objet (désigné dans la boucle par 'this'.

Il existe différentes manières d’utiliser la boucle forEach de angular. 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 utile de copier des éléments d’un tableau à un autre consiste à

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

Bien que vous n'ayez pas à le faire, vous pouvez simplement procéder comme suit: cela équivaut à l'exemple précédent:

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

Il existe maintenant des avantages et des inconvénients à utiliser la angular.forEachfonction, par opposition à la forboucle intégrée à saveur de vanille .

Avantages

  • Lisibilité facile
  • Facilité d'écriture
  • Si disponible, angular.forEachutilisera la boucle ES5 forEach. Maintenant, je vais passer à l’efficacité dans la section des inconvénients, car les boucles forEach sont beaucoup plus lentes que les boucles for. Je mentionne cela en tant que pro car c'est bien 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 que chaque objet contient un tableau de résultats, chacun ayant une propriété Value qui est une chaîne (ou autre). Et disons que nous devons parcourir chacun des résultats et que s'ils sont égaux, effectuez une 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
        }
    }
}

Certes, il s’agit d’un exemple hypothétique très simple, mais j’ai écrit la méthode triple intégrée pour les boucles en utilisant la deuxième approche et c’était très difficile à lire et à écrire.

Les inconvénients

  • Efficacité. angular.forEach, et les natifs forEach, en fait, sont tous deux beaucoup plus lents que la forboucle normale ... environ 90% plus lente . Donc, pour les grands ensembles de données, il est préférable de s'en tenir à la forboucle native .
  • Pas de pause, continuer ou retourner le support. continueest effectivement supporté par " accident ", pour continuer dans un angular.forEachsimple, mettez une return;déclaration dans la fonction comme angular.forEach(array, function(item) { if (someConditionIsTrue) return; });ce qui le fera continuer à sortir de la fonction pour cette itération. Cela est également dû au fait que le natif forEachne supporte pas break ou continue non plus.

Je suis sûr qu'il existe divers autres avantages et inconvénients, et n'hésitez pas à ajouter ceux qui vous conviennent. Je pense qu'en définitive, si vous avez besoin d'efficacité, conservez uniquement la forboucle native pour vos besoins en boucle. Mais, si vos ensembles de données sont plus petits et qu’une certaine efficacité permet d’abandonner en échange de la lisibilité et de la possibilité d’écriture, alors jetez certainement un angular.forEachmauvais coup.


Il n'y a pas de for eachboucle en JavaScript natif . Vous pouvez soit utiliser les bibliothèques pour obtenir cette fonctionnalité (je recommande Underscore.js ), utilisez une simple forboucle d'entrée.

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

Cependant, notez qu'il peut y avoir des raisons d'utiliser une forboucle encore plus simple (voir la question Débordement de pile. Pourquoi utiliser «for… in» avec une itération sur les tableaux est-il une si mauvaise idée? )

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

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

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

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

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


Manière 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];

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

Il y a trois implémentations de foreachdans 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

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

La syntaxe lambda ne fonctionne généralement pas dans IE 10 ou une version antérieure.

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

Il n'y a pas de capacité incorporée d'entrer par effraction forEach. Pour interrompre l'exécution, utilisez ce qui Array#somesuit:

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

Cela fonctionne car somerenvoie true dès qu'un des callbacks, exécuté dans l'ordre du tableau, renvoie true, court-circuitant l'exécution du reste. Réponse originale voir le prototype de tableau pour some


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

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

xcontiendra la dernière valeur de yet il sera supprimé du tableau. Vous pouvez également utiliser shift()qui donnera et retirera le premier élément de y.


Si vous souhaitez effectuer une boucle sur un tableau, utilisez la boucle standard en trois parties.

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

Vous pouvez obtenir des optimisations de performances en mettant en cache myArray.length ou en myArray.length une itération inverse.


Vous pouvez appeler pour chaque chose comme ceci:

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

element aura la valeur de chaque index de 0 a la longueur du tableau.

Sortie:

let Array = [1,3,2];

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

Explication

forEach est dans la classe prototype. vous pouvez aussi appeler cela comme theArray.prototype.forEach (...);

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

Vous pouvez également modifier un tableau comme ceci:

1    
3    
2

Une solution simple consiste maintenant à utiliser la bibliothèque underscore.js . Il fournit de nombreux outils utiles, tels que eachet déléguera automatiquement le travail au natif forEachs'il est disponible.

Voici un exemple de fonctionnement de CodePen :

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

Voir également

  • Array::forEach .
  • Dans for_each...in (MDN), il est expliqué qu’il for each (variable in object)est déconseillé de faire partie du standard ECMA-357 ( EAX ).
  • for...of (MDN) décrit la méthode suivante pour effectuer une itération for (variable of object)dans le cadre de la proposition Harmony (ECMAScript 6).




iteration