【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 这一层的数据提取出来形成一个新的数组）

[
	{
		"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')