数组改为树形结构,便于组件铺页面,封装函数思路流程

前提思路:

 

代码实现:

export function tranListToTreeData(list) {
  // 最终要产出的数组
  const treeList = []
  // 所有项都使用对象存储起来
  const map = {}
  list.forEach(item => {
    // 给每个对象添加一个children数组
    if (!item.children) {
      item.children = []
    }
    // map根据id存入每个对象
    map[item.id] = item
  })
  list.forEach(item => {
    const parent = map[item.pid]
    // 如果存在则表示item不是最顶层的数据
    if (parent) {
        // 这个if是防止意外,加上更好
      if (!parent.children) {
        parent.children = []
      }
        // 这应该都不懂,解释一下,可以把它理解为同一个地址,一处添加,所有都修改
      parent.children.push(item)
    } else {
      // 如果不存在 则是顶层数据
      treeList.push(item)
    }
  })
  // 返回出去
  return treeList
  // js复杂类型 存储的是内存的指针  一处修改 另外一处也会同步更新
}

给大家一个练习的小地址:https://chaichai-fe.github.io/show-tree/