我的数组是这样的：
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, {???})
}
我只是不知道如何处理相似组值的分组。
首先创建组名到值的映射。然后转换成你想要的格式。
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);首先，在 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);
}
请注意，在任何一种情况下，由于所有额外的迭代，您都会稍微减慢速度，因此如果您不需要避免结果数组中的重复颜色条目，我建议避免使用此额外代码。那里
使用lodash的groupby方法
创建一个由通过迭代器运行集合的每个元素的结果生成的键组成的对象。分组值的顺序由它们在集合中出现的顺序决定。每个键对应的值是一个负责生成键的元素数组。迭代器使用一个参数调用：（值）。
所以使用 lodash 你可以在一行中得到你想要的。见下文
let myArray = [
{group: "one", color: "red"},
{group: "two", color: "blue"},
{group: "one", color: "green"},
{group: "one", color: "black"},
]
let grouppedArray=_.groupBy(myArray,'group')
console.log(grouppedArray)<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>使用 ES6，这可以很好地使用.reduce()aMap作为累加器，然后使用Array.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);如果您的对象中除了groupand之外还有其他属性color，您可以采用更通用的方法，将分组对象设置为地图的值，如下所示：
const arr = [{"group":"one","color":"red"},{"group":"two","color":"blue"},{"group":"one","color":"green"},{"group":"one","color":"black"}];
const groupAndMerge = (arr, groupBy, mergeInto) =>
Array.from(arr.reduce((m, o) => {
const curr = m.get(o[groupBy]);
return m.set(o[groupBy], {...o, [mergeInto]: [...(curr && curr[mergeInto] || []), o[mergeInto]]});
}, new Map).values());
console.log(groupAndMerge(arr, 'group', 'color'));如果您可以支持可选链接和空合并运算符 (??)，则可以将上述方法简化为以下内容：
const arr = [{"group":"one","color":"red"},{"group":"two","color":"blue"},{"group":"one","color":"green"},{"group":"one","color":"black"}];
const groupAndMerge = (arr, groupBy, mergeWith) =>
Array.from(arr.reduce((m, o) => m.set(o[groupBy], {...o, [mergeWith]: [...(m.get(o[groupBy])?.[mergeWith] ?? []), o[mergeWith]]}), new Map).values());
console.log(groupAndMerge(arr, 'group', 'color'));一种选择是：
var res = myArray.reduce(function(groups, currentValue) {
if ( groups.indexOf(currentValue.group) === -1 ) {
groups.push(currentValue.group);
}
return groups;
}, []).map(function(group) {
return {
group: group,
color: myArray.filter(function(_el) {
return _el.group === group;
}).map(function(_el) { return _el.color; })
}
});