JavaScript按name属性匹配递归给树形对象数组追加配置的实现

优化前置步骤 #

先把arr2转换为以name为key的映射表，避免每次递归都遍历arr2查找匹配项，大幅提升执行效率。

递归实现逻辑 #

封装递归函数处理单个节点：

1. 匹配当前节点对应的config配置
2. 若当前节点存在children数组，对每个子节点递归调用处理函数
3. 返回追加了config字段的新节点

完整可运行代码 #

// 先构建name到配置的映射表
const configMap = new Map(arr2.map(item => [item.name, { val1: item.val1, val2: item.val2 }]))

// 递归处理节点的函数
const processTreeNode = (node) => {
  // 匹配当前节点的配置
  const config = configMap.get(node.name)
  return {
    ...node,
    // 匹配到才加config字段，无匹配项可自行补充兜底逻辑
    ...(config ? { config } : {}),
    // 递归处理所有子节点
    children: node.children?.map(child => processTreeNode(child)) ?? []
  }
}

// 遍历根数组处理所有节点
const result = arr1.map(node => processTreeNode(node))

console.log(result)

逻辑说明 #

• 用Map做映射的时间复杂度是O(m)（m为arr2的长度），递归遍历arr1的时间复杂度是O(n)（n为arr1的所有节点总数），整体效率远高于每次遍历find的O(n*m)写法
• 全程返回新对象，不会修改原始的arr1和arr2数据
• 兼容任意层级的children嵌套，不管嵌套多少层都能正确匹配追加config字段

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