【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')

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值