【常用方法】数组转树结构

 经常会用到数组转树结构的方法,今天仔细写了一下,记录一下

   // 定义对象
    var arrsObj=[
		{name:"一级标题1",id:1,parentId:0},
		{name:"二级标题2",id:2,parentId:1},
		{name:"三级标题1-1",id:3,parentId:2},
		{name:"二级标题1-2",id:4,parentId:2},
		{name:"三级标题2-1",id:5,parentId:3},
		{name:"三级标题2-2",id:6,parentId:4}
	]
	//递归调用函数
	function trans(parents,childs){
		// 循环父级数组
		parents.forEach((parent)=>{
			// 循环子集数组
			childs.forEach((child,index)=>{
				// 如果子的父id和当前父循环id相同执行
				if(child.parentId===parent.id){
					// 深拷贝一份子列表
					let tArrs = JSON.parse(JSON.stringify(childs))
					// 删除子列表中的当前节点
					tArrs.splice(index,1)
					// 递归调用当前函数
					trans([child],tArrs)
					// 子对象挂到父级下面(引用类型可以直接改传过来的对象)
					parent.childs?parent.childs.push(child):parent.childs = [child]
				}
			})
		})
	}
	//入口函数
	function transArrToTree(arrs){
		console.log(JSON.stringify(arrs))
		// 获取父级节点,一个或多个
		let parents = arrs.filter((ele)=>{
			return ele.parentId===0
		})
		
		// 获取除父级节点的所有节点
		let childsFirst = arrs.filter((ele)=>{
			return ele.parentId!==0
		})
		
		// 调用递归函数
		trans(parents,childsFirst)

		// 打印转化后的结果
        console.log(JSON.stringify(parents))
	}
	// 调用转化函数
	transArrToTree(arrsObj)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中,可以使用一些方法来将具有相同属性的组元素分成树形结构。 一种常用方法是使用reduce()函和递归。我们可以遍历组,根据组元素的某个属性来创建树形结构。首先,我们需要创建一个空对象作为树的根节点,然后使用reduce()函来迭代组元素。 在reduce()的回调函中,我们可以判断当前元素的属性是否已经在树中存在。如果不存在,我们就创建一个新的子节点,并将当前元素添加到子节点的组属性中。如果已经存在,我们就直接将当前元素添加到对应的子节点的组属性中。 在对组元素进行处理之后,我们可以通过递归调用自身来处理子节点的组属性。这样,我们就可以将具有相同属性的组元素分成树形结构。 以下是一个简单的示例代码: ```javascript function createTree(array, property) { return array.reduce((tree, element) => { const value = element[property]; const existingNode = tree.find(node => node[property] === value); if (existingNode) { existingNode.children.push(element); } else { tree.push({ [property]: value, children: [element] }); } return tree; }, []); } // 示例用法 const fruits = [ { name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'cherry', color: 'red' }, { name: 'pear', color: 'green' }, { name: 'mango', color: 'yellow' }, ]; const tree = createTree(fruits, 'color'); console.log(tree); ``` 以上示例根据水果组的颜色属性将其分成了树形结构。输出结果如下: ```javascript [ { color: 'red', children: [{ name: 'apple', color: 'red' }, { name: 'cherry', color: 'red' }] }, { color: 'yellow', children: [{ name: 'banana', color: 'yellow' }, { name: 'mango', color: 'yellow' }] }, { color: 'green', children: [{ name: 'pear', color: 'green' }] } ] ``` 这样我们就成功将具有相同颜色的水果分成了树形结构,方便进行进一步处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值