JavaScript实现数组按颜色分组，获取对应汽车名称列表

首先要明确：你期望的输出结构更适合用对象（键值对）来实现，因为JavaScript数组的索引只能是数字，无法直接用"Red"这类字符串作为索引。你写的示例输出其实是对象的逻辑，只是误用了数组的写法，这很可能是导致你现有函数输出不符合预期的核心原因之一。

现有代码可能存在的问题 #

1. 错误用数组存储分组结果：数组不支持字符串索引，强行赋值会导致数据结构混乱，无法实现按颜色映射的需求。
2. 分组逻辑疏漏：比如未判断当前颜色是否已存在于分组容器中，每次都新建数组，导致同颜色的汽车名称被覆盖或分散存储。
3. 数据提取错误：可能误将整个汽车对象推入数组，而非仅提取Name属性值。

简便实现方法 #

用Array.prototype.reduce可以高效完成分组逻辑，直接得到以颜色为键、对应汽车名称数组为值的对象：

let myCar = [
    {Name : 'Saab', Color : 'Red'},
    {Name : 'Volvo', Color : 'Green'},
    {Name : 'BMW', Color : 'Black'},
    {Name : 'Toyota', Color : 'Black'},
    {Name : 'Audi', Color : 'Red'},
];

const groupedCars = myCar.reduce((acc, car) => {
  // 若当前颜色未在累加对象中，初始化空数组
  if (!acc[car.Color]) {
    acc[car.Color] = [];
  }
  // 将当前汽车名称推入对应颜色的数组
  acc[car.Color].push(car.Name);
  return acc;
}, {});

console.log(groupedCars);

输出结果：

{
  Red: ["Saab", "Audi"],
  Green: ["Volvo"],
  Black: ["BMW", "Toyota"]
}

如果想要接近你写的类数组展示格式，可以把对象转换成包含键值对的二维数组：

const groupedArray = Object.entries(groupedCars);
console.log(groupedArray);

输出结果：

[
  ["Red", ["Saab", "Audi"]],
  ["Green", ["Volvo"]],
  ["Black", ["BMW", "Toyota"]]
]

内容的提问来源于stack exchange，提问作者Keyboard Corporation