Comment obtenir toutes les valeurs des propriétés d'un objet JavaScript (sans connaître les clés) ?

Question

S'il existe un objet JavaScript :

var objects={...};

Supposons qu'il ait plus de 50 propriétés, sans connaître les noms des propriétés (c'est-à-dire sans connaître les 'clés'), comment obtenir la valeur de chaque propriété dans une boucle ?

Answer 1

Selon les navigateurs que vous devez prendre en charge, cela peut se faire de plusieurs manières. L'écrasante majorité des navigateurs actuels prennent en charge ECMAScript 5 (ES5), mais sachez que de nombreux exemples ci-dessous utilisent Object.keys qui n'est pas disponible dans IE < 9. Voir le tableau de compatibilité .

ECMAScript 3+.

Si vous devez prendre en charge d'anciennes versions d'IE, cette option est faite pour vous :

for (var key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
        var val = obj[key];
        // use val
    }
}

L'emboîtement if permet de ne pas énumérer les propriétés dans la chaîne de prototypes de l'objet (ce qui est le comportement que vous souhaitez presque certainement). Vous devez utiliser

Object.prototype.hasOwnProperty.call(obj, key) // ok

plutôt que

obj.hasOwnProperty(key) // bad

car ECMAScript 5+ vous permet de créer des objets sans prototypes avec Object.create(null) et ces objets n'auront pas le hasOwnProperty méthode. Un code vilain peut également produire des objets qui surchargent la méthode hasOwnProperty méthode.

ECMAScript 5+.

Vous pouvez utiliser ces méthodes dans tout navigateur prenant en charge ECMAScript 5 et plus. Elles récupèrent les valeurs d'un objet et évitent l'énumération de la chaîne de prototypes. Où obj est votre objet :

var keys = Object.keys(obj);

for (var i = 0; i < keys.length; i++) {
    var val = obj[keys[i]];
    // use val
}

Si vous voulez quelque chose d'un peu plus compact ou si vous voulez faire attention aux fonctions dans les boucles, alors Array.prototype.forEach est votre ami :

Object.keys(obj).forEach(function (key) {
    var val = obj[key];
    // use val
});

La méthode suivante construit un tableau contenant les valeurs d'un objet. C'est pratique pour faire des boucles.

var vals = Object.keys(obj).map(function (key) {
    return obj[key];
});

// use vals array

Si vous voulez les faire en utilisant Object.keys à l'abri de null (comme for-in est), alors vous pouvez faire Object.keys(obj || {})... .

Object.keys renvoie à énumérable propriétés. Pour itérer sur des objets simples, c'est généralement suffisant. Si vous avez besoin de travailler avec un objet dont les propriétés ne sont pas énumérables, vous pouvez utiliser Object.getOwnPropertyNames à la place de Object.keys .

ECMAScript 2015+ (alias ES6)

Les tableaux sont plus faciles à itérer avec ECMAScript 2015. Vous pouvez utiliser cela à votre avantage lorsque vous travaillez avec des valeurs une par une dans une boucle :

for (const key of Object.keys(obj)) {
    const val = obj[key];
    // use val
}

Grâce aux fonctions de flèche grasse de l'ECMAScript 2015, le mappage de l'objet en un tableau de valeurs devient un jeu d'enfant :

const vals = Object.keys(obj).map(key => obj[key]);

// use vals array

ECMAScript 2015 introduit Symbol dont les instances peuvent être utilisées comme noms de propriétés. Pour obtenir les symboles d'un objet à énumérer, utilisez Object.getOwnPropertySymbols (cette fonction est la raison pour laquelle Symbol ne peut pas être utilisé pour faire des propriétés privées). Les nouveaux Reflect L'API de l'ECMAScript 2015 fournit Reflect.ownKeys qui renvoie une liste de noms de propriétés (y compris celles qui ne sont pas dénombrables) et de symboles.

Compréhension des tableaux (ne pas essayer de les utiliser)

Les compréhensions de tableaux étaient supprimé de l'ECMAScript 6 avant publication. Avant leur suppression, une solution aurait ressemblé à ceci :

const vals = [for (key of Object.keys(obj)) obj[key]];

// use vals array

ECMAScript 2017+

ECMAScript 2016 ajoute des fonctionnalités qui n'ont pas d'impact sur ce sujet. La spécification ECMAScript 2017 ajoute Object.values et Object.entries . Les deux retournent des tableaux (ce qui sera surprenant pour certains étant donné l'analogie avec Array.entries ). Object.values peut être utilisé tel quel ou avec un for-of boucle.

const values = Object.values(obj);

// use values array or:

for (const val of Object.values(obj)) {
    // use val
}

Si vous voulez utiliser à la fois la clé et la valeur, alors Object.entries est pour vous. Il produit un tableau rempli de [key, value] paires. Vous pouvez l'utiliser tel quel ou (notez également l'affectation de déstructuration de l'ECMAScript 2015) dans un fichier de type for-of boucle :

for (const [key, val] of Object.entries(obj)) {
    // use key and val
}

Object.values Cale

Enfin, comme indiqué dans les commentaires et par teh_senaus dans une autre réponse, il peut être intéressant d'utiliser l'un de ces éléments comme cale. Ne vous inquiétez pas, ce qui suit ne change pas le prototype, il ajoute juste une méthode à Object (ce qui est beaucoup moins dangereux). En utilisant les fonctions de flèche grasse, cela peut aussi être fait en une seule ligne :

Object.values = obj => Object.keys(obj).map(key => obj[key]);

que vous pouvez maintenant utiliser comme

// ['one', 'two', 'three']
var values = Object.values({ a: 'one', b: 'two', c: 'three' });

Si vous voulez éviter le calage lorsqu'un natif Object.values existe, alors vous pouvez le faire :

Object.values = Object.values || (obj => Object.keys(obj).map(key => obj[key]));

Enfin...

Soyez conscient des navigateurs/versions que vous devez prendre en charge. Ceux-ci sont corrects lorsque les méthodes ou les caractéristiques du langage sont mises en œuvre. Par exemple, jusqu'à récemment, la prise en charge d'ECMAScript 2015 était désactivée par défaut dans V8, qui alimentait des navigateurs tels que Chrome. Les fonctionnalités de l'ECMAScript 2015 doivent être évitées jusqu'à ce que les navigateurs que vous avez l'intention de prendre en charge mettent en œuvre les fonctionnalités dont vous avez besoin. Si vous utilisez babel pour compiler votre code en ECMAScript 5, vous avez alors accès à toutes les fonctionnalités de cette réponse.

Answer 2

En utilisant un simple for..in boucle :

for(var key in objects) {
    var value = objects[key];
}

Answer 3

Voici une fonction réutilisable pour récupérer les valeurs dans un tableau. Elle prend également en compte les prototypes.

Object.values = function (obj) {
    var vals = [];
    for( var key in obj ) {
        if ( obj.hasOwnProperty(key) ) {
            vals.push(obj[key]);
        }
    }
    return vals;
}

Answer 4

Si vous avez accès à Underscore.js, vous pouvez utiliser la fonction _.values comme ceci :

_.values({one : 1, two : 2, three : 3}); // return [1, 2, 3]

Answer 5

Vous pouvez parcourir les touches en boucle :

foo = {one:1, two:2, three:3};
for (key in foo){
    console.log("foo["+ key +"]="+ foo[key]);
}

produira un résultat :

foo[one]=1
foo[two]=2
foo[three]=3