处理树形结构数据

最新推荐文章于 2024-02-05 10:39:20 发布

原创最新推荐文章于 2024-02-05 10:39:20 发布 · 549 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

当后台返回线性数据时，需要将其转换为树形数据结构。核心思路是通过查找每个节点的pid与现有节点id的匹配，确定父子关系。遍历列表，用id作为key构建Map，然后再次遍历，用pid匹配Map中的key，将其添加到对应的children中。找不到匹配的pid则为一级节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题:

后台返回的是线性数据, 而我们前台需要的是一个树形数据结构, 此时就需要我们自己处理数据

核心思路就是寻找父节点

演示==> 寻找父节点演示

定义函数要明白做什么事, 当定义完函数后, 要接收一个什么样的参数最终需要产出的是什么样的值

1. 当前接收的是由后端返回的一个需要转换为树形数据的 '线性结构数据'

// 后端传给我们一个有问题的线性结构数据 需要我们处理成树形结构数据
function transTreeData(list) {
  const newList = []
  // 书写处理逻辑
  return newList
}

2. 根据后端返回的数据找规律, 梳理思路

如上所示 : 如果当前项的pid和某一项的id值相同就代表当前项是那一项的子节点

核心思路: 通过pid和id匹配如果匹配上了,代表就是它的子节点

具体实现:

遍历list中的每一项, 使用id字段作为key , 使用自身作为value,形成一个Map对象结构
再次遍历list的每一项, 使用它们的 pid , 去匹配Map结构中的key, 匹配上了证明是就是它的子节点, 添加到它的 children属性中
如果找不到,就证明它是一级节点

代码实现:

/**
 * @description: 树形数据处理
 * @param {*} list  线性平铺的数组
 * @return {*}  处理之后的属性数组
 */
export function transTreeData(list) {
  const newList = []
  // 书写处理逻辑
  // 核心思路：寻找父节点的过程  pid字段去匹配id字段 如果匹配上就是它的子节点
  // 具体实现：
  // 1. 遍历list中的每一项 使用id字段作为key,使用自身作为value形成一个map对象结构
  // 2. 遍历list中的每一项 使用它们的pid 去匹配map结构中的key
  //    如果匹配上 就是它的子节点 就添加到它的children属性中就可以了
  //    如果匹配不上 证明它自己就是最顶层的节点
  // 隐藏的点：由于js引用类型的存储特性 只需要遍历一次 寻找父节点结束 嵌套结构也就形成了
  const map = {}
  list.forEach((item) => {
    item.children = []
    map[item.id] = item
  })
  console.log('形成的map结构：', map)
  list.forEach((item) => {
    // { 1001:'123'}  { pid: 1001 }
    // 匹配上了
    if (map[item.pid]) {
      map[item.pid].children.push(item)
    } else {
      // 没匹配上
      newList.push(item)
    }
  })
  return newList
}