如何改造JS数组分组函数实现按pid关联任意深度嵌套结构

你原有实现的限制来自硬编码的多层嵌套循环，只能处理固定层级的子节点匹配。把层级匹配逻辑替换为递归调用，即可支持任意深度的嵌套场景，同时优化后的逻辑也会降低不必要的重复遍历开销。

改造后的函数代码 #

// 保留原有入参格式，兼容你之前的调用逻辑
const groupChildrenToParentsByKeys = (items, groupedItems, childArrayKey = 'items') => {
  return items.map(item => {
    // 查找当前节点对应的子节点集合
    const children = groupedItems[item.id]
    if (!children || children.length === 0) {
      // 无后代节点直接返回原节点
      return item
    }
    // 递归处理子节点的后代层级，再挂载到当前节点
    return {
      ...item,
      [childArrayKey]: groupChildrenToParentsByKeys(children, groupedItems, childArrayKey)
    }
  })
}

可运行完整示例 #

const list = [   
  { "pid": 0, "id": "solo"},
  { "pid": 0, "id": "member"},
  { "pid": 0, "id": "solo2"},
  { "pid": "member", "id": "10_admin_members"},
  { "pid": "member", "id": "10_invitations"},
  { "pid": "member", "id": "sub_member"},
  { "pid": "sub_member", "id": "other"},
  { "pid": "sub_member", "id": "other2"},
  { "pid": 0, "id": "admin"},
  { "pid": "admin", "id": "admin_general"},
  { "pid": "admin", "id": "admin_modules"},
  { "pid": "admin", "id": "admin_roles"},
  { "pid": "admin", "id": "admin_navigation"},
]

const groupChildrenToParentsByKeys = (items, groupedItems, childArrayKey = 'items') => {
  return items.map(item => {
    const children = groupedItems[item.id]
    if (!children || children.length === 0) {
      return item
    }
    return {
      ...item,
      [childArrayKey]: groupChildrenToParentsByKeys(children, groupedItems, childArrayKey)
    }
  })
}

// 原有调用逻辑无需修改
let groupedObject = _.groupBy(list, 'pid') 
let firstLevel = groupedObject[0]
let childrenParentArray = groupChildrenToParentsByKeys(firstLevel, groupedObject)
console.log(JSON.stringify(childrenParentArray, null, 2))

逻辑说明 #

• 函数接收一批节点后，逐个查询每个节点对应的子节点集合
• 如果存在子节点，就递归调用自身处理子节点的后代层级，再把处理完成的子节点数组挂载到当前节点的指定属性下
• 没有子节点的节点直接返回，终止递归
• 无论嵌套多少层都可以自动适配，没有层级上限

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