So konvertieren Sie ein Objekt {} in ein Array [] von Schlüssel-Wert-Paaren in JavaScript


243

Ich möchte ein Objekt wie folgt konvertieren:

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

in ein Array von Schlüssel-Wert-Paaren wie folgt:

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

Wie kann ich ein Objekt in JavaScript in ein Array von Schlüssel-Wert-Paaren konvertieren?

Antworten:


428

Sie können Object.keys()und verwenden map(), um dies zu tun

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


6
@blvckasvp Verwenden Sie Zahlen als Schlüssel? Wenn nicht, schlägt es fehl und kehrt NaNstattdessen zurück , wenn versucht wird, Ihren Schlüssel in eine Zahl umzuwandeln . Wenn Sie Zeichenfolgen als Schlüssel verwenden möchten, ändern Sie die Rückgabe von [Number(key), obj[key]]auf [key, obj[key]]oder verwenden Sie das Object.entriesin der Antwort vorgeschlagene
@Pila

123

Der beste Weg ist:

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

Wenn Sie entrieswie hier gezeigt anrufen , werden [key, value]Paare zurückgegeben, wie vom Fragesteller angefordert.

Alternativ können Sie aufrufen Object.values(obj), was nur Werte zurückgibt.


6
Sehr geehrte Entwickler, bitte überprüfen Sie die ECMA-Kompatibilitätstabelle, bevor Sie diese netten Funktionen übernehmen, die nur mit vor Minuten veröffentlichten Browsern kompatibel sind.
Andreszs

8
@andreszs Siehe Kann ich eine Tabelle verwenden ? Wenn es Ihnen nichts ausmacht, die IE-Unterstützung einzustellen (und ich hoffe, dass Sie 2019 wirklich nicht vernünftig sind) , können Sie loslegen . FF 47 ist ab Juni 2016 und Chrome 54 ist ab Oktober desselben Jahres, Edge 14. August. Vor nicht allzu wenigen Minuten.
Kyll

Zu Ihrer Information: Object.entries gibt [Schlüssel, Wert] zurück, aber der Schlüssel ist eine Zeichenfolge, der Wert unterscheidet sich.
SHAHBAZ

61

Object.entries()Gibt ein Array zurück, dessen Elemente Arrays sind, die den aufzählbaren Eigenschaftspaaren entsprechen, die [key, value]direkt gefunden wurden object. Die Reihenfolge der Eigenschaften entspricht der Reihenfolge, in der die Eigenschaftswerte des Objekts manuell durchlaufen werden.

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

Die Object.entriesFunktion gibt fast genau die Ausgabe zurück, nach der Sie fragen, außer dass die Tasten Zeichenfolgen anstelle von Zahlen sind.

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

Wenn die Schlüssel Zahlen sein müssen, können Sie das Ergebnis einem neuen Array mit einer Rückruffunktion zuordnen, die den Schlüssel in jedem Paar durch eine daraus erzwungene Zahl ersetzt.

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

Ich verwende eine Pfeilfunktion und Object.assignfür den Map-Rückruf im obigen Beispiel, damit ich sie in einer Anweisung behalten kann, indem ich die Tatsache nutze, dass Object.assigndas zugewiesene Objekt zurückgegeben wird, und der Rückgabewert einer einzelnen Anweisungspfeilfunktion ist das Ergebnis der Anweisung.

Dies entspricht:

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

Wie von @TravisClarke in den Kommentaren erwähnt, könnte die Kartenfunktion verkürzt werden auf:

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

Dies würde jedoch ein neues Array für jedes Schlüssel-Wert-Paar erstellen, anstatt das vorhandene Array an Ort und Stelle zu ändern, wodurch die Anzahl der erstellten Schlüssel-Wert-Paar-Arrays verdoppelt würde. Während auf das ursprüngliche Eintragsarray noch zugegriffen werden kann, werden es und seine Einträge nicht durch Müll gesammelt.

