0%

强大的 JSON.stringify

一次对树状数据的简单处理,一位大佬提供的方法,让我对 JSON.stringify 方法有了新的认识,开始我仅仅将它当做一个数据格式化成字符串的方法。

需求

处理以下树状数据,优雅的替换其中的 childrenerzi

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
let defaultData = [
{
name: '活动名称一',
description: '这个活动真好玩',
type: 'string',
required: 'false',
isShown: 'false',
},
{
name: '活动名称二',
description: '这个活动真好玩',
type: 'number',
required: 'false',
isShown: 'true',
children: [
{
name: '活动名称123',
description: '这个活动真好玩',
type: 'integer',
required: 'false',
isShown: 'false',
children: [
{
name: '活动名称456',
description: '这个活动真好玩',
type: 'boolean',
required: 'false',
isShown: 'false',
children: [
{
name: '活动名称789',
description: '这个活动真好玩',
type: 'object',
required: 'false',
},
],
},
],
},
],
},
];

解决方法

在群里问了一下,大家的答案五花八门的,挑几个厉害的

  1. 格式化成字符串,替换其中的字符
1
2
3
JSON.parse(
JSON.stringify(defaultData).replaceAll(',"children":[', ',"erzi":[')
);
  1. 写个方法递归处理,这儿就不写了(以后有时间再说)
  2. 优雅的使用 JSON.stringify() 特性处理。注意一下官方文档说明:JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性。
1
2
3
4
5
6
7
8
9
10
11
12
JSON.stringify(
defaultData,
(k, v) => {
if (v.children) {
const c = v.children;
v.erzi = c;
delete v.children;
}
return v;
},
2
);

当我看到第三种方法的时候,我直接我*三连,太强了,太优雅了,太满意了。

由此而来的衍生方法

删除树状数据中不需要的属性,比如 id

1
2
3
4
5
6
7
8
9
JSON.stringify(
defaultData,
(k, v) => {
delete v.id;
delete v.time;
return v;
},
2
);

对树状数据中的数据进行格式化

1
2
3
4
5
6
7
8
9
10
11
JSON.stringify(
defaultData,
(k, v) => {
if (v && v.isShown) {
const f = v.isShown ? 'true' : 'false';
v.isShown = f;
}
return v;
},
2
);

找到 name 为 123 的数并输出到数组中

1
2
3
4
5
6
7
8
9
10
11
let arr = [];
JSON.stringify(
defaultData,
(k, v) => {
if (v && v.name == 123) {
arr.push(v);
}
return v;
},
2
);

后记

最后我对树状数据的处理就是JSON.stringify一把梭,越用越香。

可能方法看上去就那样,挺简单?但是这个技巧在某些场合下,可以节省不少时间。反正我觉得挺 nb。

然后这位大佬在招人,我没敢去他家厂子,实在是失策了。太强了,实在是太强了。

PS: 进这个大佬厂子一年,有大佬带,进去一年顶普通厂子三年,想去的可以给我留言。