前两天在项目中遇到一个问题,已解决。在这里分享并记录一下。
问题:一个树形的数据(如下),已知多个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就显得有点不足了,而使用数组就解决了这个问题)
当然,如果你有更简单的方法,欢迎分享。有问题轻踩哈。求大神 多多指教啦!