扁平数据转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 代码解读
        
      
      

}