lodash - 项目/转换对象到键值数组答案

【问题标题】：lodash - project/transform object into key value arraylodash - 项目/转换对象到键值数组
【发布时间】：2015-08-19 16:09:48
【问题描述】：

我即将使用forOwn 来遍历对象的属性并手动创建一个数组，我不禁想到已经有一个可用的单行器来完成它。

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

到：

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

谢谢

【问题讨论】：

标签： javascript lodash

【解决方案1】：

您可以将 lodash 的 _.map() 与 shorthand property names 一起使用：

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

const result = _.map(obj, (value, prop) => ({ prop, value }));

console.log(result);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"&gt;&lt;/script&gt;

或者您可以使用Object#entries 与Array.map() 和array destructuring 来实现：

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

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

console.log(result);

【讨论】：

我已将此标记为答案，因为它符合我要求使用 lodash 的问题。但是，我在 jsperf 页面中添加了一个 _.map 来比较它们。 jsperf.com/loop-for-in-vs-object-keys-foreach/19（请原谅有人为数组操作添加了额外的 sn-p - 完全破坏了测试），但是当将 forOwn 与 map 进行比较时，它并没有真正的好处
好处不在于性能，而在于您要求的“oneliner 已经可以做到这一点”:) 无论如何，请记住，性能差异仅在大量项目中很明显，如果这不是问题，请使用_.map()，因为它更具可读性（至少对我而言）。
Object.entries 仅在 ES2017 中可用，因此如果使用 ES2015 (ES6)，则无法使用。
为什么是：const result = _.map(obj, (value, prop) => ({ prop, value })); 而不是：const result = _.map(obj, (prop, value) => ({ prop, value }));？
因为当 lodash 的 map 将 key (prop) 作为第二个参数传递时。

【解决方案2】：

你甚至不需要 lodash：

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

【讨论】：

感谢您的回答，有趣的是 Object.keys 比 forOwn 慢。 jsperf.com/loop-for-in-vs-object-keys-foreach/19 - 有人通过添加一些数组操作破坏了测试，但是看看 Object.keys 与 _.forOwn 与我添加的新的 _.map
@sambomartin 当然它会“更快”，因为内部 lodash 只使用 while 循环进行迭代。但话又说回来，这个问题从不问性能，而是问已经可用的东西。

【解决方案3】：

一点点 ES6：

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

【讨论】：

【解决方案4】：

如果适合您的情况，您可以使用pairs：

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

参考：https://lodash.com/docs#pairs

【讨论】：

但这不适合他的情况。

【解决方案5】：

如果你使用 lodash/fp，你可以使用_.entries

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>

【讨论】：

【解决方案6】：

为了回应 Ori 的评论和完整性，我发布了 _.forOwn 版本。它稍微快一点，但您需要先声明数组（不是单行）。

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

【讨论】：

@ori 这是 forOwn 版本。谢谢你的帮助。 (jsperf.com/loop-for-in-vs-object-keys-foreach/19)