使用对象对数组项分组

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, {???})
}

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

Answer 1

使用ES6，这可以通过使用很好地完成。reduce（），使用映射作为累加器，然后使用数组。from（）及其映射函数将每个分组的映射条目映射到一个对象：

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

const res = Array.from(arr.reduce((m, {group, color}) => 
    m.set(group, [...(m.get(group) || []), color]), new Map
  ), ([group, color]) => ({group, color})
);

console.log(res);

Answer 2

首先，在JavaScript中，使用〈code〉对数组进行迭代通常不是一个好主意。。。在中。看看为什么在数组迭代中使用“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]});
}

在这里使用中间对象分组有助于加快速度，因为它允许您避免嵌套循环来搜索数组。此外，因为分组是一个对象（而不是数组），使用对其进行迭代。。。在中是合适的。

补遗

FWIW，如果您想避免结果数组中的重复颜色条目，您可以在组[groupName]. ush（myArray[i]. Color）；行上方添加一个if语句以防止重复。使用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);
}

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

Answer 3

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

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);