扁平数据转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

}

相关文章
|
8月前
|
存储 算法
树(Tree) - 概念与基础
树(Tree) - 概念与基础
145 2
|
1月前
|
存储 关系型数据库 MySQL
为什么MySQL索引结构是B+tree ?
在MySQL中,为了提高检索效率和稳定性,采用了B+树作为索引的数据结构。相比二叉树或B树,B+树的非叶子节点仅存储key和指针,使得每页能容纳更多key,树的层级更浅,检索更快;所有数据集中在叶子节点,形成双向链表,利于区间查询。以16KB页为例,三层B+树可容纳约2190万条数据。
36 1
|
7月前
|
存储 算法 编译器
|
存储 数据库 索引
为什么索引底层用b+树不用b树
为什么索引底层用b+树不用b树
94 0
|
存储 数据库 索引
B-Tree和B+Tree的区别及各自的优势
B-Tree和B+Tree的区别及各自的优势
507 0
|
8月前
|
存储 算法 Python
赢者树(Losers Tree)
赢者树(Losers Tree)是一种经典的数据结构,常用于外部排序(External Sorting)算法中,将多个有序的子序列合并成一个有序的序列。赢者树本质上是一棵完全二叉树,每个节点存储着一个子序列的最小值。每次合并操作时,比较各个子序列的最小值,选出最小值并将其存入输出序列中,同时将该最小值所在的节点从赢者树中删除,并将其对应的子序列的下一个元素作为新的最小值插入到赢者树中进行调整,直到所有子序列的元素都被合并完成。
92 3
|
存储 分布式数据库
树(Tree)和二叉树(Binary Tree)——(概念篇)
树(Tree)和二叉树(Binary Tree)——(概念篇)
84 0
|
JavaScript
js扁平数据转树形结构数据
js扁平数据转树形结构数据
100 0
|
算法
数据结构和算法(树Tree)
树 概述: 树: 是一种经常用到的数据结构,用来模拟具有树状结构性质的数据集合。 树里的每一个节点有一个值和一个包含所有子节点的列表。从图的观点来看,树也可视为一个拥有N 个节点和N-1 条边的一个有向无环图。 二叉树: 是一种更为典型的树状结构。如它名字所描述的那样,二叉树是每个节点最多有两个子树的树结构,通常子树被称作“左子树”和“右子树”。 树的遍历 前序遍历 前序遍历首先访问根节点,然后遍历左子树,最后遍历右子树。 中序遍历 中序遍历是先遍历左子树,然后访问根节点,然后遍历右子树。 我们可以通过中序遍历得到一个递增的有序序列 后序遍历 后序遍历是先遍历左子树,然后遍历右子树,最后访
205 0

热门文章

最新文章