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)); // 输出整个树形结构