使用对象对数组项进行分组

Question

我的阵列是这样的：

 myArray = [
  {group: "one", color: "red"},
  {group: "two", color: "blue"},
  {group: "one", color: "green"},
  {group: "one", color: "black"}
]

我想将其转换为：

 myArray = [
  {group: "one", color: ["red", "green", "black"]}
  {group: "two", color: ["blue"]}
]

所以，基本上，分组依据 group 。

我正在努力：

 for (i in myArray){
  var group = myArray[i].group;
  //myArray.push(group, {???})
}

我只是不知道如何处理相似组值的分组。

原文由 user882670 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，在 JavaScript 中，使用 for ... in 遍历数组通常不是一个好主意。请参阅 为什么将“for…in”与数组迭代一起使用是个坏主意？ 了解详情。

所以你可以尝试这样的事情：

 var groups = {};
for (var i = 0; i < myArray.length; i++) {
  var groupName = myArray[i].group;
  if (!groups[groupName]) {
    groups[groupName] = [];
  }
  groups[groupName].push(myArray[i].color);
}
myArray = [];
for (var groupName in groups) {
  myArray.push({group: groupName, color: groups[groupName]});
}

在此处使用中介 groups 对象有助于加快速度，因为它允许您避免嵌套循环来搜索数组。此外，因为 groups 是一个对象（而不是数组），使用 for ... in 迭代它是合适的。

附录

FWIW，如果您想避免在结果数组中出现重复的颜色条目，您可以在 — 行上方添加 if 语句 groups[groupName].push(myArray[i].color); 以防止重复。使用 jQuery 它看起来像这样；

 if (!$.inArray(myArray[i].color, groups[groupName])) {
  groups[groupName].push(myArray[i].color);
}

如果没有 jQuery，您可能想要添加一个与 jQuery 的 inArray 功能相同的函数：

 Array.prototype.contains = function(value) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === value)
      return true;
  }
  return false;
}

然后像这样使用它：

 if (!groups[groupName].contains(myArray[i].color)) {
  groups[groupName].push(myArray[i].color);
}

请注意，在任何一种情况下，由于所有额外的迭代，您都会稍微减慢速度，因此如果您不需要避免结果数组中的重复颜色条目，我建议避免使用此额外代码。那里

原文由 neuronaut 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

首先创建组名称到值的映射。然后转换成你想要的格式。

 var myArray = [
    {group: "one", color: "red"},
    {group: "two", color: "blue"},
    {group: "one", color: "green"},
    {group: "one", color: "black"}
];

var group_to_values = myArray.reduce(function (obj, item) {
    obj[item.group] = obj[item.group] || [];
    obj[item.group].push(item.color);
    return obj;
}, {});

var groups = Object.keys(group_to_values).map(function (key) {
    return {group: key, color: group_to_values[key]};
});

var pre = document.createElement("pre");
pre.innerHTML = "groups:\n\n" + JSON.stringify(groups, null, 4);
document.body.appendChild(pre);

使用 Array 实例方法（如 reduce 和 map ）可为您提供强大的高级构造，从而为您省去大量手动循环的痛苦。

原文由 1983 发布，翻译遵循 CC BY-SA 3.0 许可协议