如何将JS对象数组按gridid和UtilName分组生成嵌套对象

算力阿峰

2026-8-30

JS数组两层分组实现方案

你可以直接用原生`Array.reduce`方法实现两层分组逻辑，无额外依赖，运行效率高。

严格匹配示例结构的实现

下面的代码输出结构和你给出的示例完全一致：

const newArr = data.reduce((gridGroup, currentItem) => {
  // 解构取出分组键，剩余字段就是需要存入分组的人员信息
  const { gridid, UtilName, ...userInfo } = currentItem;

  // 查找/初始化gridid一级分组
  let targetGridItem = gridGroup.find(item => Object.hasOwn(item, gridid));
  if (!targetGridItem) {
    targetGridItem = { [gridid]: [{}] };
    gridGroup.push(targetGridItem);
  }
  const utilCollection = targetGridItem[gridid][0];

  // 查找/初始化UtilName二级分组
  if (!utilCollection[UtilName]) {
    utilCollection[UtilName] = [];
  }
  // 数据入组
  utilCollection[UtilName].push(userInfo);

  return gridGroup;
}, []);

注：你给出的目标示例里漏归了FirstName: "ERNEST"的Fiber类目数据，上述代码会把所有原数据正确归类，不会出现漏项。如果你需要调整字段格式（比如把FirstName统一为首字母大写其余小写），可以在push数据前单独处理userInfo里的对应字段即可。

更易使用的等效优化结构

如果没有强制要求和示例结构完全一致，更推荐用下面的写法生成扁平化键值对结构，后续取数不需要遍历查找，直接按键就能拿到对应分组：

// 输出结构：{ [gridid]: { [UtilName]: [人员信息数组] } }
const groupedData = data.reduce((result, item) => {
  const { gridid, UtilName, ...userInfo } = item;
  // 初始化一级分组
  if (!result[gridid]) result[gridid] = {};
  // 初始化二级分组
  if (!result[gridid][UtilName]) result[gridid][UtilName] = [];
  result[gridid][UtilName].push(userInfo);
  return result;
}, {});