如何用 Lodash.js 反转 collection/array？

Question

我是 JavaScript 的初学者，我想取消 collection/array。

我有一个这样的 collection/array :

[
  { 'produit': 'a', 'color': 'white', 'material': 'leather' }, 
  { 'produit': 'b', 'attribute': 'black', 'material': 'wool' }
]

我想将我的 collection/array 转换为这样的东西：

var a = [
  { 'produit': 'a', 'attribute': 'color', 'value': 'white' }, 
  { 'produit': 'a', 'attribute': 'material', 'value': 'leather' }, 
  { 'produit': 'b', 'attribute': 'color', 'value' :'black' },
  { 'produit': 'b', 'attribute': 'material', 'value': 'wool' }
]

我试图在 lodash.js 的文档中找到一些东西，但我不知道该怎么做。

Answer 1

您可以将剩余对象的 _.flatMap(), by destructuring the produit key for each object and then mapping the keys/values 用于包含 produit 键的新对象，键作为 attribute 键，值作为 value 键：

const arr = [
  { 'produit': 'a', 'color': 'white', 'material': 'leather' }, 
  { 'produit': 'b', 'attribute': 'black', 'material': 'wool' }
];

const res = _.flatMap(
  arr,
  ({produit, ...r}) => _.map(_.entries(r), ([attribute, value]) => ({produit, attribute, value}))
);

console.log(res);

<script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>

现在JS有很多内置的数组函数，所以上面的也可以用类似的方法在vanilla JS中实现：

const arr = [
  { 'produit': 'a', 'color': 'white', 'material': 'leather' }, 
  { 'produit': 'b', 'attribute': 'black', 'material': 'wool' }
];

const res = arr.flatMap(
  ({produit, ...r}) => Object.entries(r).map(([attribute, value]) => ({produit, attribute, value}))
);

console.log(res);

<script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>

Answer 2

你不需要lodash。您可以使用对象销毁和减少轻松地做到这一点。

const original = [
  { 'produit': 'a', 'color': 'white', 'material': 'leather' }, 
  { 'produit': 'b', 'attribute': 'black', 'material': 'wool' }
]

const altered = original.reduce((acc, item) =>
  (({ produit, ...rest }) =>
    Object.entries(rest).reduce((result, [attribute, value]) =>
      [ ...result, { produit, attribute, value } ], acc))(item), []);

console.log(altered);

.as-console-wrapper { top: 0; max-height: 100% !important; }

如何用 Lodash.js 反转 collection/array？

How to unpivot a collection/array with Lodash.js?

javascript

lodash

unpivot