【JS】数组多层嵌套处理方法

• 原始数据

const data = [{
	"name": "test",
	"children": [{
			"name": "test1",
			"children": [{
				"name": "test11",
				"children": []
			}]
		},
		{
			"name": "test2",
			"children": [{
				"name": "test21",
				"children": [{
						"a": "test211",
						"b": "uin"
					},
					{
						"a": "test212",
						"b": "fied"
					},
				]
			}]
		},
		{
			"name": "test3",
			"children": [{
					"a": "test31",
					"b": "uin"
				},
				{
					"a": "test32",
					"b": "tkdg"
				},
			]
		}
	]
}]

一、过滤指定数据

• 原始数据处理完后的结构为：（只保留 b 为 uin 类型的数据）

const data = [{
	"name": "test",
	"children": [{
			"name": "test1",
			"children": [{
				"name": "test11",
				"children": []
			}]
		},
		{
			"name": "test2",
			"children": [{
				"name": "test21",
				"children": [{
						"a": "test211",
						"b": "uin"
					},
					//{
					//	"a": "test212",
					//	"b": "fied"
					//},
				]
			}]
		},
		{
			"name": "test3",
			"children": [{
					"a": "test31",
					"b": "uin"
				},
				//{
				//	"a": "test32",
			    //	"b": "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, 'b', 'uin')

//如果过滤条件为
     return data.filter(val => val[filterKey] === filterValue || val?.children && val.children.length);

//则得到的数据格式为
const data = [{
	"name": "test",
	"children": [
	  //{
	  //   	"name": "test1",
	  //	"children": [{
	  //	"name": "test11",
	  //	"children": []
	  //	}]
		},
		{
			"name": "test2",
			"children": [{
				"name": "test21",
				"children": [{
						"a": "test211",
						"b": "uin"
					},
					//{
					//	"a": "test212",
					//	"b": "fied"
					//},
				]
			}]
		},
		{
			"name": "test3",
			"children": [{
					"a": "test31",
					"b": "uin"
				},
			   //{
				//	"a": "test32",
			    //	"b": "tkdg"
				//},
			]
		}
	]
}]

二、提取指定数据（转换成新的数组输出）

• 原始数据处理完后的结构为：（把 b 这一层的数据提取出来形成一个新的数组）

[
	{
		"a": "test211",
		"b": "uin",
	},
	{
		"a": "test212",
		"b": "fied",
	},
	{
		"a": "test31",
		"b": "uin",
	},
	{
		"a": "test32",
		"b": "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, 'a')