处理数组的方法有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); // 打印处理后的树形数据
递归的原理如下:
基本情况(终止条件):递归函数必须包含一个或多个基本情况,这些情况会导致递归停止并返回结果。没有终止条件,递归将无限地进行下去,导致堆栈溢出。
问题规模缩小:每次递归调用都应该使问题规模变得更小,接近基本情况。这样,通过多次递归调用,最终会达到基本情况。
自我调用:在递归函数内部,通过调用自身来解决较小规模的子问题。递归函数会将问题分解成相同类型的子问题,并通过不断调用自身来处理这些子问题。
逐步推进:递归调用应该逐步向基本情况靠近。每一次递归调用都应该让问题规模变得更小,直到达到基本情况,然后开始回溯。
回溯(合并结果):递归调用在达到基本情况后,开始回溯并合并结果。通过返回值、传递参数等方式,将递归调用的结果进行合并,最终得到最终的解。
当使用递归时,需要确保每次递归调用都接近基本情况,并且问题规模逐渐减小。否则,递归可能会导致堆栈溢出或无限循环。