递归删除树状数组
一、准备数据
首先我们规定一个 树状数组 ，就是我们做菜单时经常用的数据结构，如下：
let data = [{
label: '1',
type: 'MENU',
children: [{
id: '1-1',
type: 'MENU',
children: [{
id: '1-1-1',
type: 'MENU',
},
{
id: '1-1-2',
type: 'BUTTON'
}
]
},
{
id: '1-2',
type: 'MENU',
children: [{
id: '1-2-1',
type: 'BUTTON'
},
{
id: '1-2-2',
type: 'MENU'
}
]
},
]
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
如何只保留type为 'MENU' 的对象？
这里就需要用到 递归 了，因为我们不知道返回的菜单到底有几层，而递归能通过反复的 调用自身 实现数据的层层判断。那接下来就是，我们该如何过滤出数组中符合条件的内容呢？
答案就是用filter
该方法会创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
二、filter过滤
首先如果没有那么多层数据，只是单层数据，我们用filter过滤type为'MENU'的操作是怎么样的呢？
可以看下面这个例子：
let data = [
{
id: '1-1',
type: 'MENU',
},
{
id: '2-1',
type: 'BUTTON',
},
{
id: '3-1',
type: 'MENU',
},
]
let newData = data.filter((item) => item.type === 'MENU')
console.log(newData)
// [{ id: '1-1', type: 'MENU'},{id: '3-1',type: 'MENU'}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
三、filter结合递归实现过滤
既然我们能过滤单层数据，那多层数据结构就是不断的调用这个方法，直至到数组的最底层，实现起来就是这样：
function filter(data) {
let newData = data.filter((item) => {
return item.type === 'MENU'
})
newData.forEach(x => {
x.children && (x.children = filter(x.children))
});
return newData
}
console.log(filter(data))
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10