# 数组扁平化✨
const arr = [1, [2, [3, 4]], 5, [6]];
1
# 方法👉
1、递归
const flatten = (arr) => {
let res = [];
arr.map(item => {
if(Array.isArray(item)) {
res = res.concat(flatten(item));
} else {
res.push(item);
}
});
return res;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
2、reduce
const flatten = (arr) => {
return arr.reduce((result, item)=> {
return result.concat(Array.isArray(item) ? flatten(item) : item);
}, []);
}
1
2
3
4
5
2
3
4
5
3、flat
const flatten = (arr) => {
return arr.flat(Infinity)
}
1
2
3
2
3
# 运行结果🎟
const result = flatten(arr);
console.log(result);
// 运行结果
[1, 2, 3, 4, 5, 6]
1
2
3
4
5
2
3
4
5
# 数组转树形结构✨
示例
const arr = [
{
name: '小明',
id: 1,
pid: 0,
},
{
name: '小花',
id: 11,
pid: 1,
},
{
name: '小华',
id: 111,
pid: 11,
},
{
name: '小李',
id: 112,
pid: 11,
},
{
name: '小红',
id: 12,
pid: 1,
},
{
name: '小王',
id: 2,
pid: 0,
},
{
name: '小林',
id: 21,
pid: 2,
},
{
name: '小李',
id: 22,
pid: 2,
}
]
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
32
33
34
35
36
37
38
39
40
41
42
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
32
33
34
35
36
37
38
39
40
41
42
# 方法👉
1、非递归
const arrayToTree = (arr) => {
let result = [];
if (!Array.isArray(arr) || arr.length === 0) {
return result
}
let map = {};
arr.forEach(item => map[item.id] = item);
arr.forEach(item => {
const parent = map[item.pid];
if(parent){
(parent.children || (parent.children=[])).push(item);
} else {
result.push(item);
}
})
return result
}
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
2、递归
const arrayToTree = (arr, pid) => {
let res = [];
arr.forEach(item => {
if(item.pid === pid){
let itemChildren = arrayToTree(arr,item.id);
if(itemChildren.length) {
item.children = itemChildren;
}
res.push(item);
}
});
return res;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 运行结果🎟
// const result = arrayToTree(arr);
const result = arrayToTree(arr, 0);
console.log(result);
// 运行结果
[
{
"name": "小明",
"id": 1,
"pid": 0,
"children": [
{
"name": "小花",
"id": 11,
"pid": 1,
"children": [
{
"name": "小华",
"id": 111,
"pid": 11
},
{
"name": "小李",
"id": 112,
"pid": 11
}
]
},
{
"name": "小红",
"id": 12,
"pid": 1
}
]
},
{
"name": "小王",
"id": 2,
"pid": 0,
"children": [
{
"name": "小林",
"id": 21,
"pid": 2
},
{
"name": "小李",
"id": 22,
"pid": 2
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# 树形结构转数组（扁平化）✨
示例
const tree = [
{
name: '小明',
id: 1,
pid: 0,
children: [
{
name: '小花',
id: 11,
pid: 1,
children: [
{
name: '小华',
id: 111,
pid: 11,
},
{
name: '小李',
id: 112,
pid: 11,
}
]
},
{
name: '小红',
id: 12,
pid: 1,
}
]
},
{
name: '小王',
id: 2,
pid: 0,
children: [
{
name: '小林',
id: 21,
pid: 2,
},
{
name: '小李',
id: 22,
pid: 2,
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 方法👉
1、深度优先遍历
const treeToArray = (tree) => {
let stack = tree,
result = [];
while(stack.length !== 0){
let pop = stack.pop();
result.push({
id: pop.id,
name: pop.name,
pid: pop.pid
})
let children = pop.children
if(children){
for(let i = children.length-1; i >=0; i--){
stack.push(children[i])
}
}
}
return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2、广度优先遍历
const treeToArray = (tree) => {
let queue = tree,
result = [];
while(queue.length !== 0){
let shift = queue.shift();
result.push({
id: shift.id,
name: shift.name,
pid: shift.pid
})
let children = shift.children
if(children){
for(let i = 0; i < children.length; i++){
queue.push(children[i])
}
}
}
return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3、不用考虑除children外的其他属性
const treeToArray = (source)=>{
let res = []
source.forEach(item=>{
res.push(item)
item.children && res.push(...treeToArray(item.children))
})
return res.map((item) => {
if (item.children) {
delete item.children
}
return item
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 运行结果🎟
const result = treeToArray(tree);
console.log(result);
// 运行结果
[
{
"name": "小明",
"id": 1,
"pid": 0
},
{
"name": "小花",
"id": 11,
"pid": 1
},
{
"name": "小华",
"id": 111,
"pid": 11
},
{
"name": "小李",
"id": 112,
"pid": 11
},
{
"name": "小红",
"id": 12,
"pid": 1
},
{
"name": "小王",
"id": 2,
"pid": 0
},
{
"name": "小林",
"id": 21,
"pid": 2
},
{
"name": "小李",
"id": 22,
"pid": 2
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# 树筛选，保留符合条件的数据并返回树结构✨
示例
const tree = [
{
name: '小明',
id: 1,
pid: 0,
show: true,
children: [
{
name: '小花',
id: 11,
pid: 1,
show: true,
children: [
{
name: '小华',
id: 111,
pid: 11,
},
{
name: '小李',
id: 112,
pid: 11,
show: true,
}
]
},
{
name: '小红',
id: 12,
pid: 1,
}
]
},
{
name: '小王',
id: 2,
pid: 0,
show: true,
children: [
{
name: '小林',
id: 21,
pid: 2,
},
{
name: '小李',
id: 22,
pid: 2,
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# 方法👉
筛选出show为true数据
const filterTreeByFunc = (tree, func) => {
if (!Array.isArray(tree) || tree.length === 0) {
return []
}
return tree.filter(item => {
item.children = item.children && filterTreeByFunc(item.children, func)
return func(item) || (item.children && item.children.length)
})
}
const func = (item) => {
return item.show === true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 运行结果🎟
const result = filterTreeByFunc(tree, func);
console.log(result);
// 运行结果
[
{
"name": "小明",
"id": 1,
"pid": 0,
"show": true,
"children": [
{
"name": "小花",
"id": 11,
"pid": 1,
"show": true,
"children": [
{
"name": "小李",
"id": 112,
"pid": 11,
"show": true
}
]
}
]
},
{
"name": "小王",
"id": 2,
"pid": 0,
"show": true,
"children": []
}
]
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
32
33
34
35
36
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
32
33
34
35
36
# 查找某一节点在树中路径✨
示例
const tree = [
{
name: '小明',
id: 1,
pid: 0,
children: [
{
name: '小花',
id: 11,
pid: 1,
children: [
{
name: '小华',
id: 111,
pid: 11,
},
{
name: '小李',
id: 112,
pid: 11,
}
]
},
{
name: '小红',
id: 12,
pid: 1,
}
]
},
{
name: '小王',
id: 2,
pid: 0,
children: [
{
name: '小林',
id: 21,
pid: 2,
},
{
name: '小李',
id: 22,
pid: 2,
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 方法👉
const getNodePath = (tree, id) => {
if (!Array.isArray(tree) || tree.length === 0) {
return []
}
const path = []
const treeFindPath = (tree, id, path) => {
for (const item of tree) {
path.push(item.id);
if (item.id === id) {
return path
}
if (item.children) {
const findChildren = treeFindPath(item.children,id, path);
if (findChildren.length) {
return findChildren;
}
}
path.pop();
}
return [];
}
return treeFindPath(tree, id, path)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 运行结果🎟
const result = getNodePath(tree, 112);
console.log(result);
// 运行结果
[1, 11, 112]
1
2
3
4
5
6
2
3
4
5
6
# 模糊查询树✨
示例
const tree = [
{
name: '小明前端专家',
id: 1,
pid: 0,
children: [
{
name: '小花前端程序媛',
id: 11,
pid: 1,
children: [
{
name: '小华划水运动员',
id: 111,
pid: 11,
},
{
name: '小李摸鱼运动员',
id: 112,
pid: 11,
}
]
},
{
name: '小红摸鱼程序员',
id: 12,
pid: 1,
}
]
},
{
name: '小王内卷王',
id: 2,
pid: 0,
children: [
{
name: '小林摸鱼王',
id: 21,
pid: 2,
},
{
name: '小李后端程序员',
id: 22,
pid: 2,
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 方法👉
const fuzzyQueryTree = (arr, value) => {
if (!Array.isArray(arr) || arr.length === 0) {
return []
}
let result = [];
arr.forEach(item => {
if (item.name.indexOf(value) > -1) {
const children = fuzzyQueryTree(item.children, value);
const obj = { ...item, children }
result.push(obj);
} else {
if (item.children && item.children.length > 0) {
const children = fuzzyQueryTree(item.children, value);
const obj = { ...item, children }
if (children && children.length > 0) {
result.push(obj);
}
}
}
});
return result;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 运行结果🎟
const result = fuzzyQueryTree(tree,'程序');
console.log(result);
// 运行结果
[
{
"name": "小明前端专家",
"id": 1,
"pid": 0,
"children": [
{
"name": "小花前端程序媛",
"id": 11,
"pid": 1,
"children": []
},
{
"name": "小红摸鱼程序员",
"id": 12,
"pid": 1,
"children": []
}
]
},
{
"name": "小王内卷王",
"id": 2,
"pid": 0,
"children": [
{
"name": "小李后端程序员",
"id": 22,
"pid": 2,
"children": []
}
]
}
]
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
32
33
34
35
36
37
38
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
32
33
34
35
36
37
38
# 树节点添加属性✨
示例
const tree = [
{
name: '小明',
id: 1,
pid: 0,
children: [
{
name: '小花',
id: 11,
pid: 1,
children: [
{
name: '小华',
id: 111,
pid: 11,
},
{
name: '小李',
id: 112,
pid: 11,
}
]
},
{
name: '小红',
id: 12,
pid: 1,
}
]
},
{
name: '小王',
id: 2,
pid: 0,
children: [
{
name: '小林',
id: 21,
pid: 2,
},
{
name: '小李',
id: 22,
pid: 2,
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 方法👉
const addAttrToNodes = (tree) => {
tree.forEach((item) => {
item.title = '新生代农民工'
if (item.children && item.children.length > 0) {
addAttrToNodes(item.children)
}
})
return tree
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 运行结果🎟
const result = addAttrToNodes(tree);
console.log(result);
// 运行结果
[
{
"name": "小明",
"id": 1,
"pid": 0,
"children": [
{
"name": "小花",
"id": 11,
"pid": 1,
"children": [
{
"name": "小华",
"id": 111,
"pid": 11,
"title": "新生代农民工"
},
{
"name": "小李",
"id": 112,
"pid": 11,
"title": "新生代农民工"
}
],
"title": "新生代农民工"
},
{
"name": "小红",
"id": 12,
"pid": 1,
"title": "新生代农民工"
}
],
"title": "新生代农民工"
},
{
"name": "小王",
"id": 2,
"pid": 0,
"children": [
{
"name": "小林",
"id": 21,
"pid": 2,
"title": "新生代农民工"
},
{
"name": "小李",
"id": 22,
"pid": 2,
"title": "新生代农民工"
}
],
"title": "新生代农民工"
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# 树节点删除属性✨
示例
const tree = [
{
name: '小明',
id: 1,
pid: 0,
children: [
{
name: '小花',
id: 11,
pid: 1,
children: [
{
name: '小华',
id: 111,
pid: 11,
},
{
name: '小李',
id: 112,
pid: 11,
}
]
},
{
name: '小红',
id: 12,
pid: 1,
}
]
},
{
name: '小王',
id: 2,
pid: 0,
children: [
{
name: '小林',
id: 21,
pid: 2,
},
{
name: '小李',
id: 22,
pid: 2,
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 方法👉
const removeAttrFromNode = (tree) => {
tree.forEach((item) => {
delete item.title
if (item.children && item.children.length > 0) {
removeAttrFromNode(item.children)
}
})
return tree
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 运行结果🎟
const result = removeAttrFromNode(tree);
console.log(result);
// 运行结果
[
{
"name": "小明",
"id": 1,
"pid": 0,
"children": [
{
"name": "小花",
"id": 11,
"pid": 1,
"children": [
{
"name": "小华",
"id": 111,
"pid": 11
},
{
"name": "小李",
"id": 112,
"pid": 11
}
]
},
{
"name": "小红",
"id": 12,
"pid": 1
}
]
},
{
"name": "小王",
"id": 2,
"pid": 0,
"children": [
{
"name": "小林",
"id": 21,
"pid": 2
},
{
"name": "小李",
"id": 22,
"pid": 2
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# 删除树中的空children✨
示例
const tree = [
{
name: '小明',
id: 1,
pid: 0,
children: [
{
name: '小花',
id: 11,
pid: 1,
children: [
{
name: '小华',
id: 111,
pid: 11,
},
{
name: '小李',
id: 112,
pid: 11,
children: []
}
]
},
{
name: '小红',
id: 12,
pid: 1,
children: []
}
]
},
{
name: '小王',
id: 2,
pid: 0,
children: [
{
name: '小林',
id: 21,
pid: 2,
},
{
name: '小李',
id: 22,
pid: 2,
children: []
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# 方法👉
const removeEmptyChildren = (tree) => {
tree.forEach((item) => {
if (item.children && item.children.length ===0) {
delete item.children
} else if (item.children && item.children.length > 0) {
removeEmptyChildren(item.children)
}
})
return tree
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 运行结果🎟
const result = removeEmptyChildren(tree);
console.log(result);
// 运行结果
[
{
"name": "小明",
"id": 1,
"pid": 0,
"children": [
{
"name": "小花",
"id": 11,
"pid": 1,
"children": [
{
"name": "小华",
"id": 111,
"pid": 11
},
{
"name": "小李",
"id": 112,
"pid": 11
}
]
},
{
"name": "小红",
"id": 12,
"pid": 1
}
]
},
{
"name": "小王",
"id": 2,
"pid": 0,
"children": [
{
"name": "小林",
"id": 21,
"pid": 2
},
{
"name": "小李",
"id": 22,
"pid": 2
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# 获取树中所有的叶子节点✨
示例
const tree = [
{
name: '小明',
id: 1,
pid: 0,
children: [
{
name: '小花',
id: 11,
pid: 1,
children: [
{
name: '小华',
id: 111,
pid: 11,
},
{
name: '小李',
id: 112,
pid: 11,
}
]
},
{
name: '小红',
id: 12,
pid: 1,
}
]
},
{
name: '小王',
id: 2,
pid: 0,
children: [
{
name: '小林',
id: 21,
pid: 2,
},
{
name: '小李',
id: 22,
pid: 2,
}
]
}
]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 方法👉
const getAllLeaf = (tree) => {
const result = []
const getLeaf = (tree) => {
tree.forEach((item) => {
if (!item.children) {
result.push(item)
} else {
getLeaf(item.children)
}
})
}
getLeaf(tree)
return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 运行结果🎟
const result = getAllLeaf(tree);
console.log(result);
// 运行结果
[
{
"name": "小华",
"id": 111,
"pid": 11
},
{
"name": "小李",
"id": 112,
"pid": 11
},
{
"name": "小红",
"id": 12,
"pid": 1
},
{
"name": "小林",
"id": 21,
"pid": 2
},
{
"name": "小李",
"id": 22,
"pid": 2
}
]
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
