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

news2024/9/22 20:40:44

 

目录

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1404554.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【网络安全 -> 防御与保护】专栏文章索引

为了方便 快速定位 和 便于文章间的相互引用等 作为一个快速准确的导航工具 网络安全——防御与保护 (一).信息安全概述

《移动通信原理与应用》——QAM调制解调仿真

目录 一、QAM调制与解调仿真流程图: 二、仿真结果: 三、Matlab仿真程序代码如下: 一、QAM调制与解调仿真流程图: QAM调制仿真流程图: QAM解调仿真流程图: 二、仿真结果: (1&…

20.云原生之GitLab CICD实战

云原生专栏大纲 文章目录 GitLab RunnerGitLab Runner 介绍Gitlab Runner工作流程 Gitlab集成Gitlab RunnerGitLab Runner 版本选择Gitlab Runner部署docker-compose方式安装kubesphere中可视化方式安装helm方式安装 配置gitlab-runner配置gitlab-ci.ymlgitlab-ci.yml 介绍编写…

OpenHarmony当前进展和未来趋势

操作系统自20世纪50年代诞生,经历了从专用操作系统到通用操作系统的转变。整体可以将操作系统的发展历史分为3个阶段:PC时代、移动互联网时代、万物互联时代。 PC时代主要以计算机为主,用户规模从1970年的10亿增长到1990年的30亿。这一时代诞…

TensorFlow框架(6)之RNN循环神经网络详解

1. RNN循环神经网络 1.1 结构 循环神经网络(recurrent neural network,RNN)源自于1982年由Saratha Sathasivam 提出的霍普菲尔德网络。RNN的主要用途是处理和预测序列数据。全连接的前馈神经网络和卷积神经网络模型中,网络结构都…

牛客周赛 Round 20 解题报告 | 珂学家 | 状压DP/矩阵幂优化 + 前缀和的前缀和

前言 整体评价 这场比赛很特别,是牛客周赛的第20场,后两题难度直线飙升了。 前四题相对简单,E题是道状压题,历来状压题都难,F题压轴难题了,感觉学到了不少。 A. 赝品 先求的最大值 然后统计非最大值的个…

2008年苏州大学837复试机试C/C++

2008年苏州大学复试机试 题目 编写程序充成以下功能: 一、从键盘上输入随机变量x的 10个取样点。X0,X1—X9 的值; 1、计算样本平均值 2、判定x是否为等差数列 3、用以下公式计算z的值(t0.63) 注。请对程序中必要地方进行注释 补充:个人觉得这个题目回忆…

【算法与数据结构】279、LeetCode完全平方数

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析:本题可以抽象成一个完全背包问题。完全平方数是物品,n为背包最大重量。本题和【算法与数据…

docker 安装手册

docker 安装手册 第一步卸载旧的docker (如果安装过Docker否则跳过此步) 以防万一最好执行一遍 yum -y remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 第二步,安装相关…

【开源】基于JAVA的人事管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 管理员功能模块2.2 普通员工功能模块2.3 答辩文案 三、系统展示四、核心代码4.1 查询职称4.2 新增留言回复4.3 工资申请4.4 工资审核4.5 员工请假 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的人…

12 个免费好用的图像压缩优化工具

想让您的网站以高质量的图片吸引人吗?但是您担心漂亮的图片会严重影响您的页面加载速度。不要再害怕,因为有工具可以免费解决这个问题。 在这篇文章中,我想为您提供免费的工具来优化您的网站图像。是的,你听到了!用于…

【车载开发系列】AutoSar当中的诊断会话控制

【车载开发系列】AutoSar当中的诊断会话控制 【车载开发系列】AutoSar当中的诊断会话控制 【车载开发系列】AutoSar当中的诊断会话控制一. 什么是诊断会话控制服务二. 会话模式分类三. 会话的接口1)获取当前会话状态2)设置会话状态3)返回默认…

linux文件系统 - 初始化(一)

linux文件系统 - 初始化(一) 术语表: struct task:进程 struct mnt_namespace:命名空间 struct mount:挂载点 struct vfsmount:挂载项 struct file:文件 struct super_block:超级块 stru…

Linux/Blunder

Enumeration nmap 扫描21,80端口,详细信息如下 80端口运行着 Apache,页面如下 在页面最下方可以看到 powered by egotisticalsw,在互联网搜索没发现什么与 渗透测试相关的东西 使用dirsearch对服务进行目录扫描,看看站点还有没有…

RPC和HTTP,它们之间到底啥关系

既然有 HTTP 请求,为什么还要用 RPC 调用? gPRC 为什么使用 HTTP/2 Spring Cloud 默认是微服务通过Restful API来进行互相调用各自微服务的方法,同时也支持集成第三方RPC框架(这里的说的RPC是特指在一个应用中调用另一个应用的接…

[前 10 名] 最佳 Android 数据恢复软件免费下载

您的职业生涯不可或缺的一部分是您的手机数据、文件和文档。如果您丢失数据,不仅会给您带来巨大损失,还会给您的公司带来巨大损失。然而,由于屏幕损坏、恢复出厂设置、软件更新等多种原因,您的 Android 设备上可能会发生数据丢失。…

首批!鸿蒙千帆起,生态全面启动

在近日举办的鸿蒙生态千帆启航仪式上,华为常务董事、终端BG CEO余承东表示,鸿蒙生态设备已经增至8亿 ,将打开万亿产业新蓝海。 在本次论坛上,华为宣布HarmonyOS NEXT鸿蒙星河版(开发者预览版)已面向开发者…

opencv#30 线性滤波

均值滤波原理 均值滤波步骤 Step1:求和。 Step2:计算平均值。 所谓均值滤波,就是求平均值的意思。我们假设在一个3*3的范围内有一个图像,其中这个图像每一个像素可能含有噪声,也可能不含噪声,我们是不知道的,因此通…

【CentOS】Linux 在线帮助文档命令:help、man 命令与文档汉化

目录 1、Linux 的命令行模式 2、help 命令 3、man 命令 4、man 命令输出文档汉化 注:本文档使用 Linux 版本为 CentOS 7.9 [swadianlocalhost ~]$ cat /etc/centos-release CentOS Linux release 7.9.2009 (Core) 1、Linux 的命令行模式 一般情况下&#xff0…

VUE中获取数据方式(axios)详细介绍

众所周知,我们现在大多采用前后端分离的模式来开发项目,前端项目个人采用vue做的比较多一点,既然是前端,那肯定只是负责渲染展示数据,那么问题来了,数据从哪里来?开发阶段大多数据采用mock做一些…