parcourir - tableau associatif javascript




Boucle dans un tableau en JavaScript (20)

pour (var s de myStringArray) {

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

La plupart des autres réponses sont exactes, mais elles ne mentionnent pas (à ce jour) que ECMA Script 6 2015 apporte un nouveau mécanisme pour effectuer une itération, la boucle for..of .

Cette nouvelle syntaxe est le moyen le plus élégant d'itérer un tableau en javascript (tant que vous n'avez pas besoin de l'index d'itération), mais elle n'est pas encore largement prise en charge par les navigateurs.

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

Cela fonctionne aussi sur Node (je l'ai testé sur la version 0.12.0).

Itérer un tableau

// You could also use "let" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) { 
   console.log(letter); 
}

Itérer un tableau d'objets

var band = [
  {firstName : 'John', lastName: 'Lennon'}, 
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(var member of band){
  console.log(member.firstName + ' ' + member.lastName); 
}

Itérer un générateur:

(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

}

En Java, vous pouvez utiliser une boucle for pour parcourir les objets d'un tableau comme suit:

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

Pouvez-vous faire la même chose en JavaScript?


Le moyen le plus élégant et rapide

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

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

Edité (parce que j'avais tort)

Comparer les méthodes pour parcourir en boucle un tableau de 100 000 éléments et effectuer une opération minimale avec la nouvelle valeur chaque fois.

Préparation:

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

Tests:

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

En JavaScript, il n'est pas conseillé de parcourir un tableau avec une boucle for-in, mais il est préférable d'utiliser une boucle for telle que:

for(var i=0, len=myArray.length; i < len; i++){}

Il est également optimisé ("mise en cache" de la longueur du tableau). Si vous souhaitez en savoir plus, lisez mon post sur le sujet .


Il existe différentes manières de parcourir un tableau en JavaScript.

Boucle générique:

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

ES5 pour chaque:

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each:

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

Jetez un coup d'œil à this pour obtenir des informations détaillées ou vous pouvez également vérifier que for...in une boucle dans un tableau en JavaScript et utilise jQuery pour vérifier jQuery.each() .


Je recommande vivement d'utiliser la bibliothèque underscore.js . Il vous fournit diverses fonctions que vous pouvez utiliser pour parcourir des tableaux / collections.

Par exemple:

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...

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

Vous n’avez peut-être pas besoin de tous, mais ils peuvent être très utiles, ou le seraient si tous les navigateurs les prenaient en charge.

Mozilla Labs a publié les algorithmes utilisés par eux et WebKit , afin que vous puissiez les ajouter vous-même.

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

chacun renvoie true si chaque membre du groupe réussit le test.

certains renvoient true si aucun réussit le test.

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

map est similaire à forEach, mais renvoie un tableau des résultats de l'opération pour chaque élément.

Ces méthodes prennent toutes une fonction pour leur premier argument et ont un second argument facultatif, qui est un objet dont vous voulez imposer la portée aux membres du tableau lors de leur boucle dans la fonction.

Ignorez-le jusqu'à ce que vous en ayez besoin.

indexOf et lastIndexOf recherchent 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;
})();

Quelques cas d'utilisation de la boucle dans un tableau de la manière fonctionnelle de la programmation 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 utilisée en tant que 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érifier si l'un des éléments d'un tableau passe un test

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. Transformer en un nouveau tableau

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Remarque: La méthode map () crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

4. Résumer une propriété particulière et calculer sa moyenne

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. Créer un nouveau tableau basé sur l'original mais sans le modifier

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. Compter le nombre de chaque catégorie

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. Récupérer un sous-ensemble d'un tableau en fonction de critères particuliers

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

Remarque: La méthode filter () crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.

8. Trier un tableau

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9. Trouver un élément dans un tableau

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

La méthode Array.prototype.find () renvoie la valeur du premier élément du tableau qui satisfait à la fonction de test fournie.

Références


Si vous voulez un moyen concis d'écrire une boucle rapide et que vous pouvez effectuer une itération inverse:

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

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

