JavaScript中按name前缀分组合并数组url值的实现需求

嘿，这个需求很清晰，咱们可以通过分组聚合+结构转换两步轻松搞定，直接上思路和代码：

步骤1：按obj前缀聚合url #

首先用Array.prototype.reduce()遍历原数组，把相同前缀对应的url收集到一起——这是处理这类分组需求的常用方法：

const array = [{ "name": "obj0_property0", "url": "picture1" }, { "name": "obj1_property0", "url": "picture1" }, { "name": "obj0_property1", "url": "picture2" }];

// 第一步：分组聚合
const groupedData = array.reduce((acc, currentItem) => {
  // 从name字段里提取obj前缀（比如从obj0_property0中拿到obj0）
  const prefix = currentItem.name.split('_')[0];
  // 如果当前前缀还没在聚合对象里，先初始化一个空数组
  if (!acc[prefix]) {
    acc[prefix] = [];
  }
  // 把当前item的url存入对应前缀的数组
  acc[prefix].push(currentItem.url);
  return acc;
}, {});

执行完这一步，groupedData会变成这样的结构：

{
  obj0: ["picture1", "picture2"],
  obj1: ["picture1"]
}

步骤2：转换为目标数组格式 #

接下来把上面的聚合对象转换成你要的数组结构，用Object.entries()遍历键值对，每个键值对生成一个独立的对象：

const finalResult = Object.entries(groupedData).map(([key, value]) => ({
  [key]: value
}));

现在finalResult就是你想要的最终结构：

[{ "obj0": ["picture1","picture2"] }, { "obj1": ["picture1"] }]

完整代码整合 #

把两步合并成一行更简洁的写法：

const array = [{ "name": "obj0_property0", "url": "picture1" }, { "name": "obj1_property0", "url": "picture1" }, { "name": "obj0_property1", "url": "picture2" }];

const finalResult = Object.entries(
  array.reduce((acc, item) => {
    const prefix = item.name.split('_')[0];
    acc[prefix] = acc[prefix] || [];
    acc[prefix].push(item.url);
    return acc;
  }, {})
).map(([key, value]) => ({ [key]: value }));

console.log(finalResult);

如果后续name字段的前缀分隔规则有变化（比如用连字符代替下划线），只需要修改split('_')[0]这部分即可，灵活性拉满~

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