web-dev-qa-db-fra.com

Comment convertir un objet {} en un tableau [] de paires clé-valeur en JavaScript

Je veux convertir un objet comme ceci:

{"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}

dans un tableau de paires clé-valeur comme ceci:

[[1,5],[2,7],[3,0],[4,0]...].

Comment convertir un objet en un tableau de paires clé-valeur en JavaScript?

javascriptarraystype-conversion
107
Soptareanu Alex

Vous pouvez utiliser Object.keys() et map() pour le faire

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}
var result = Object.keys(obj).map(function(key) {
  return [Number(key), obj[key]];
});

console.log(result);

211
Nenad Vracar

Le meilleur moyen est de faire:

var obj ={"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10"‌​:0,"11":0,"12":0} 
Object.entries(obj);

L'appel de entries, comme indiqué ici, renverra [key, value] paires, comme demandé par le demandeur.

Vous pouvez également appeler Object.values(obj), qui ne renverrait que des valeurs.

73
Pila

Object.entries() renvoie un tableau dont les éléments sont des tableaux correspondant aux paires [key, value] de propriété énumérable trouvées directement dans object. L'ordre des propriétés est le même que celui donné en faisant une boucle manuelle sur les valeurs de propriété de l'objet.

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Description

La fonction Object.entries renvoie presque le résultat exact que vous demandez, sauf que les clés sont des chaînes de caractères plutôt que des chiffres.

const obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0};

console.log(Object.entries(obj));

Si vous souhaitez que les clés soient des nombres, vous pouvez mapper le résultat sur un nouveau tableau avec une fonction de rappel qui remplace la clé de chaque paire par un nombre extrait de celle-ci. 

const obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0};

const toNumericPairs = input => {
    const entries = Object.entries(input);
    return entries.map(entry => Object.assign(entry, { 0: +entry[0] }));
}

console.log(toNumericPairs(obj));

J'utilise une fonction de flèche et Object.assign pour le rappel de carte dans l'exemple ci-dessus afin de pouvoir la conserver dans une instruction en tirant parti du fait que Object.assign renvoie l'objet en cours d'affectation, et que la valeur de retour d'une fonction de flèche est le résultat de instruction. 

Ceci est équivalent à:

entry => {
    entry[0] = +entry[0];
    return entry;
}

Comme mentionné par @ TravisClarke dans les commentaires, la fonction de carte pourrait être réduite à:

entry => [ +entry[0], entry[1] ]

Cependant, cela créerait un nouveau tableau pour chaque paire clé-valeur, au lieu de modifier le tableau existant à la place, doublant ainsi le nombre de tableaux de paires clé-valeur créés. Même si le tableau d'entrées d'origine est toujours accessible, il ne sera pas nettoyé avec ses entrées. 

Maintenant, même si notre méthode in-situ utilise toujours deux tableaux contenant les paires clé-valeur (les tableaux d'entrée et de sortie), le nombre total de tableaux ne change que de un. Les tableaux d'entrée et de sortie ne sont pas réellement remplis de tableaux, mais plutôt des références à des tableaux et à ces références occupent une quantité négligeable d'espace en mémoire. 

  • La modification de chaque paire clé-valeur sur place entraîne une croissance négligeable de la mémoire, mais nécessite la saisie de quelques caractères supplémentaires.
  • La création d'un nouveau tableau pour chaque paire clé-valeur entraîne un doublement de la quantité de mémoire requise, mais nécessite la saisie de quelques caractères en moins.

Vous pouvez aller plus loin et éliminer totalement la croissance en modifiant le tableau d'entrées sur place au lieu de le mapper sur un nouveau tableau:

const obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0};

const toNumericPairs = input => {
  const entries = Object.entries(obj);
  entries.forEach(entry => entry[0] = +entry[0]);
  return entries;
}

console.log(toNumericPairs(obj));

35
Tiny Giant

Encore une autre variante que vous pouvez utiliser si Object.values ne fonctionnera pas pour vous.

var obj = {
  foo: 29,
  bar: 42
};
var arr = Array.from(Object.keys(obj), k=>obj[k]);
9
bigh_29

Utilisez les méthodes Object.keys et Array#map.

var obj = {
  "1": 5,
  "2": 7,
  "3": 0,
  "4": 0,
  "5": 0,
  "6": 0,
  "7": 0,
  "8": 0,
  "9": 0,
  "10": 0,
  "11": 0,
  "12": 0
};
// get all object property names
var res = Object.keys(obj)
  // iterate over them and generate the array
  .map(function(k) {
    // generate the array element 
    return [+k, obj[k]];
  });

console.log(res);

6
Pranav C Balan

Utilisez Object.entries pour obtenir chaque élément d’Object au format key & value, puis map à travers eux comme ceci: 

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}

var res = Object.entries(obj).map(([k, v]) => ([Number(k), v]));

