问答

树形数据扁平化成数组

作者:admin 2021-05-13 我要评论

有下面的树形数据结构,如何把所有的选中项层级扁平化,即扁平化成下面的结构: [{"name": "类目10-层级2类目100-层级3类目1000-层级4"}] 树形数据: [{ "checke...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

有下面的树形数据结构,如何把所有的选中项层级扁平化,即扁平化成下面的结构:

[
{"name": "类目10-层级2>类目100-层级3>类目1000-层级4"}
]

树形数据:

[{
      "checked": true,
      "childList": [{
          "id": 10,
          "level": 1,
          "name": "类目10-层级2",
          "pid": 1,
          "checked": true,
          "childList": [{
              "id": 100,
              "level": 3,
              "name": "类目100-层级3",
              "pid": 10,
              "checked": true,
              "childList": [{
                  "id": 1000,
                  "level": 4,
                  "name": "类目1000-层级4",
                  "pid": 100,
                  "checked": true,
                },
                {
                  "id": 1001,
                  "level": 4,
                  "name": "类目1001-层级4",
                  "pid": 100
                }
              ]
            },
            {
              "id": 101,
              "level": 3,
              "name": "类目101-层级3",
              "pid": 10,
              "childList": [{
                  "id": 1003,
                  "level": 4,
                  "name": "类目1003-层级4",
                  "pid": 101
                },
                {
                  "id": 1004,
                  "level": 4,
                  "name": "类目1004-层级4",
                  "pid": 101
                }
              ]
            }
          ]
        },
        {
          "id": 11,
          "level": 2,
          "name": "类目11-层级2",
          "pid": 1,
          "childList": [{
              "id": 200,
              "level": 3,
              "name": "类目200-层级3",
              "pid": 11,
              "childList": [{
                  "id": 2000,
                  "level": 4,
                  "name": "类目2000-层级4",
                  "pid": 200
                },
                {
                  "id": 2001,
                  "level": 4,
                  "name": "类目2001-层级4",
                  "pid": 200
                }
              ]
            },
            {
              "id": 201,
              "level": 3,
              "name": "类目201-层级3",
              "pid": 11,
              "childList": [{
                  "id": 2002,
                  "level": 4,
                  "name": "类目2002-层级4",
                  "pid": 201
                },
                {
                  "id": 2003,
                  "level": 4,
                  "name": "类目2003-层级4",
                  "pid": 201
                }
              ]
            }
          ]
        }
      ],
      "id": 1,
      "level": 1,
      "name": "类目1-层级1",
      "pid": ""
    },
    {
      "checked": false,
      "childList": [{
          "id": 50,
          "level": 1,
          "name": "类目50-层级2",
          "pid": 2,
          "childList": [{
              "id": 501,
              "level": 3,
              "name": "类目501-层级3",
              "pid": 50,
              "childList": [{
                  "id": 5001,
                  "level": 4,
                  "name": "类目5001-层级4",
                  "pid": 501
                },
                {
                  "id": 5002,
                  "level": 4,
                  "name": "类目5002-层级4",
                  "pid": 501
                }
              ]
            },
            {
              "id": 502,
              "level": 3,
              "name": "类目502-层级3",
              "pid": 50,
              "childList": [{
                  "id": 5003,
                  "level": 4,
                  "name": "类目5003-层级4",
                  "pid": 502
                },
                {
                  "id": 5004,
                  "level": 4,
                  "name": "类目5004-层级4",
                  "pid": 502
                }
              ]
            }
          ]
        },
        {
          "id": 60,
          "level": 2,
          "name": "类目60-层级2",
          "pid": 2,
          "childList": [{
              "id": 600,
              "level": 3,
              "name": "类目600-层级3",
              "pid": 60,
              "childList": [{
                  "id": 6000,
                  "level": 4,
                  "name": "类目6000-层级4",
                  "pid": 200
                },
                {
                  "id": 6001,
                  "level": 4,
                  "name": "类目6001-层级4",
                  "pid": 200
                }
              ]
            },
            {
              "id": 601,
              "level": 3,
              "name": "类目601-层级3",
              "pid": 13,
              "childList": [{
                  "id": 6002,
                  "level": 4,
                  "name": "类目6002-层级4",
                  "pid": 601
                },
                {
                  "id": 6003,
                  "level": 4,
                  "name": "类目6003-层级4",
                  "pid": 601
                }
              ]
            }
          ]
        }
      ],
      "id": 2,
      "level": 1,
      "name": "类目2-层级1",
      "pid": ""
    }
  ],
###
function flat(list) {
  function dfs(node, res=[], names=[]) {
    if(!node || !node.checked) return res;
    names.push(node.name);
    if(node.childList && node.childList.length) {
      node.childList.forEach(child => dfs(child,res,names))
    } else {
      res.push({name: names.join('>')});
    }
    names.pop();
    return res;
  }
  return list.reduce((res, item) => dfs(item, res), []);
}

这样?

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 树形数据扁平化成数组

    树形数据扁平化成数组

  • css 鼠标hover块元素的蒙层的时候能不

    css 鼠标hover块元素的蒙层的时候能不

  • electron如何让页面自动全屏

    electron如何让页面自动全屏

  • Ubuntu 18.04 编译openjdk8 失败

    Ubuntu 18.04 编译openjdk8 失败

腾讯云代理商
海外云服务器