欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

一个树形的数据,已知多个id组成的数组(id分别是数据每一级的id)现要通过这个数组去找到对应的subMenus(题解)

程序员文章站 2022-12-01 19:08:22
前两天在项目中遇到一个问题,已解决。在这里分享并记录一下。 问题:一个树形的数据(如下),已知多个id组成的数组(id分别是数据每一级的id)。现要通过这个数组去找到对应的sub...

前两天在项目中遇到一个问题,已解决。在这里分享并记录一下。

问题:一个树形的数据(如下),已知多个id组成的数组(id分别是数据每一级的id)。现要通过这个数组去找到对应的subMenus

数据结构是这样:

const menuData = [
    {
      id:1,
      name:'百货商场',
      subMenus:[
        {
          id:11,
          name:'超市',
          subMenus:[
            {
              id:111,
              name:'厨房用品',
              subMenus:[
                {
                  id:1111,
                  name:'盐'
                },
                {
                  id:1112,
                  name:'醋'
                },
                {
                  id:1113,
                  name:'酱油'
                }
              ]
            }
          ]
        },
        {
          id:12,
          name:'服装店',
          subMenus:[
            {
              id:121,
              name:'女装',
            },
            {
              id:122,
              name:'男装',
              subMenus:[
                {
                  id:1221,
                  name:'春装',
                  subMenus:[
                    {
                      id:12111,
                      name:'上衣'
                    },
                    {
                      id:12112,
                      name:'裤子'
                    }
                  ]
                }
              ]
            },
            {
              id:123,
              name:'童装'
            }
          ]
        },
      ]
    },
    {
      id:2,
      name:'饭店',
      subMenus:[
        {
          id:21,
          name:'四川菜馆'
        },
        {
          id:22,
          name:'东北大锅炖'
        },
        {
          id:23,
          name:'山西面馆'
        }
      ]
    }
  ];

比如多个id组成的数组是这样子(你应该也看出来了,这些id也是一级一级的):

const parentIds = [1,12,122,1221];

然后现在想通过这组数组找到id为1221的subMenus,

解决方法如下:

function processFn(condition,target) {
    if(!target||!target.length||!condition||!condition.length){
      return;
    }
    let data = null;
    data = target.filter(e => e.id == condition[0])[0].subMenus;
    condition.shift();
    if(!condition.length) return data;
    return processFn(condition,data)
}

测试:

const subMenus = processFn(parentIds,menuData);
console.log(subMenus);   //[{id: 12111, name: "上衣"},{id: 12112, name: "裤子"}]

如上,很容易就取到了

可能会有人有疑问为什么要通过一个数组取,直接通过一个id去取对应的数据就好了啊,何必搞这么麻烦呢。这是针对我们的数据,因为我们的数据很庞大,所以可能会不同层级有id相同的情况(比如二级有id为 111,三级也有id为111,这种情况下,通过一个id就显得有点不足了,而使用数组就解决了这个问题)