Toc
  1. 前言
  2. 数据源
  3. 扁平数据结构=>树形数据结构
  4. 树形数据结构=>扁平数据结构
Toc
0 results found
Utone
树形数据结构与扁平数据结构互转
2019/12/19 Code Javascript

前言

近日有需求做链路日志系统,从 elasticsearch 查询到的日志数据是扁平化结构,数据中包含层级关系的字段,前端按照层级展示。

所以需要对扁平数据做树形处理

数据源

  1. 下面是单条数据结构:

    {
         id: 1,
         pid: 0,
         name: '1/0'
    }
    • id 为不重复索引值
    • pid 为父级 id
  2. 下面简单构造一个扁平数据结构数据源

    let data = [
      { id: 1, pid: 0, name: '1/0' },
      { id: 2, pid: 1, name: '2/0' },
      { id: 0, pid: -1, name: '0/-1' },
      { id: 3, pid: 1, name: '3/1' },
      { id: 4, pid: 3, name: '4/3' },
      { id: 6, pid: 5, name: '6/5' },
      { id: 5, pid: 0, name: '5/0' },
      { id: 7, pid: 2, name: '7/2' }
    ]

扁平数据结构=>树形数据结构

对于下面的使用方法,是有一个 bug 的,那就是数据源的根父节点(最外层的父节点),必须在数据源的首个位置(索引为 0),所以在使用本方法时需要依据 id 做一次排序

// 先依据id做一次排序,确保根父节点,在数据源首位
data.sort((a, b) => a.id - b.id)

function flatToNested(data) {
  let temp = [],
    result = []

  for (let i = 0; i < data.length; i++) {
    // 将当前item塞入temp中(因为这一步,所以需要对数据源做排序)
    temp[data[i].id] = data[i]

    // 判断temp中有没有当前item的父类
    if (temp[data[i].pid]) {
      // 判断childrenn,不存在则赋值空数组
      if (!temp[[data[i].pid]]['children']) {
        temp[[data[i].pid]]['children'] = []
      }

      // 将当前item塞入父类children字段中
      temp[[data[i].pid]]['children'].push(data[i])
    } else {
      // 在temp中找不到父类,就将item塞入result中
      result.push(data[i])
    }
  }

  return result
}

flatToNested(data)

处理完的数据:

let data = [
  {
    id: 0,
    pid: -1,
    name: '0/-1',
    children: [
      {
        id: 1,
        pid: 0,
        name: '1/0',
        children: [
          {
            id: 2,
            pid: 1,
            name: '2/0',
            children: [
              {
                id: 7,
                pid: 2,
                name: '7/2'
              }
            ]
          },
          {
            id: 3,
            pid: 1,
            name: '3/1',
            children: [
              {
                id: 4,
                pid: 3,
                name: '4/3'
              }
            ]
          }
        ]
      },
      {
        id: 5,
        pid: 0,
        name: '5/0',
        children: [
          {
            id: 6,
            pid: 5,
            name: '6/5'
          }
        ]
      }
    ]
  }
]

树形数据结构=>扁平数据结构

目前的处理方法就是递归,因为不知道有多次层级,有新的想法请与我联系!

function NestedToFlat(data) {
  let result = []

  for (let i = 0; i < data.length; i++) {
    result.push({
      id: data[i]['id'],
      pid: data[i]['pid'],
      name: data[i]['name']
    })

    if (data[i]['children']) {
      result = result.concat(this.demo(data[i].children))
    }
  }

  return result
}
打赏
支付宝
微信
本文作者:Utone
版权声明:本文首发于Utone的博客,转载请注明出处!