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

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

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

test()
AI 代码解读

}

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))
AI 代码解读

}

/**

  • 扁平化:将具有层级递进关系结构的 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
AI 代码解读

}

/**

  • 反扁平化:将扁平结构的 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
AI 代码解读

}

目录
打赏
0
相关文章
|
10月前
|
树(Tree) - 概念与基础
树(Tree) - 概念与基础
184 2
【霍罗维兹数据结构】树的基本概念 | 树的表示 | 二叉树 - BINARY TREES
【霍罗维兹数据结构】树的基本概念 | 树的表示 | 二叉树 - BINARY TREES
95 0
为什么MySQL索引结构是B+tree ?
在MySQL中,为了提高检索效率和稳定性,采用了B+树作为索引的数据结构。相比二叉树或B树,B+树的非叶子节点仅存储key和指针,使得每页能容纳更多key,树的层级更浅,检索更快;所有数据集中在叶子节点,形成双向链表,利于区间查询。以16KB页为例,三层B+树可容纳约2190万条数据。
86 1
为什么索引底层用b+树不用b树
为什么索引底层用b+树不用b树
107 0
|
10月前
|
赢者树(Losers Tree)
赢者树(Losers Tree)是一种经典的数据结构,常用于外部排序(External Sorting)算法中,将多个有序的子序列合并成一个有序的序列。赢者树本质上是一棵完全二叉树,每个节点存储着一个子序列的最小值。每次合并操作时,比较各个子序列的最小值,选出最小值并将其存入输出序列中,同时将该最小值所在的节点从赢者树中删除,并将其对应的子序列的下一个元素作为新的最小值插入到赢者树中进行调整,直到所有子序列的元素都被合并完成。
120 3
树(Tree)和二叉树(Binary Tree)——(概念篇)
树(Tree)和二叉树(Binary Tree)——(概念篇)
100 0
数据结构(8)树形结构——B树、B+树(含完整建树过程)
8.1.B树 8.1.1.概述 B树存在的意义: 二叉树在存储数据时可能出现向一边倾斜导致查询效率降低的情况,为了防止二叉树的倾斜,出现了平衡二叉树,通过旋转的方式保证二叉树的平衡。但是就算是保持绝对的平衡,在面对要存储的数量量级够大的时候也会出现树的高度整体偏高的问题,树的高度过高,即使是使用了二分查找,依然会出现查找效率变低的情况。尤其是磁盘查找数据本身是个机械完成的动作,这一动作本身就十分耗时。因此需要一种能进行二分查找缩短查找时间,能存储大量数据后树高也不会过高的树形结构,这就是B树。
344 0