2015-08-19 9 views
16

Ich bin dabei, forOwn zu verwenden, um durch die Eigenschaften eines Objekts zu iterieren und ein Array manuell zu erstellen und kann nicht helfen, zu denken, dass ein oneliner bereits verfügbar ist.lodash - Projekt/Objekt in Schlüsselwert-Array transformieren

{ 
    prop1 : "value", 
    prop2: { sub:1} 
} 

zu:

[ 
    {key: "prop1", value: "value"}, 
    {key: "prop2", value: {sub:1}} 
] 

Dank

Antwort

24

Sie können _.map() lodash des verwenden:

var obj = { 
 
    prop1 : "value", 
 
    prop2: { sub:1} 
 
}; 
 

 
var result = _.map(obj, function(value, prop) { 
 
    return { prop: prop, value: value }; 
 
}); 
 

 
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>

Oder Sie können es ES6 mit tun array destructuring, mit Shorthand property names und Object#entries (ECMAScript 2017 Draft) oder lodash des _.entries:

const obj = { 
 
    prop1 : "value", 
 
    prop2: { sub:1} 
 
}; 
 

 
const result = Object.entries(obj).map(([prop, value]) => ({ prop, value })); 
 

 
console.log(result);

+0

Ich habe dies als die Antwort markiert, wie es mein Problem mit lodash wie gewünscht passt. Allerdings habe ich eine _.map zur jsperf-Seite hinzugefügt, um sie zu vergleichen. http://jsperf.com/loop-for-in-vs-object-keys-foreach/19 (Entschuldigen Sie das zusätzliche Snippet, das jemand für das Array op hinzugefügt hat - komplett den Test ruiniert), aber wenn Sie das forOwn mit der Karte vergleichen, es gibt keinen wirklichen Vorteil für sie – sambomartin

+0

Der Vorteil ist nicht in der Leistung, aber in "oneliner bereits verfügbar, um es zu tun", wie Sie angefordert :) Beachten Sie, dass der Unterschied in der Leistung ist nur in einer sehr großen Menge von Gegenständen bemerkbar, und Wenn das nicht das Problem ist, gehen Sie mit '_.map() 'wie es besser lesbar ist (zumindest für mich). –

9

Sie brauchen nicht einmal lodash dafür:

var arr = Object.keys(obj).map(function(key){ 
    return { key: key, value: obj[key] }; 
}); 
+0

Danke für die Antwort, interessanterweise ist Object.keys langsamer als forOwn. http://jsperf.com/loop-for-in-vs-object-keys-foreach/19 - jemand hat den Test ruiniert, indem er einige Array-Ops hinzugefügt hat, aber sehen Sie sich Object.keys vs _.forOwn vs die neue an ich habe hinzugefügt _.map – sambomartin

+0

@sambomartin Natürlich wird es "schneller" sein, da intern lodash nur 'while' Schleife für Iteration verwendet. Aber andererseits hat die Frage nie um Leistung gebeten, sondern um etwas, das bereits verfügbar ist. – Joseph

1

Sie pairs verwenden können, wenn es Ihrem Fall passt:

_.pairs({ 'barney': 36, 'fred': 40 }); 
// → [['barney', 36], ['fred', 40]] 

Ref: https://lodash.com/docs#pairs

+0

Aber es passt nicht zu seinem Fall. –

1

Als Reaktion auf Ori Kommentar und für die Vollständigkeit, habe ich die _.forOwn Version geschrieben. Es ist marginal schneller, aber Sie müssen zuerst das Array deklarieren (kein One-Liner).

var arr = []; 
_.forOwn(obj,function(item, key) { 
    arr.push({ property : key, value : item}); 
}); 
+0

@ori dies ist die ForOwn-Version. danke für Ihre Hilfe. (http://jsperf.com/loop-for-in-vs-object-keys-foreseach/19) – sambomartin

9

Ein wenig ES6:

_.map(obj, (value, key) => ({key,value}))

2

Wenn Sie lodash verwenden/fp können Sie _.entries verwenden

const a = { one: 123, two: { value: 'b' }}; 
 

 
const pairs = _.entries(a).map(p => ({ key:p[0], value: p[1] })) 
 

 
console.log(pairs) 
 
// [ 
 
// { 
 
//  "key": "one", 
 
//  "value": 123 
 
// }, 
 
// { 
 
//  "key": "two", 
 
//  "value": { 
 
//  "value": "b" 
 
//  } 
 
// } 
 
// ]
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/4.15.0/lodash-fp.js"></script>