console.log(res);

Mais si vous êtes certain que les clés seront dans l'ordre progressif, vous pouvez utiliser Object.values et Array#map pour faire quelque chose comme ceci: 

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}; 

                        // idx is the index, you can use any logic to increment it (starts from 0)
let result = Object.values(obj).map((e, idx) => ([++idx, e]));

console.log(result);

4
BlackBeard

Pour récapituler certaines de ces réponses maintenant sur 2018, où ES6 est la norme.

En commençant par l'objet:

let obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12",5};
  • En obtenant aveuglément les valeurs sur un tableau, ne vous occupez pas des clés:
Object.values(obj);
//[9,8,7,6,5,4,3,2,1,0,5]
  • Obtenir les paires sur un tableau est simple:
Object.entries(obj);
//[["1",9],["2",8],["3",7],["4",6],["5",5],["6",4],["7",3],["8",2],["9",1],["10",0],["12",5]]
  • Identique à la précédente, mais avec des touches numériques sur chaque paire:
Object.entries(obj).map(pair=>[+pair[0],pair[1]]);
//[[1,9],[2,8],[3,7],[4,6],[5,5],[6,4],[7,3],[8,2],[9,1],[10,0],[12,5]]
  • Utilisation des clés d'objet comme clés pour un nouveau tableau (peut créer des tableaux fragmentés):
Object.entries(obj).reduce((ini,pair)=>(ini[pair[0]]=pair[1],ini),[]);
//[null,9,8,7,6,5,4,3,2,1,0,null,5]

Cette dernière option pourrait également réorganiser l’ordre des tableaux en fonction de la valeur des clés. Parfois, cela pourrait être le comportement souhaité, parfois pas. Mais maintenant, les valeurs sont indexées sur le bon emplacement de tableau, il est facile de rechercher dessus.

Cela ne fait pas partie de la question initiale, mais pour être complet. Si vous devez effectuer une recherche par clé ou par valeur, mais que vous ne voulez pas de tableaux fragmentés, pas de réorganisation ou éventuellement de touches numériques, les tableaux ne vous conviennent pas. Je recommanderai plutôt Map:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

new Map(Object.entries(obj));
3
Carlos H.

Si vous utilisez lodash, cela pourrait être aussi simple que cela:

var arr = _.values(obj);
3
iMad

Mise en œuvre ES6 (ES2015) à l'aide de Set

Vous pouvez utiliser la syntaxe Array.from () ou Spread

Exemple de Array.from ()

const names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
const uniqueNames = Array.from(new Set(names));
console.log(uniqueNames);

Exemple de syntaxe Spread

const names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
const uniqueNames = [...new Set(names)];
console.log(uniqueNames);
1
Victor ifeanyi

Avec lodash, en plus de la réponse fournie ci-dessus, vous pouvez également avoir la clé dans le tableau de sortie. 

Sans les clés d'objet dans le tableau de sortie

pour:

const array = _.values(obj);

Si obj est le suivant:

{ “art”: { id: 1,  title: “aaaa” }, “fiction”: { id: 22,  title: “7777”} }

Alors tableau sera:

[ { id: 1, title: “aaaa” }, { id: 22, title: “7777” } ]

Avec les clés d'objet dans le tableau de sortie

Si vous écrivez à la place ('title' est une chaîne que vous choisissez):

const array= _.map(obj, (val, id) => {
    return { ...val, title: key };
  });

Tu auras:

[ 
  { id: 1, title: “aaaa” , title: “art”}, 
  { id: 22, title: “7777”, title: “fiction” }
]
0
Yossi

Dans Ecmascript 6,

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0};

var res = Object.entries(obj);

console.log(res);

violon

0
Nageshwar Reddy

Utilisez pour dans

var obj = { "10":5, "2":7, "3":0, "4":0, "5":0, "6":0, "7":0,
            "8":0, "9":0, "10":0, "11":0, "12":0 };

var objectToArray = function(obj) {
    var _arr = [];

    for (var key in obj) {
        _arr.Push([key, obj[key]]);
    }
    return _arr;
}

console.log(objectToArray(obj));
0
wkyniston

Nous pouvons changer le type Number en String pour Key comme ci-dessous:

`var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}
var result = Object.keys(obj).map(function(key) {
  return [String(key), obj[key]];
});

console.log(result);`
0
Nagnath Mungade

Objet de conversion récursif en tableau

function is_object(mixed_var) {
    if (mixed_var instanceof Array) {
        return false;
    } else {
        return (mixed_var !== null) && (typeof( mixed_var ) == 'object');
    }
}


function objectToArray(obj) {
    var array = [], tempObject;
    for (var key in obj) {

        tempObject = obj[key];

        if (is_object(obj[key])) {
            tempObject = objectToArray(obj[key]);
        }
        array[key] = tempObject;
    }
    return array;
}
0
Marina Lebedeva