数组转换成树形结构(array-to-tree)

200 阅读1分钟

日常开发中我们会接触到需要数据渲染的树形结构,当我们发起请求拿到的数据并不是完整的树形数据,那么就需要我们进行加工处理再使用。在我们拿到数据之后,需要把数组转化成树形结构,那么我就就可以使用以下的三种方法

一、递归

export function transArray(arr) {
  //  循环遍历
  var newArr = [] //  专门收集转化后的数组
  arr.forEach((item) => {
    //  1-先要找第一层
    if (item.parentId === parentId) {
      //  3-收集非一级
      var child = transArray2(arr, item.Id)
      if (child.length) {
        //  有长度表示可以收集到二级
        item.children = child
      }
      // 2-收集筛选出来的一级
      newArr.push(item)
    }
  })
  return newArr
}

二、下包 array-to-tree

import arrayToTree from 'array-to-tree'
export function transArray(arr) {
  return arrayToTree(arr, {
    parentProperty: 'parentId',
    customID: 'Id'
  })
}

三、循环

// 把平铺的数组数据转成树形结构
export function tranListToTreeData(list) {
  // 定义两个变量来
  const treeList = [] // 存储新数组
  const map = {} // 存储子数据

  list.forEach(item => {
    // 如果没有children这个属性,就添加这个属性
    if (!item.children) {
      item.children = []
    }
    // 把数据用对应的id存储起来
    // console.log(item)
    map[item.id] = item
  })

  // console.log(map)
  list.forEach(item => {
    // 如果有parentId就证明有父级,parentId就是父级的id,可以在map中通过id找到父级,并在父级中的children中添加子级
    if (item.parentId) {
      if (item.parentId === '-1') return
      // console.log(item.parentId)
      map[item.parentId].children.push(item)
    } else {
      // 如果没有parentId就证明是父级,就直接添加到treeList中
      treeList.push(item)
    }
  })
  return treeList
}