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

这段内容讲述了如何将源数据转换为树形结构,主要通过遍历原数组,利用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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值