0%

JS 遍历对象中的所有key,并转成数组

递归一个对象,拿到里面的key,并且按层次输出到数组中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 输入
let input = {
a: {
b: '123',
c: {
d: 456,
},
},
b: {
e: 789,
},
f: 222,
};

// 输出
let output = ['a.b', 'a.c.d', 'b.e', 'f'];

解决方法

一点也不高明的递归方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function deepTree(tree) {
let arr = [];
for (const key in tree) {
if (tree.hasOwnProperty.call(tree, key)) {
const element = tree[key];
if (Object.prototype.toString.call(element) == '[object Object]') {
deepTree(element).forEach((element) => {
arr.push(`${key}.${element}`);
});
} else {
arr.push(`${key}`);
}
}
}
return arr;
}

console.log(`deepTree(input)`, deepTree(input))

来自德巨的分享

群友分享了广度优先遍历和深度优先遍历

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
61
62
63
64
65
66
67
68
let input = {
a: {
b: "123",
c: {
d: 456,
},
},
b: {
e: 789,
},
f: 222,
};

// 后面的Flat方法很有意思
const recursive = (tree, domain) =>
Object.entries(tree)
.map(([key, value]) => [value, domain ? `${domain}.${key}` : key])
.map(([value, subDomain]) =>
typeof value === "object" ? recursive(value, subDomain) : subDomain
)
.flat();

// 深度优先
function depthFirst(tree) {
const stack = [[tree, ""]];
const res = [];
while (stack.length) {
const [crt, crtPath] = stack.pop();
if (typeof crt === "object") {
const entries = Object.entries(crt);
let i = entries.length;
while (i--) {
const [key, value] = entries[i];
const path = crtPath ? `${crtPath}.${key}` : key;
stack.push([value, path]);
}
} else {
res.push(crtPath);
}
}
return res;
}

// 广度优先
function widthFirst(tree) {
const queue = [[tree, ""]];
const res = [];
while (queue.length) {
const [crt, crtPath] = queue.shift();
if (typeof crt === "object") {
const entries = Object.entries(crt);
const last = entries.length - 1;
let i = -1;
while (i++ < last) {
const [key, value] = entries[i];
const path = crtPath ? `${crtPath}.${key}` : key;
queue.push([value, path]);
}
} else {
res.push(crtPath);
}
}
return res;
}

console.log(recursive(input));
console.log(depthFirst(input));
console.log(widthFirst(input));

广度优先遍历和深度优先遍历是啥我又忘了,得在复习一下