前端---扁平数组转成树

很多时候后端给我们返回的数据并不是我们想要的，这个时候就需要我们进行处理，比如后端给我们返回了一个扁平数组，但是我们希望他呈现树形结构显示，这个时候就需要我们前端人员来对数据进行处理了

• 把平铺的数组结构转成树形结构
• [
• {id:"01", pid:"", "name":"老王" },
• {id:"02", pid:"01", "name":"小张" }
• ]
• 上面的结构说明： 老王是小张的上级 */

export function tranListToTreeData(arr) {
  // 最终要产出的树状数据的数组
  const newArr = []
  // 构建字典，能够快速根据id找到对象
  const map = {}

  // 建立一个映射关系：通过id快速找到对应的元素
  arr.forEach(item => {
    // 为了计算方便统一添加children
    item.children = []
    // 构建一个字典
    const key = item.id
    map[key] = item
  })
  // map:
  // {
  //   "312c": { 'id': '312c', 'pid': '',     'name': '财务部',    children: [{ 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}] },
  //   "312d": { 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}
  // }

  arr.forEach(item => {
    // 2.对于每一个元素来说，先找它的上级
    //    如果能找到，说明它有上级，则要把它添加到上级的children中去
    //    如果找不到，说明它没有上级，直接添加到 treeList
    const parent = map[item.pid]
    // 如果存在上级则表示item不是最顶层的数据
    if (parent) {
      parent.children.push(item)
    } else {
      // 如果不存在上级 则是顶层数据,直接添加
      newArr.push(item)
    }
  })
  // 返回出去
  return newArr
}
我们在需要处理数据的界面导入这个函数，并且把数据作为参数传进去即可
上面我们用的是非递归的方式进行的转换，下一篇文章中我们将用递归的方式对这个数据进行处理