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

小编典典

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

javascript

我的数组是这样的：

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

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

阅读 2782

2020-04-25

共1个答案

小编典典

首先，在JavaScript中，使用遍历数组通常不是一个好主意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);
}

请注意，无论哪种情况，由于所有额外的迭代，您都将放慢速度，因此，如果您不需要避免结果数组中出现重复的颜色条目，我建议您避免使用此额外的代码。那里

2020-04-25