web-dev-qa-db-fra.com

Version alternative pour Object.values ​​()

Je cherche une version alternative pour la fonction Object.values().
En tant que décrit ici , la fonction n’est pas prise en charge dans Internet Explorer.

Lors de l'exécution de l'exemple de code suivant:

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

Cela fonctionne dans les deux, Firefox et Chrome, mais lève l'erreur suivante dans IE11:

L'objet ne prend pas en charge les propriétés ou méthodes "valeurs"

Ici, vous pouvez le tester: Fiddle .

Alors, quelle serait une solution rapide?

javascriptinternet-explorerbrowserecmascript-6
49
user1170330

Vous pouvez obtenir un tableau de touches avec Object.keys(), puis utiliser map() pour obtenir les valeurs.

var obj = { foo: 'bar', baz: 42 };
var values = Object.keys(obj).map(function(e) {
  return obj[e]
})

console.log(values)

Avec ES6, vous pouvez écrire ceci sur une ligne en utilisant les fonctions de flèche.

var values = Object.keys(obj).map(e => obj[e])
131
Nenad Vracar

Object.values ​​() fait partie de la spécification ES8 (juin 2017). En utilisant Cordova, j’ai réalisé que Android 5.0 Webview ne le supportait pas. Donc, j’ai fait ce qui suit, en créant la fonction polyfill uniquement si la fonctionnalité n’est pas supportée:

if (!Object.values) Object.values = o=>Object.keys(o).map(k=>o[k]);
13
Chong Lip Phang

Puisque Object est une implémentation récente (pas du tout), si vous souhaitez prendre en charge les navigateurs tous (AKA IE8 et versions ultérieures), vous devez créer votre propre fonction:

function objectValues(obj) {
    var res = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            res.Push(obj[i]);
        }
    }
    return res;
}

PS: Je viens de remarquer la balise ecmascript-6. Au fait, je garde cette réponse ici, juste au cas où quelqu'un en aurait besoin.

12
Jorge Fuentes González

Vous pouvez utiliser un polyfill:

const valuesPolyfill = function values (object) {
  return Object.keys(object).map(key => object[key]);
};

const values = Object.values || valuesPolyfill;

console.log(values({ a: 1, b: 2, c: 3 }));
5
Alex Pánek

Si vous utilisez déjà core-js (par exemple en utilisant Angular), vous pouvez simplement importer le polyfill correspondant:

   import 'core-js/es7/object';
3
Daniel Habenicht
var x = {Name: 'John', Age: 30, City: 'Bangalore'};
 
Object.prototype.values = function(obj) {
                                var res = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            res.Push(obj[i]);
        }
    }
    return res;
};
 
document.getElementById("tag").innerHTML = Object.values(x)
<p id="tag"></p>
2
Aamin Khan

Pour les personnes utilisant nderscoreJS , vous pouvez obtenir les valeurs d'objet en utilisant _.values:

var obj = { foo: 'bar', baz: 42 };
console.log(_.values(obj)); // ['bar', 42]
1
Antikhippe

Je sais que c'est un vieux sujet. Je jouais à l'arround et je voulais juste ajouter une autre implémentation. C'est simplement la version de la carte avec la carte elle-même implémentée avec une réduction:

let obj = { foo: 'bar', baz: 42 };

const valueArray = Object.keys(obj).reduce((acc, key) => {
  acc.Push(obj[key]);
  return acc;
}, []);

console.log(valueArray);

Ça fait le travail mais ça a quelque chose qui me dérange. La fonction de réduction utilise obj et le obj n'était pas injecté en elle. Nous devrions éviter variable globale à l'intérieur des fonctions et rendre nos fonctions plus testable. Je préfère donc cette version avec un assistant de fonction de réduction qui prend obj en tant que paramètre et renvoie le fonction de réduction réelle. Il devient:

let obj = { foo: 'bar', baz: 42 };

// reducer function helper take obj and return the actual reducer function
let reducerFuncHelper= obj => (acc, key) => {
  acc.Push(obj[key]);
  return acc;
}
//much better
const valueArray = Object.keys(obj).reduce(reducerFuncHelper(obj), []);
console.log(valueArray);
0
Novy