初始数据[数组转Tree]

let arr = [
  { id: 1, name: "小A", parent: 0 },
  { id: 2, name: "小B", parent: 0 },
  { id: 3, name: "小C", parent: 1 },
  { id: 4, name: "小D", parent: 3 },
  { id: 5, name: "小E", parent: 4 },
  { id: 6, name: "小F", parent: 2 },
  { id: 7, name: "小G", parent: 6 },
  { id: 8, name: "小H", parent: 7 },
  { id: 9, name: "小T", parent: 8 },
  { id: 10, name: "小X", parent: 4 },
]

1. 递归

function ArrayToTree (arr, parent = 0) {
      // 判断是否是数组 不是数组就返回 []
      if (!Array.isArray(arr) || !arr.length) return [];
      let newArr = []
      arr.forEach(item => {
        // 判断 当前item.pid 和 传入的pid 是否相等，相等就push 进去
        if (item.parent == parent) {
          const res = ArrayToTree(arr, item.id)
          if (res.length) {
            newArr.push({
              ...item,
              children: res
            })
          } else {
            newArr.push({
              ...item
            })
          }
        }
      })
      return newArr
    }

2.双重循环

function arrToTreeOne (arr, parent = 0) {
      if (!Array.isArray(arr) || !arr.length) return [];
      // 克隆一个新数组
      let copyArr = Object.assign([], arr)
      // 双重循环
      let newArr = copyArr.filter(item => {
        arr.forEach(v => {
          // 判断 id 和 pid 是否相同
          if (item.id === v.parent) {
            // 相同就判断有没有 children ， 有就push进去v 没有就 [v]
            if (item.children) {
              item.children.push(v)
            } else {
              item.children = [v]
            }
          }
        })

        if (item.parent == parent) return item
      })
      return newArr
    }

3.map

 function ArrAyToTreeMap (arr, parent = 0) {
      if (!Array.isArray(arr) || !arr.length) return [];
      let map = {}
      // 把map的key 是item.id value是item
      arr.forEach(item => map[item.id] = item)
      let res = []
      arr.forEach(item => {
        // item.parent 和 map的key 是否存在， 存在就 true 不存在就false
        let mapPid = map[item.parent]
        // 把parent顶级相等的插入进去
        if (item.parent == parent) {
          res.push(item)
        } else {
          if (mapPid) {
            // 存在就 判断 map的child 是否存在 ，不存在就赋值一个数组，在添加 item
            ((mapPid.child || (mapPid.child = [])).push(item))
          }
        }

      })
      return res;
    }

4.过滤器

 function arrToTreeArray (arr, parent = 0) {
      if (!Array.isArray(arr) || !arr.length) return [];
      // 克隆一个新数组
      let copyArr = arr.filter(item => {
        let children = arr.filter(v => item.id === v.parent)
        item.children = children.length > 0 ? item.children = children : []
        if (item.parent == parent) {
          return item
        }
      })
      return copyArr
    }

数组转Tree

function TreeToArray (tree) {
      // 判断 tree 是否有值，无返回 []
      if (!Array.isArray(tree) || !tree.length) return []
      let res = []
      tree.forEach(v => {
        const { children, ...v2 } = v
        // tree的每个元素都 放入到 res里面
        res.push(v2)
        if (v.children) {
          // 有children 就把 children数据递归 返回  依次放到 res里面
          res.push(...TreeToArray(v.children))
        }
      })
      return res
    }