处理数组的方法有reduce和map,for,for of 及for each,这里使用的是reduce方法,如果想了解其他方法可以联系。
// 定义一个包含上下级关系的数据数组 const data = [ { id: 1, name: '节点1', pid: null }, { id: 2, name: '节点2', pid: 1 }, { id: 3, name: '节点3', pid: 1 }, { id: 4, name: '节点4', pid: 2 }, { id: 5, name: '节点5', pid: 2 }, { id: 6, name: '节点6', pid: 3 }, { id: 7, name: '节点7', pid: 3 }, ];
使用数组的 reduce
方法来迭代数据数组。在每次迭代中,我们检查当前节点的 pid
是否等于传入的 parentId
。如果相等,则说明当前节点是父节点,我们递归调用 buildTree
函数以获取其下一级子节点的子树。
如果当前节点存在子树(即有子节点),则将子树添加到当前节点的 children
属性中。最后,将当前节点添加到树中。
通过使用 reduce
方法,我们无需显式地编写循环,而是将迭代逻辑封装在函数内部,从而可以实现了简洁的代码,具体实现如下:
// 定义递归函数 function buildTree(data, parentId) { return data.reduce((tree, node) => { if (node.pid === parentId) { const children = buildTree(data, node.id); if (children.length > 0) { node.children = children; } tree.push(node); } return tree; }, []); } // 调用递归函数,传入数据数组和顶层父节点的pid(这里设为null) const result = buildTree(data, null); console.log(result); // 打印处理后的树形数据
递归的原理如下:
1.基本情况(终止条件):递归函数必须包含一个或多个基本情况,这些情况会导致递归停止并返回结果。没有终止条件,递归将无限地进行下去,导致堆栈溢出。
2.问题规模缩小:每次递归调用都应该使问题规模变得更小,接近基本情况。这样,通过多次递归调用,最终会达到基本情况。
3.自我调用:在递归函数内部,通过调用自身来解决较小规模的子问题。递归函数会将问题分解成相同类型的子问题,并通过不断调用自身来处理这些子问题。
4.逐步推进:递归调用应该逐步向基本情况靠近。每一次递归调用都应该让问题规模变得更小,直到达到基本情况,然后开始回溯。
5.回溯(合并结果):递归调用在达到基本情况后,开始回溯并合并结果。通过返回值、传递参数等方式,将递归调用的结果进行合并,最终得到最终的解。
当使用递归时,需要确保每次递归调用都接近基本情况,并且问题规模逐渐减小。否则,递归可能会导致堆栈溢出或无限循环。