Obwohl bei Verwendung unserer In-Place-Methode immer noch zwei Arrays verwendet werden, die die Schlüssel-Wert-Paare enthalten (das Eingabe- und das Ausgabearray), ändert sich die Gesamtzahl der Arrays nur um eins. Die Eingabe- und Ausgabearrays sind nicht wirklich mit Arrays gefüllt, sondern Verweise auf Arrays und diese Verweise nehmen einen vernachlässigbaren Speicherplatz ein.

  • Das Ändern jedes Schlüssel-Wert-Paares an Ort und Stelle führt zu einem vernachlässigbaren Speicherwachstum, erfordert jedoch die Eingabe einiger weiterer Zeichen.
  • Das Erstellen eines neuen Arrays für jedes Schlüssel-Wert-Paar führt zu einer Verdoppelung des erforderlichen Speicherplatzes, erfordert jedoch die Eingabe einiger weniger Zeichen.

Sie können noch einen Schritt weiter gehen und das Wachstum insgesamt eliminieren, indem Sie das Eintragsarray an Ort und Stelle ändern, anstatt es einem neuen Array zuzuordnen:

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


1
Ich mag den funktionalen Ansatz. Als kürzere Alternative:Object.entries(obj).map(e => [+e[0], e[1]]);
Travis Clarke

20

Um einige dieser Antworten jetzt im Jahr 2018 zusammenzufassen, wobei ES6 der Standard ist.

Beginnend mit dem Objekt:

let const={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
  • Nur blind die Werte auf einem Array abrufen, kümmern sich nicht um die Schlüssel:

const obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
console.log(Object.values(obj));
//[9,8,7,6,5,4,3,2,1,0,5]

  • Einfaches Abrufen der Paare in einem Array:

const obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
console.log(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]]

  • Wie zuvor, jedoch mit Zifferntasten für jedes Paar:

const obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
console.log(Object.entries(obj).map(([k,v])=>[+k,v]));
//[[1,9],[2,8],[3,7],[4,6],[5,5],[6,4],[7,3],[8,2],[9,1],[10,0],[12,5]]

  • Verwenden der Objekteigenschaft als Schlüssel für ein neues Array (kann spärliche Arrays erstellen):

const obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
console.log(Object.entries(obj).reduce((ini,[k,v])=>(ini[k]=v,ini),[]));
//[undefined,9,8,7,6,5,4,3,2,1,0,undefined,5]

Bei dieser letzten Methode kann auch die Array-Reihenfolge in Abhängigkeit vom Wert der Schlüssel neu organisiert werden. Manchmal könnte dies das gewünschte Verhalten sein (manchmal nicht). Der Vorteil besteht nun darin, dass die Werte auf dem richtigen Array-Steckplatz indiziert werden, was für die Suche darauf wesentlich und trivial ist.

  • Karte statt Array

Schließlich (nicht Teil der ursprünglichen Frage, aber der Vollständigkeit halber), wenn Sie eine einfache Suche mit dem Schlüssel oder dem Wert benötigen, aber keine spärlichen Arrays, keine Duplikate und keine Neuordnung wünschen, ohne in numerische Schlüssel konvertieren zu müssen ( kann sogar auf sehr komplexe Schlüssel zugreifen), dann ist Array (oder Objekt) nicht das, was Sie brauchen. Ich werde Mapstattdessen empfehlen :

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

let r=new Map(Object.entries(obj));
r.get("4"); //6
r.has(8); //true

2
Der vierte Punkt und danach ist für die Frage völlig irrelevant, und der Rest Ihrer Antwort fasst hier nur die drei wichtigsten Antworten zusammen. Diese Antwort bringt nichts in die Diskussion, was noch nicht hier war oder nicht völlig irrelevant ist.

Ja, als erster Zeilenstatus ist dies eine Zusammenfassung der Antworten. Aktualisieren Sie sie dann, um moderne ES6-Techniken anstelle von Vollblasfunktionen zu verwenden. Die vierte Antwort ist nützlich, wenn Sie JSON-Arrays aus einer Sprache verschieben, die assoziative Arrays unterstützt (z. B. PHP).
CarlosH.

