【JS】处理多层嵌套的数据结构方法（工作常用）
介绍一些基本的递归使用方法，处理多层嵌套的数据结构，以便获取自己想要的数据
·
该文章会持续更新，一下子理太多理不过来，大家可以先收藏一下，避免日后找不到地址，或者错过最新更新
- 原始数据：
const data = [{
"category_name": "test",
"children": [{
"category_name": "test1",
"children": [{
"category_name": "test11",
"children": []
}]
},
{
"category_name": "test2",
"children": [{
"category_name": "test21",
"children": [{
"tag_name": "test211",
"tag_type": "uin"
},
{
"tag_name": "test212",
"tag_type": "fied"
},
]
}]
},
{
"category_name": "test3",
"children": [{
"tag_name": "test31",
"tag_type": "uin"
},
{
"tag_name": "test32",
"tag_type": "tkdg"
},
]
}
]
}]
一、过滤指定数据（不改变原有数据结构）
- 原始数据处理完后的结构为：（只保留 tag_type 为 uin 类型的数据）
[{
"category_name": "test",
"children": [{
"category_name": "test1",
"children": [{
"category_name": "test11",
"children": []
}]
},
{
"category_name": "test2",
"children": [{
"category_name": "test21",
"children": [{
"tag_name": "test211",
"tag_type": "uin"
},
// {
// "tag_name": "test212",
// "tag_type": "fied"
// },
]
}]
},
{
"category_name": "test3",
"children": [{
"tag_name": "test31",
"tag_type": "uin"
},
// {
// "tag_name": "test32",
// "tag_type": "tkdg"
// },
]
}
]
}]
- 处理函数封装及使用：
/*
children: 要递归处理的数据
filterKey: 指定过滤的属性
filterValue: 指定过滤的属性值
*/
function handleTagsTree(children, filterKey, filterValue) {
// 如果过滤的属性或属性值未指定时，直接返回原始数据
if (!filterKey || !filterValue) {
return children;
}
const data = [];
children.forEach((item) => {
// 如果存在 children 下一层，则递归遍历并赋值
if (item?.children && item?.children.length !== 0) {
item.children = handleTagsTree(item.children, filterKey, filterValue);
}
data.push(item);
});
// 添加过滤条件
return data.filter(val => val[filterKey] === filterValue || val?.children);
}
const processedData = handleTagsTree(data, 'tag_type', 'uin')
二、过滤指定数据（只保留有数据的结构）
- 原始数据处理完后的结构为：（只保留 tag_type 为 uin 类型的数据）
[{
"category_name": "test",
"children": [
// {
// "category_name": "test1",
// "children": [{
// "category_name": "test11",
// "children": []
// }]
//
},
{
"category_name": "test2",
"children": [{
"category_name": "test21",
"children": [{
"tag_name": "test211",
"tag_type": "uin"
},
// {
// "tag_name": "test212",
// "tag_type": "fied"
// },
]
}]
},
{
"category_name": "test3",
"children": [{
"tag_name": "test31",
"tag_type": "uin"
},
// {
// "tag_name": "test32",
// "tag_type": "tkdg"
// },
]
}
]
}]
- 处理函数封装及使用：
/*
children: 要递归处理的数据
filterKey: 指定过滤的属性
filterValue: 指定过滤的属性值
*/
function handleTagsTree(children, filterKey, filterValue) {
// 如果过滤的属性或属性值未指定时，直接返回原始数据
if (!filterKey || !filterValue) {
return children;
}
const data = [];
children.forEach((item) => {
// 如果存在 children 下一层，则递归遍历并赋值
if (item?.children && item?.children.length !== 0) {
item.children = handleTagsTree(item.children, filterKey, filterValue);
}
data.push(item);
});
// 添加过滤条件
return data.filter(val => val[filterKey] === filterValue || val?.children && val.children.length);
}
const processedData = handleTagsTree(data, 'tag_type', 'uin')
三、提取指定数据（转换成新的数组输出）
- 原始数据处理完后的结构为：（把 tag_type 这一层的数据提取出来形成一个新的数组）
[
{
"tag_name": "test211",
"tag_type": "uin",
},
{
"tag_name": "test212",
"tag_type": "fied",
},
{
"tag_name": "test31",
"tag_type": "uin",
},
{
"tag_name": "test32",
"tag_type": "tkdg",
},
]
- 处理函数封装及使用：
/*
children: 要递归处理的数据
filterKey: 指定该层级特有的属性
*/
function handleTagsTree(children, filterKey) {
if (!filterKey) {
return children;
}
let data = [];
children.forEach((item) => {
if (item?.children && item?.children.length !== 0) {
item = handleTagsTree(item.children, filterKey);
data = data.concat(item);
}
if (item.hasOwnProperty(filterKey)) {
data.push(item);
}
});
return data;
}
const processedData = handleTagsTree(data, 'tag_name')
四、剔除指定数据（不改变原有数据结构）
- 原始数据处理完后的结构为：（剔除 tag_type 为 uin 类型的数据）
[{
"category_name": "test",
"children": [{
"category_name": "test1",
"children": [{
"category_name": "test11",
"children": []
}]
},
{
"category_name": "test2",
"children": [{
"category_name": "test21",
"children": [
// {
// "tag_name": "test211",
// "tag_type": "uin"
// },
{
"tag_name": "test212",
"tag_type": "fied"
},
]
}]
},
{
"category_name": "test3",
"children": [
// {
// "tag_name": "test31",
// "tag_type": "uin"
// },
{
"tag_name": "test32",
"tag_type": "tkdg"
},
]
}
]
}]
- 处理函数封装及使用：
/*
children: 要递归处理的数据
filterKey: 指定过滤的属性
filterValue: 指定过滤的属性值
*/
function handleTagsTree(children, filterKey, filterValue) {
// 如果过滤的属性或属性值未指定时，直接返回原始数据
if (!filterKey || !filterValue) {
return children;
}
const data = [];
children.forEach((item) => {
// 如果存在 children 下一层，则递归遍历并赋值
if (item?.children && item?.children.length !== 0) {
item.children = handleTagsTree(item.children, filterKey, filterValue);
}
data.push(item);
});
// 添加过滤条件
return data.filter(val => val[filterKey] !== filterValue || val?.children && val.children.length);
}
const processedData = handleTagsTree(data, 'tag_type', 'uin')
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
3
0- 0
已为社区贡献5条内容
所有评论(0)