扁平数据转tree与tree数据扁平化

简介: 有时我们拿到的数据的数据结构可能不是理想的,那么此时就要求前端程序员,具有改造数据的能力。例如拿到扁平的数据,但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中,这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构。总之就是说,提供数据的接口给到的数据,未必符合要求,而当我们又无法令他人为为我们改变时,需求和要求就来到了前端程序员这里,所以得具备这样的数据处理能力。

扁平数据转tree与tree数据扁平化

test()

}

function test () {

let flatList = [],
  treeList = [
    {
      id: 1,
      pid: null,
      label: '第一层',
      value: '1',
      children: [
        {
          id: 2,
          pid: 1,
          label: '第二层1',
          value: '2.1',
          children: []
        },
        {
          id: 3,
          pid: 1,
          label: '第二层2',
          value: '2.2',
          children: []
        },
        {
          id: 4,
          pid: 1,
          label: '第二层3',
          value: '2.3',
          children: [
            {
              id: 5,
              pid: 4,
              label: '第三层1',
              value: '3.1',
              children: []
            },
            {
              id: 6,
              pid: 4,
              label: '第三层2',
              value: '3.2',
              children: []
            },
          ]
        },
      ]
    }
  ]
console.log('原始 tree 数据:', JSON.parse(JSON.stringify(treeList)))

// 扁平化
console.log('tree =>flat,扁平化后:', treeToFlat(JSON.parse(JSON.stringify(treeList)), flatList))

// 反扁平化,SON.parse(JSON.stringify()) 为了实现深拷贝
console.log('flat =>tree,反扁平化后:', flatToTree(JSON.parse(JSON.stringify(flatList)), treeList))

}

/**

  • 扁平化:将具有层级递进关系结构的 tree 数据扁平化
  • @param treeList 有层级递进关系结构的 tree 数据
  • @param flatList 用于接收扁平化结果的变量
  • @returns {*} 返回扁平化结果

*/
function treeToFlat (treeList, flatList) {

// flatList.length > 9999 是考虑底线保护原则,出于极限保护的目的设置的,可不设或按需设置。
if (flatList.length > 9999) {
  return
}

treeList.map(e => {
  flatList.push(e)

  // 递归:有条件的自己调用自己,条件是 e.children.length 为真
  if (e.children && e.children.length) {
    treeToFlat(e.children, flatList)
  }
})

// console.log('扁平化后:', flatList)
return flatList

}

/**

  • 反扁平化:将扁平结构的 flat 数据转换为具有层级递进关系结构的 tree 数据
  • @param flatList 扁平结构的数据
  • @param treeList 用于接收反扁平化结果的变量
  • @returns {*} 返回反扁平化结果

*/
function flatToTree (flatList, treeList) {

flatList.map(e => {
  // 以 e.pid===null,作为判断是不是根节点的依据,或者直接写死根节点(如果确定的话),
  // 具体以什么作为判断根节点的依据,得看数据的设计规则,通常是判断层级或是否代表根节点的标记
  if (e.pid === null) {
    // 避免出现重复数据
    const index = treeList.findIndex(sub => sub.id === e.id)
    if (index === -1) {
      treeList.push(e)
    }
  }

  flatList.map(e2 => {
    if (e2.pid === e.id) {
      // 避免出现重复数据
      const index = e.children.findIndex(sub => sub.id === e2.id)
      if (index === -1) {
        e.children.push(e2)
      }
    }
  })
})

// console.log('反扁平化后:', treeList)
return treeList

}

相关文章
|
10月前
|
存储 算法
树(Tree) - 概念与基础
树(Tree) - 概念与基础
184 2
|
3月前
|
存储 关系型数据库 MySQL
为什么MySQL索引结构是B+tree ?
在MySQL中,为了提高检索效率和稳定性,采用了B+树作为索引的数据结构。相比二叉树或B树,B+树的非叶子节点仅存储key和指针,使得每页能容纳更多key,树的层级更浅,检索更快;所有数据集中在叶子节点,形成双向链表,利于区间查询。以16KB页为例,三层B+树可容纳约2190万条数据。
86 1
|
Web App开发 存储 算法
数据结构——树(tree)(1)
笔者看过很多的数据结构的课程和图书,市面上写的都良莠不齐,走了很多的弯路,所以笔者决定自己写下对数据结构的理解。在我的数据结构的文章或者说课程中,我将考研的常见题目和一些生活化的例子融入数据结构的课程中,尽量让你理解起来不困难,尽快学会这个知识点,在这只讨论数据结构,不讨论算法,请系好安全带,坐好了。
203 0
数据结构——树(tree)(1)
|
存储 数据库 索引
为什么索引底层用b+树不用b树
为什么索引底层用b+树不用b树
107 0
|
存储 算法 JavaScript
基础数据结构(五):树结构 Tree(TS版)
基础数据结构(五):树结构 Tree(TS版)
基础数据结构(五):树结构 Tree(TS版)
树状数据怎样扁平化处理?
树状数据怎样扁平化处理的方式
401 0
|
算法
数据结构和算法(树Tree)
树 概述: 树: 是一种经常用到的数据结构,用来模拟具有树状结构性质的数据集合。 树里的每一个节点有一个值和一个包含所有子节点的列表。从图的观点来看,树也可视为一个拥有N 个节点和N-1 条边的一个有向无环图。 二叉树: 是一种更为典型的树状结构。如它名字所描述的那样,二叉树是每个节点最多有两个子树的树结构,通常子树被称作“左子树”和“右子树”。 树的遍历 前序遍历 前序遍历首先访问根节点,然后遍历左子树,最后遍历右子树。 中序遍历 中序遍历是先遍历左子树,然后访问根节点,然后遍历右子树。 我们可以通过中序遍历得到一个递增的有序序列 后序遍历 后序遍历是先遍历左子树,然后遍历右子树,最后访
219 0
|
存储
数据结构(8)树形结构——B树、B+树(含完整建树过程)
8.1.B树 8.1.1.概述 B树存在的意义: 二叉树在存储数据时可能出现向一边倾斜导致查询效率降低的情况,为了防止二叉树的倾斜,出现了平衡二叉树,通过旋转的方式保证二叉树的平衡。但是就算是保持绝对的平衡,在面对要存储的数量量级够大的时候也会出现树的高度整体偏高的问题,树的高度过高,即使是使用了二分查找,依然会出现查找效率变低的情况。尤其是磁盘查找数据本身是个机械完成的动作,这一动作本身就十分耗时。因此需要一种能进行二分查找缩短查找时间,能存储大量数据后树高也不会过高的树形结构,这就是B树。
344 0