Il arrive même que vous deviez effectuer une itération inverse, par exemple lorsque vous effectuez une itération sur une NodeList réelle, dans laquelle vous prévoyez de supprimer des éléments du DOM lors de l'itération.


Utilisez une boucle séquentielle for :

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

@zipcodeman suggère d'utiliser l'instruction for...in , mais pour les tableaux itératifs, il convient d'éviter d'utiliser des tableaux, cette instruction étant destinée à énumérer les propriétés de l'objet.

Il ne devrait pas être utilisé pour des objets de type tableau parce que:

  • L'ordre des itérations n'est pas garanti, les index du tableau ne peuvent pas être visités par ordre numérique.
  • Les propriétés héritées sont également énumérées.

Le deuxième point est que cela peut vous donner beaucoup de problèmes, par exemple, si vous Array.prototype objet Array.prototype pour y inclure une méthode, cette propriété sera également énumérée.

Par exemple:

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
  alert(array[i]);
}

Le code ci-dessus alertera "a", "b", "c" et "foo!".

Cela peut être particulièrement problématique si vous utilisez une bibliothèque qui repose fortement sur l’augmentation de prototypes natifs (telle que MooTools, par exemple).

Comme je l'ai dit précédemment, l'instruction for-in est là pour énumérer les propriétés de l'objet, par exemple:

var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}

Dans l'exemple ci-dessus, la méthode hasOwnProperty vous permet d'énumérer uniquement les propriétés propres , c'est-à-dire uniquement les propriétés que l'objet possède physiquement, pas les propriétés héritées.

Je vous recommande de lire l'article suivant:


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

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

La syntaxe générale est la suivante:

array.map(func)

En général, func prend 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, le tableau lui-même.

La valeur de retour de array.map est un autre tableau, vous pouvez donc l'utiliser comme ceci:

var x = [1,2,3,4].map( function(item) {return item * 10;});

Et maintenant, x est [10,20,30,40] .

Vous n'êtes pas obligé d'écrire la fonction inline. Ce pourrait être une fonction séparée.

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

ce qui serait en quelque sorte équivalent à:

 for (item in my_list) {item_processor(item);}

Sauf que vous n'obtenez pas la nouvelle new_list .


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

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
    }


Il existe une méthode pour parcourir uniquement les propriétés propres à un objet, sans inclure celles du prototype:

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

for(let i=0, size=arr.length; i<size; i++){
    // do something
}

mais il sera toujours itérer sur les propriétés personnalisées.

En javascript, toute propriété personnalisée peut être affectée à un objet, y compris un tableau.

Si on veut itérer sur un tableau éparpillé, for (var i = 0; i < array.length; i++) if (i in array)ou array.forEachavec es5shimdevrait être utilisé.


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

Étant donné un tableau:

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

Vous pouvez le parcourir sans accéder à la propriété length:

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

Voir ce JsFiddle démontrant que: http://jsfiddle.net/prvzk/

Cela ne fonctionne que pour les tableaux qui ne sont pas clairsemés. Cela signifie qu’il existe une valeur à chaque index du tableau. Cependant, j'ai constaté qu'en pratique, je n'utilise presque jamais de tableaux épars en Javascript ... Dans de tels cas, il est généralement beaucoup plus facile d'utiliser un objet en tant que carte / table de hachage. Si vous avez un tableau fragmenté et que vous souhaitez effectuer une boucle 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 boucle pour vérifier si l’élément de l’index en cours est bien défini.

En outre, comme le mentionne CMS dans un commentaire ci-dessous, vous ne pouvez l’utiliser que sur des tableaux qui ne contiennent aucune valeur fausse. Le tableau de chaînes de l'exemple fonctionne, mais si vous avez des chaînes vides, ou des nombres qui sont 0 ou NaN, etc., la boucle sera interrompue prématurément. Encore une fois dans la pratique, ce n’est pas un problème pour moi, mais c’est une chose à garder à l’esprit, ce qui en fait une boucle à laquelle réfléchir avant de l’utiliser ... Cela peut le disqualifier pour certaines personnes :)