Alle hier bereitgestellten Methoden wurden bereits in ihrer einfachen Form in zwei der drei wichtigsten Antworten bereitgestellt. Sie sind nicht in Funktionen enthalten, sodass ich nicht weiß, worüber Sie dort sprechen. Was den 4. betrifft, ist er, wie gesagt, für die gestellte Frage völlig irrelevant. Es könnte für eine andere Frage relevant sein, aber nicht für diese. Unabhängig davon ist JSON JSON, unabhängig davon, ob es mit PHP, JavaScript oder Haskell erstellt wurde.

18

Noch eine andere Lösung, wenn Object.entriessie für Sie nicht funktioniert.

const obj = {
      '1': 29,
      '2': 42
    };
const arr = Array.from(Object.keys(obj), k=>[`${k}`, obj[k]]);
console.log(arr);


1
Das hat bei mir funktioniert. Beim Importieren von JSON wurden Indizes hinzugefügt, die die Verwendung der Angulars ngFor-Schleife unmöglich machten. Dadurch wurden die Indizes entfernt, während die Struktur beibehalten wurde.
RAC

@RAC +1 für die Verwendung von "Indizes" anstelle von "Indizes". Beginnen Sie archaische (dh willkürliche und bedeutungslos abweichende) englische Traditionen!
Venryx

12

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

Geige


Ich bin mir nicht sicher, warum dies abgelehnt wurde, hat einwandfrei funktioniert
sMyles

1
Ich habe nicht abgelehnt, aber beachten Sie, dass der .map((value)=>(value))Teil bedeutungslos ist - er gibt nur ein Eintragsarray zurück, das genau dem entspricht, das aus dem Object.entries(obj)Aufruf erhalten wurde.
Venryx

8

Verwendung Object.keysund Array#mapMethoden.

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


7

Verwenden Sie Object.entriesdiese Option , um jedes Element des Objekts im key & valueFormat zu erhalten, und mapdurchlaufen Sie es dann wie folgt:

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

Wenn Sie jedoch sicher sind, dass die Tasten in progressiver Reihenfolge angezeigt werden, können Sie Folgendes verwenden Object.valuesund Array#maptun:

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


5

Wenn Sie lodash verwenden, kann dies so einfach sein:

var arr = _.values(obj);

5

Mit lodash können Sie zusätzlich zu der oben angegebenen Antwort auch den Schlüssel im Ausgabearray haben.

Ohne die Objektschlüssel im Ausgabearray

zum:

const array = _.values(obj);

Wenn obj das Folgende ist:

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

Dann wird das Array sein:

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

Mit den Objektschlüsseln im Ausgabearray

Wenn Sie stattdessen schreiben ('Genre' ist eine Zeichenfolge, die Sie auswählen):

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

Sie erhalten:

[ 
  { id: 1, title: aaaa , genre: art”}, 
  { id: 22, title: 7777”, genre: fiction }
]

4

Ich würde diese einfachste Lösung vorschlagen Object.entries()

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.entries(obj)

console.log(result);


1

Sie können Object.values([])diese Polyfüllung verwenden, wenn Sie dies noch nicht getan haben:

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

https://stackoverflow.com/a/54822153/846348

Dann können Sie einfach tun:

var object = {1: 'hello', 2: 'world'};
var array = Object.values(object);

Denken Sie daran, dass Arrays in js nur numerische Schlüssel verwenden können. Wenn Sie also etwas anderes im Objekt verwendet haben, werden diese zu "0,1,2 ... x"

Es kann nützlich sein, Duplikate zu entfernen, wenn Sie beispielsweise einen eindeutigen Schlüssel haben.

var obj = {};
object[uniqueKey] = '...';

0

Verwenden Sie für in

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

Rekursives Konvertieren eines Objekts in ein Array

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

Wir können Number in String-Typ für Key wie folgt ändern:

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

Dies ist meine Lösung, ich habe das gleiche Problem und es scheint, als würde diese Lösung für mich funktionieren.

yourObj = [].concat(yourObj);

0

Dies ist meine einfache Barebone-Implementierung:

let 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 objectToArray = obj => {
      let sol = [];
      for (key in obj) {
        sol.push([key, obj[key]]);
      }
      return sol;
    };

objectToArray(obj)

0

Einfache Lösung

`

var result = Object.keys(records).map(function (value) {
         return { [value]: records[value] };
});
console.log(result);


Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.