JavaScript对象数组分组并按类别聚合产品名称的实现问题

我来帮你搞定这个问题！先看看你代码里的小问题，再一步步实现你要的效果～

首先，你的代码有两个需要调整的地方：一是调用groupBy时错误地把products数组又套了一层数组，导致分组逻辑出错；二是原groupBy返回的是分组对象，还需要额外处理才能转换成你要的空格分隔字符串格式。

修正后的完整实现 #

先看完整代码，再逐段解释：

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    // 直接存储产品名称，后续拼接更方便
    (rv[x[key]] = rv[x[key]] || []).push(x.name);
    return rv;
  }, {});
};

const products = [{id: 1, name: 'Apple', category: 'Fruit'}, {id: 2, name: 'Melon', category: 'Fruit'}, {id: 3, name: 'iPhone', category: 'Phone'}, {id: 4, name: 'Samsung Galaxy Note 8', category: 'Phone'}, {id: 5, name: 'Playstation 5', category: 'Entertainment'}];

// 第一步：修正groupBy调用，直接传products而非[products]
const groupedProducts = groupBy(products, 'category');

// 第二步：把分组对象转换成目标格式的字符串
const result = Object.entries(groupedProducts)
  .map(([category, names]) => `${category} ${names.join(' ')}`)
  .join(' ');

console.log(result); // 输出：Fruit Apple Melon Phone iPhone Samsung Galaxy Note 8 Entertainment Playstation 5

关键步骤说明 #

• 修正groupBy调用：原代码里的groupBy([products], 'category')改成groupBy(products, 'category')，这样函数才能正确遍历原数组里的每个产品对象。
• 优化groupBy函数：我把push(x)改成push(x.name)，让分组后的每个分类直接对应产品名称数组，后续拼接字符串更省事。如果之后还需要完整的产品对象，改回push(x)，再在后续处理中取item.name即可。
• 转换为目标字符串：
  1. Object.entries(groupedProducts)将分组对象转为键值对数组，比如[['Fruit', ['Apple', 'Melon']], ...]
  2. map遍历每个键值对，把分类名和对应产品名用空格拼接成一段字符串
  3. 最后用join(' ')把所有段拼接成完整的目标字符串

如果你不想修改原groupBy函数，也可以这样处理：

// 使用你原本的groupBy函数
var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

const groupedProducts = groupBy(products, 'category');
const result = Object.entries(groupedProducts)
  .map(([category, items]) => `${category} ${items.map(item => item.name).join(' ')}`)
  .join(' ');

console.log(result); // 同样能得到正确结果

两种方式都能实现你想要的效果，按需选择就好～

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