前端JavaScript篇之将数组转成树状结构方法有哪些？

---

将数组转成树状结构方法有哪些？

将数组转换为树状结构的方法取决于数组的具体结构和树的定义。以下是一些常见的方法，具体选择取决于数据的形式和树的要求：

1. 递归构建树：

这是一种常见的方法，适用于数组中的每个元素都包含子元素的情况。

function buildTree(array, parentId = null) {
  let tree = []
  for (let item of array) {
    if (item.parentId === parentId) {
      let children = buildTree(array, item.id)
      if (children.length) {
        item.children = children
      }
      tree.push(item)
    }
  }
  return tree
}

let arrayData = [
  { id: 1, parentId: null, name: 'Node 1' },
  { id: 2, parentId: 1, name: 'Node 1.1' },
  { id: 3, parentId: 1, name: 'Node 1.2' },
  { id: 4, parentId: 2, name: 'Node 1.1.1' }
]

let tree = buildTree(arrayData)
console.log(arrayData)
console.log(tree)

2. 使用字典索引：

这种方法适用于数组元素中包含父节点ID的情况。

function buildTree(array) {
  let treeMap = {}
  let tree = []

  array.forEach(item => {
    treeMap[item.id] = { ...item, children: [] }
    if (item.parentId === null) {
      tree.push(treeMap[item.id])
    } else {
      if (!treeMap[item.parentId]) {
        treeMap[item.parentId] = { children: [] }
      }
      treeMap[item.parentId].children.push(treeMap[item.id])
    }
  })

  return tree
}

let arrayData = [
  { id: 1, parentId: null, name: 'Node 1' },
  { id: 2, parentId: 1, name: 'Node 1.1' },
  { id: 3, parentId: 1, name: 'Node 1.2' },
  { id: 4, parentId: 2, name: 'Node 1.1.1' }
]

let tree = buildTree(arrayData)
console.log(arrayData)
console.log(tree)

3. 使用递归和Map：

这种方法使用 ES6 的 Map 数据结构，适用于复杂的树状结构。

function buildTree(array, parentId = null) {
  let treeMap = new Map()

  array.filter(item => item.parentId === parentId).forEach(item => treeMap.set(item.id, { ...item, children: buildTree(array, item.id) }))

  return Array.from(treeMap.values())
}

let arrayData = [
  { id: 1, parentId: null, name: 'Node 1' },
  { id: 2, parentId: 1, name: 'Node 1.1' },
  { id: 3, parentId: 1, name: 'Node 1.2' },
  { id: 4, parentId: 2, name: 'Node 1.1.1' }
]

let tree = buildTree(arrayData)
console.log(tree)

选择合适的方法取决于你的数据结构和树的定义。

持续学习总结记录中，回顾一下上面的内容：
将数组转成树状结构方法有哪些？
递归构建树
使用字典索引
使用递归和Map