修改对象数组以按键和值分组为嵌套的父/子对象数组答案

【问题标题】：Modifying an array of objects to group into a nested parent / child array of objects by keys and values修改对象数组以按键和值分组为嵌套的父/子对象数组
【发布时间】：2018-02-07 20:00:35
【问题描述】：

我目前正在尝试修改对象数组，以根据对键的值进行分组来分解为嵌套的对象数组。

这是一个初始数据格式的例子：

[
    {key: "Toyota", color: "red", cost: 100 },
    {key: "Toyota", color: "green", cost: 200 },
    {key: "Chevrolet", color: "blue", cost: 300 },
    {key: "Honda", color: "yellow", cost: 400 },
    {key: "Datsun", color: "purple", cost: 500 }
]

这是我要整理的输出：

[{
   key: "Toyota", 
   values:  [
    {color: "red", cost: 100 },
    {color: "green", cost: 200 }
  ]
 }, {
   key: "Chevrolet", 
   values:  [
    {color: "blue", cost: 300 }
  ]
 },{
   key: "Honda", 
   values:  [
    {color: "yellow", cost: 400 }
  ]
 },{
   key: "Datsun", 
   values:  [
    {color: "puruple", cost: 500 }
  ]
 }]

到目前为止，我已经在这些解决方案上取得了一些成功（主要使用 lodash 中的 _.map + _.groupBy 解决方案），这有助于将数据拆分为父 -> 子格式。我目前在根据值和键进行分组时仍然遇到一些问题。 Group array of object nesting some of the keys with specific names

当前数据格式类似于：

 [{
   key: "Toyota", 
   values:  [
    {color: "red", cost: 100 },
  ]
 },{
   key: "Toyota", 
   values:  [
    {color: "green", cost: 200 }
  ]
 }, {
   key: "Chevrolet", 
   values:  [
    {color: "blue", cost: 300 }
  ]
 },{
   key: "Honda", 
   values:  [
    {color: "yellow", cost: 400 }
  ]
 },{
   key: "Datsun", 
   values:  [
    {color: "puruple", cost: 500 }
  ]
 }]

任何帮助将不胜感激。谢谢！

【问题讨论】：

你会想要展示让你走到这一步的代码；否则，这是您发布的问题的副本。你还需要解释你不理解的代码是什么。

标签： javascript arrays

【解决方案1】：

您可以使用 Map 而无需其他库。

（这是我对具有单个嵌套要求的引用问题的原始答案。该问题具有嵌套方法，深度超过一级，此处未给出。）

var items = [{ key: "Toyota", color: "red", cost: 100 }, { key: "Toyota", color: "green", cost: 200 }, { key: "Chevrolet", color: "blue", cost: 300 }, { key: "Honda", color: "yellow", cost: 400 }, { key: "Datsun", color: "purple", cost: 500 }],
    map = new Map,
    result;

items.forEach(({ key, color, cost }) => {
    map.has(key) || map.set(key, { key, values: [] });
    map.get(key).values.push({ color, cost });
});

result = [...map.values()];

console.log(result);

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

【讨论】：