Lodash - 将对象转换为键值数组的项目/转换

Question

我即将使用 forOwn 来迭代一个对象的属性并手动创建一个数组，不禁想到是否已经有一行代码可以实现这个功能。

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

至：

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

谢谢

- sambomartin

Answer 1

您可以使用lodash的_.map()与简写属性名：

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

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

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>

你也可以使用Object#entries与Array.map()以及数组解构来完成:

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

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

console.log(result);

- Ori Drori

---

我已将此标记为答案，因为它符合我的问题，并按照要求使用了lodash。但是，我在jsperf页面上添加了一个_.map来进行比较。http://jsperf.com/loop-for-in-vs-object-keys-foreach/19（请原谅某人添加的数组操作的额外片段——完全破坏了测试），但是当将forOwn与map进行比较时，没有真正的好处。 - sambomartin

好处不在于性能，而在于“一行代码就能做到”正如您所请求的 :) 无论如何，请记住性能差异只有在大量项目的情况下才会明显，如果这不是问题，建议使用_.map()，因为它更易读（至少对我来说）。 - Ori Drori

Object.entries 只在 ES2017 中可用，因此如果使用 ES2015（ES6），则不可能使用。 - CyberMew

为什么是这样写： const result = _.map(obj, (value, prop) => ({ prop, value })); 而不是这样写： const result = _.map(obj, (prop, value) => ({ prop, value })); ？ - KoreMike

因为当 lodash 的 map 函数将键（prop）作为第二个参数传递时。 - Ori Drori

Answer 2

您甚至不需要使用lodash：

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

- Joseph

---

感谢您的回答，有趣的是Object.keys比forOwn慢。http://jsperf.com/loop-for-in-vs-object-keys-foreach/19 - 有人通过添加一些数组操作来破坏了测试，但请看Object.keys vs .forOwn vs 我添加的新函数.map。 - sambomartin

@sambomartin 当然它会更“快”，因为内部lodash只使用while循环进行迭代。但是，问题从来没有要求性能，而是要求已经可用的东西。 - Joseph

Answer 3

一点ES6: _.map( obj, (value, key) => ({key,value}) ) 使用ES6的箭头函数，将一个对象中的键和值转化为一个新的对象。

- Dzianis Sudas

Answer 4

您可以根据情况使用pairs:

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

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

- Skarllot

---

但这并不适用于他的情况。 - user663031

Answer 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>

- Marcelo Lazaroni

Answer 6

为了回应Ori的评论并且完整起见，我已经发布了_.forOwn版本。它稍微更快一些但是你需要先声明数组（不能写成单行代码）。

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

- sambomartin

---

@ori 这是 forOwn 版本。感谢您的帮助。（http://jsperf.com/loop-for-in-vs-object-keys-foreach/19） - sambomartin