Les boucles For..In en JavaScript - paires clé-valeur

je me demandais s'il y avait un moyen de faire quelque chose comme une boucle PHP foreach en JavaScript. La fonctionnalité que je cherche est quelque chose comme cet extrait de PHP:

foreach($data as $key => $value) { }

je regardais la boucle JS for..in , mais il semble qu'il n'y ait aucun moyen de spécifier le as . Si je fais cela avec un' normal ' pour loop ( for(var i = 0; i < data.length; i++ ), y a-t-il un moyen de saisir les couples key => value?

303
demandé sur TTT 2011-08-30 14:34:19

14 réponses

for (var k in target){
    if (target.hasOwnProperty(k)) {
         alert("Key is " + k + ", value is" + target[k]);
    }
}

hasOwnProperty est utilisé pour vérifier si votre target possède réellement cette propriété, plutôt que de l'avoir héritée de son prototype. Un peu plus simple serait:

for (var k in target){
    if (typeof target[k] !== 'function') {
         alert("Key is " + k + ", value is" + target[k]);
    }
}

il vérifie simplement que k n'est pas une méthode (comme si target était array vous obtiendrez beaucoup de méthodes alertées, par exemple indexOf , push , pop ,etc.)

440
répondu J0HN 2015-07-30 17:15:16

personne n'a mentionné Object.keys donc je vais le mentionner.

Object.keys(obj).forEach(function (key) {
   // do something with obj[key]
});
265
répondu goatslacker 2015-08-20 17:12:12

le for in fonctionnera pour vous. Si vous considérez un objet comme une carte:

for(key in obj){
    // The key is key
    // The value is obj[key]
}
85
répondu Paulpro 2011-08-30 10:37:22

si vous pouvez utiliser ES6 nativement ou avec Babel (js compiler) alors vous pouvez faire ce qui suit:

let test = {a: 1, b: 2, c: 3};

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

qui imprimera cette sortie:

a 1
b 2
c 3

la méthode Object.entries() retourne un tableau de la propriété énumérable propre à un objet donné [key, value] paires, dans le même ordre que celui fourni par une for...in boucle (la différence étant que une boucle for-in énumère également les propriétés de la chaîne prototype) .

Espère que cela aide! =)

53
répondu Francesco Casula 2018-08-18 07:58:51
var obj = {...};
for (var key in obj) {
    var value = obj[key];

}

la syntaxe php n'est que du sucre.

52
répondu Zirak 2017-09-05 19:00:00

je suppose que vous savez que i est la clé et que vous pouvez obtenir la valeur via data[i] (et je veux juste un raccourci pour cela).

ecmascript5 introduit forEach [MDN] pour les tableaux (il semble que vous ayez un tableau):

data.forEach(function(value, index) {

});

la documentation MDN fournit un shim pour les navigateurs ne le supportant pas.

bien sûr ce ne fonctionne pas pour les objets, mais vous pouvez créer une fonction similaire pour eux:

function forEach(object, callback) {
    for(var prop in object) {
        if(object.hasOwnProperty(prop)) {
            callback(prop, object[prop]);
        }
    }
}

puisque vous avez étiqueté la question avec , jQuery fournit $.each [docs] qui boucle à la fois, les structures de tableau et d'objet.

16
répondu Felix Kling 2011-08-30 10:44:22
for (var key in myMap) {
    if (myMap.hasOwnProperty(key)) {
        console.log("key =" + key);
        console.log("value =" + myMap[key]);
    }
}

en javascript, chaque objet a un tas de paires de valeurs clés intégrées qui ont des méta-informations. Lorsque vous faites une boucle à travers toutes les paires de valeurs clés pour un objet, vous faites une boucle à travers elles aussi. L'utilisation de hasOwnProperty () les Filtre.

7
répondu Siddhu 2017-07-19 15:26:04

vous pouvez utiliser le for..in pour cela.

for (var key in data)
{
    var value = data[key];
}
6
répondu Christoph Winkler 2011-08-30 10:38:04

ES6 fournira la carte.prototype.forEach (callback) qui peut être utilisé comme ceci

myMap.forEach(function(value, key, myMap) {
                        // Do something
                    });
2
répondu Stephen Murby 2016-08-16 13:51:50

vous pouvez utiliser une boucle 'for in' pour ceci:

for (var key in bar) {
     var value = bar[key];
}
1
répondu Richard Dalton 2011-08-30 10:38:24

ci-dessous est un exemple qui se rapproche autant que vous obtenez.

for(var key in data){
  var value = data[key];    
  //your processing here
}

si vous utilisez jQuery voir: http://api.jquery.com/jQuery.each /

1
répondu Aidamina 2011-08-30 10:39:59
let test = {a: 1, b: 2, c: 3};
Object.entries(test).forEach(([key, value]) => console.log(key, value))

// a 1
// b 2
// c 3
0
répondu 吴毅凡 2018-08-17 11:56:54

oui, vous pouvez avoir des tableaux associatifs aussi en javascript:

var obj = 
{
    name:'some name',
    otherProperty:'prop value',
    date: new Date()
};
for(i in obj)
{
    var propVal = obj[i]; // i is the key, and obj[i] is the value ...
}
-2
répondu Alex Pacurar 2011-08-30 10:38:44
var global = (function() {
   return this;
})();

// Pair object, similar to Python

function Pair(key, value) {
    this.key = key;
    this.value = value;

    this.toString = function() {
       return "(" + key + ", " + value + ")";
    };
}

/**
 * as function
 * @param {String} dataName A String holding the name of your pairs list.
 * @return {Array:Pair} The data list filled
 *    with all pair objects.
 */
Object.prototype.as = function(dataName) {
    var value, key, data;
    global[dataName] = data = [];

    for (key in this) {
       if (this.hasOwnProperty(key)) {
          value = this[key];

          (function() {
             var k = key,
                 v = value;

            data.push(new Pair(k, v));
          })();
       }
    }

    return data;
};

var d = {
   'one': 1,
   'two': 2
};

// Loop on your (key, list) pairs in this way
for (var i = 0, max = d.as("data").length; i < max; i += 1) {
   key = data[i].key;
   value = data[i].value;

   console.log("key: " + key + ", value: " + value);
}

// delete data when u've finished with it.
delete data;
-7
répondu user278064 2011-08-30 14:08:33