js把线形数据转换为树形数据

最新推荐文章于 2024-09-13 23:50:28 发布

古迪红尘

最新推荐文章于 2024-09-13 23:50:28 发布

阅读量304

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_57246351/article/details/120143049

版权

VUE 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

这段内容讲述了如何将源数据转换为树形结构，主要通过遍历原数组，利用id和pid创建对象映射，并将子项放入父项的children数组中。同时展示了如何通过对象的key获取值，以及在数组中查找特定id的方法。

摘要由CSDN通过智能技术生成


 function transTree(souceData) {
  const targetData = []
  // 树形结构生成

  // 核心思路：
  // 1. 先遍历原数组 以原数组中的每一项的id作为对象的key, 每一项本身作为对象的value形成一个对象结构(map)
  // 2. 遍历原数组 使用数组中的每一项的pid 去第一步形成的map结构去匹配key(id) 如果匹配上
  // 就把当前项放入找到节点的children属性中去  如果无法完成匹配 代表当前项就是最根上的父节点
  // 那就把当前项直接放到最终产出的targetData中去
  const map = {}
  souceData.forEach(item => {
    map[item.id] = item
    item.children = []
  })
  // 通过pid去匹配id
  souceData.forEach(item => {
    if (map[item.pid]) {
      // 匹配上
      map[item.pid].children.push(item)
    } else {
      // 没有匹配上
      targetData.push(item)
    }
  })
  // 返回的是处理之后的数组
  return targetData
}

知识点补充

<script>
  const map = {
    '1001': { id: '1001', name: '一级' },
    '1002': { id: '1001', name: '二级' },
    '1003': { id: '1001', name: '三级' },
  }

  let target = {
    id: '1002'
  }

  let target1 = {
    id: '10'
  }
  
  // 把对象的key拿出来组合成一个数组 通过数组查找判断方法
  const keys = Object.keys(map)
  console.log(keys)
  console.log(keys.includes(target.id))
  console.log(keys.includes(target1.id))

  // 取巧
  console.log(map[target.id])
  console.log(map[target1.id])
  if(map[target1.id]){
    console.log('找到了')
  }
</script>