js获取树形结构父元素的方法

最新推荐文章于 2024-05-16 14:00:07 发布

原创最新推荐文章于 2024-05-16 14:00:07 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #reactjs #vue.js

react.js 同时被 3 个专栏收录

9 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

antd

5 篇文章

订阅专栏

本文介绍了一种在树形结构中通过递归遍历获取节点及其父节点的方法，利用JavaScript实现了一个示例，展示了如何构建树形数据结构，并通过递归函数获取指定节点的所有父节点。

在用一些树形结构组件的时候，经常需要获取使用一些方法获取父元素，方法如下：

const datasource = [
	{
		value:'a',
		children:[
			{
				value:'aa',
				children:[
						{
						value:'aaa',
						}
					]
			},
			{
				value:'ab'
			}
		]
	},
	{
		value:'b',
		children:[
			{
				value:'bb'
			},
		]
	},
]
const targetData = {};
function loops(data=[],parent){
	return data.map(({children,value})=>{
			const node = {
			value,
			parent
			}
			targetData[value]  = node;
			node.children = loops(children,node);
			return 
		})
}
function getNode(value){
	let node= [];
	let currentNode = targetData[value];
	node.push(currentNode.value);
	if(currentNode.parent){
		node= [...getNode(currentNode.parent.value),...node];
	}
	return node
}


loops(datasource )
//获取父节点
const target = getNode('aaa')
console.log(target)
//打印 ['a','aa','aaa']