扁平化与树形处理-reduce的应用

最新推荐文章于 2024-04-30 19:36:25 发布

穿越到未来calc

最新推荐文章于 2024-04-30 19:36:25 发布

阅读量167

点赞数

分类专栏：冲冲冲文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_52179917/article/details/128656566

版权

冲冲冲专栏收录该内容

12 篇文章 0 订阅

订阅专栏

扁平化数组到树形数组

递归处理：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let data = [
      {
        id:2,
        name:'yuyu',
        pid:0,
      },
      {
        id:3,
        name:'yuyu',
        pid:2,
      },
      {
        id:4,
        name:'yuyu',
        pid:3,
      },
      {
        id:5,
        name:'yuyu',
        pid:4,
      },
    ]
    console.log(formatTree(data))

    //树形结构化
    function formatTree(data){
      let parent = data.filter(p => p.pid === 0)
      let children = data.filter(p => p.pid !== 0)

      dataTree(parent,children)
      return parent

      function dataTree(parent,children){
        parent.forEach(p => {
          children.forEach((c,i) => {
            if (p.id === c.pid) {
              let _c = JSON.parse(JSON.stringify(children))
              _c.splice(i,1)
              dataTree([c],_c)
              if(p.children){
                p.children.push(c)
              }else {
                p.children = [c]
              }
            }
          })
        });
      }
    }
  </script>
</body>
</html>

方法二不递归

 // 方法二 不递归
function formatTree2(data){
  return data.filter(p => {
    let children = data.filter(c => p.id === c.pid)
    children.length && (p.children = children)
    return p.pid === 0
  })
}

树形数组扁平化处理--以及reduce的其他用法-提取属性-整理属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let treeArr =[2,3,[1,2,3],[3,4,[5,6,[7,8,3]]]]

    // console.log('flat', treeArr.flat(Infinity))  
    // console.log('toString', treeArr.toString().split(',').map( x => x*1))  
    let treeData = [
      {
        id:1,
        name: 'yuyu',
        children:[
          {
            id:2,
            name:'y',
            children:[
              {
                id:4,
                name:'y',
                children:[
                  {
                    id:15,
                    name:'y',
                    children:[
                      {
                        id:6,
                        name:'y',
                        children:[
                          {
                            id:17,
                            name:'y',
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            id:3,
            name:'y'
          },
        ]
      }
    ]
  

    let flat = toFlat(treeData)
    // console.log(toFlat(treeData))

    // 扁平化
    function toFlat(tree){
      return tree.reduce(function(pre ,curr){
        pre.push({
          id: curr.id,
          name: curr.name,
          parentId: curr.parentId || '无'
        })

        if(curr.children){
          curr.children.forEach(c => {
            c.parentId = curr.id
            arguments.callee(pre,c)
          });
        }
        return pre
      },[])
    }

    // 提取id
    function flatId(flat){
      return flat.reduce((pre,curr)=>{
        pre['id is '+curr.id] = curr
        return pre
      },{})
    }
    
    // console.log('flatId(flat)', flatId(flat))

    // 整理属性
    function collateProperty(flat){
      return flat.reduce((pre,curr)=>{
        let i = pre.findIndex((value)=> value.name === curr.name)
        if(i>-1){
          pre[i].list.push(curr)
        }else{
          pre.push({
            name:curr.name,
            list:[curr]
          })
        }
        return pre
      },[])
    }

    console.log('collate(flat)', collateProperty(flat))

    
  
  </script>
</body>
</html>