Ce que j'aime dans cette boucle c'est:

  • C'est court pour écrire
  • Pas besoin d'accéder (et même de mettre en cache) la propriété length
  • L'élément auquel accéder est défini automatiquement dans 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 tels que des listes / piles

La raison pour laquelle cela fonctionne est que la spécification de tableau exige que lorsque vous lisez un élément à partir d'un index> = la longueur du tableau, il retourne non défini. Lorsque vous écrivez à un tel emplacement, la longueur sera mise à jour.

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

for (String item : someArray) {
}

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


Oui, vous pouvez faire la même chose en JavaScript en utilisant une boucle, mais sans s'y limiter, de nombreuses façons de faire en boucle sur des tableaux dans JavaScrip. Imaginez que vous ayez ce tableau ci-dessous et que vous souhaitiez le faire en boucle:

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

Ce sont les solutions:

1) Pour la boucle

La boucle For est une méthode courante pour parcourir des tableaux en JavaScript, mais elle n’est pas considérée comme la solution la plus rapide pour les grands tableaux:

for (var i=0, l=arr.length; i<l; i++) { 
  console.log(arr[i]);
}

2) boucle tout en

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

let i=0;

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

3) Faites en
faisant tout en faisant la même chose qu'en tant que avec une différence de syntaxe comme ci-dessous:

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

Ce sont les principaux moyens de créer des boucles javascript, mais il existe peu d'autres moyens de le faire.

Nous utilisons également des for inboucles pour les objets javascript.

Regardez aussi map(), filter(), reduce()etc fonctions sur Array 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 des tableaux en JavaScript.

La programmation fonctionnelle fait actuellement des vagues dans le monde du développement. Et pour cause: les techniques fonctionnelles peuvent vous aider à écrire davantage de code déclaratif, plus facile à comprendre d'un coup d'œil, d'un refacteur et d'un test.

L’une des pierres angulaires de la programmation fonctionnelle est son utilisation particulière des listes et de leurs opérations. Et ces choses sont exactement ce que le son ressemble: tableaux de choses et tout ce que vous leur faites. Mais la mentalité fonctionnelle les traite un peu différemment de ce à quoi vous vous attendiez.

Cet article examinera de près ce que j'aime appeler les "trois grandes" opérations de liste: mapper, filtrer et réduire. Envisager ces trois fonctions est une étape importante pour pouvoir é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.

Lire plus >> here :


Par exemple, j'ai utilisé dans une console Firefox:

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

Si vous voulez utiliser jQuery, sa documentation contient un bel exemple:

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

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

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>
var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}


Réponse courte: oui. Vous pouvez faire avec ça:

var myArray = ["element1", "element2", "element3", "element4"];

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

Dans une console de navigateur, vous pouvez voir quelque chose comme "élément1", "élément2", etc., imprimé.


Si vous utilisez la bibliothèque jQuery, envisagez d'utiliser http://api.jquery.com/jQuery.each/

De la documentation:

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

Retours: objet

Description: une fonction itérateur générique, qui peut être utilisée pour effectuer une itération transparente sur des objets et des tableaux. Les tableaux et les objets de type tableau avec une propriété length (tels que l'objet arguments d'une fonction) sont itérés par un index numérique, compris entre 0 et longueur-1. Les autres objets sont itérés via leurs propriétés nommées.

La $.each()fonction n'est pas la même que $(selector).each()celle utilisée pour itérer exclusivement sur un objet jQuery. La $.each()fonction peut être utilisée pour parcourir toute collection, qu'il s'agisse d'une carte (objet JavaScript) ou d'un tableau. Dans le cas d'un tableau, le rappel reçoit un index et une valeur de tableau correspondante à chaque fois. (La valeur est également accessible via le thismot clé, mais Javascript sera toujours encapsulée thisdans une valeur 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é.







for-loop