JavaScript递归函数如何匹配上下级id和pid的数据(for…of,foreach.reduce)

 

目录

一、for...of 

二、forEach 

三、reduce 


递归函数是一种在编程中常用的方法,用于解决一些需要重复操作的问题。在JavaScript中,递归函数可以用来匹配上下级id和pid的数据结构,例如树形结构或者父子关系的数据。

一、for...of 

首先,让我们来定义一个简单的数据结构,包含id和pid属性,用于表示父子关系的数据:

const data = [
  { id: 1, pid: null },
  { id: 2, pid: 1 },
  { id: 3, pid: 1 },
  { id: 4, pid: 2 },
  { id: 5, pid: 3 },
  { id: 6, pid: 2 },
  { id: 7, pid: 3 },
  { id: 8, pid: 4 },
  { id: 9, pid: 4 },
];

接下来,我们将使用递归函数来匹配上下级id和pid的数据。首先,我们可以使用for of循环来实现这个递归函数:

function findChildren(id, data) {
  const result = [];

  for (const item of data) {
    if (item.pid === id) {
      const children = findChildren(item.id, data);
      if (children.length > 0) {
        item.children = children;
      }
      result.push(item);
    }
  }

  return result;
}

console.log(findChildren(null, data)); // 输出整个树形结构

二、forEach 

除了for of循环之外,我们还可以使用其他方法来实现匹配上下级id和pid的递归函数。例如,我们可以使用forEach方法来遍历数据并递归地调用自身来匹配子节点:

function findChildren(id, data) {
  const result = [];

  data.forEach(item => {
    if (item.pid === id) {
      const children = findChildren(item.id, data);
      if (children.length > 0) {
        item.children = children;
      }
      result.push(item);
    }
  });

  return result;
}

console.log(findChildren(null, data)); // 输出整个树形结构

在上面的代码中,我们使用forEach方法来遍历数据,并递归地调用findChildren函数来匹配子节点。当找到子节点时,我们将其添加到结果数组中,并继续递归地查找其子节点。

三、reduce 

另外,我们还可以使用reduce方法来实现匹配上下级id和pid的递归函数:

function findChildren(id, data) {
  return data.reduce((result, item) => {
    if (item.pid === id) {
      const children = findChildren(item.id, data);
      if (children.length > 0) {
        item.children = children;
      }
      result.push(item);
    }
    return result;
  }, []);
}

console.log(findChildren(null, data)); // 输出整个树形结构