前端将List列表转化为树型结构(reduce函数)

2023-11-20

主要用到了reduce()函数

for循环可以做到的事情reduce()都可以做到,甚至操作起来更加简单方便和高雅。reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素

reduce语法:

array.reduce(function(pre, currentValue, currentIndex, arr), initialValue)

  1. recude函数接收两个参数,一个为回调函数,一个为初始赋值
  2. 第一个参数的回调函数又接收四个参数,分别为(初始值或计算结束后的返回值,当前元素,当前元素的索引,当前元素所属的数组对象)
  3. 第二个参数是传给函数的初始值,非必传

代码: 

test() {
 const list = [
        { id: 1, name: 'a' },
        { id: 11, name: 'aa', pid: 1 },
        { id: 12, name: 'aaa', pid: 1 },
        { id: 13, name: 'aaaa', pid: 1 },
        { id: 2, name: 'b' },
        { id: 22, name: 'bb', pid: 2 },
        { id: 23, name: 'bbb', pid: 2 },
        { id: 24, name: 'bbbb', pid: 2 },
        { id: 3, name: 'c' },
        { id: 31, name: 'cc', pid: 3 },
        { id: 32, name: 'ccc', pid: 3 },
        { id: 33, name: 'cccc', pid: 3 },
        { id: 111, name: 'a11', pid: 11 },
        { id: 112, name: 'aa11', pid: 11 },
        { id: 1121, name: 'aa112', pid: 112 }
      ];
//prev 是我们最终要生成的树型机构
//curr 为当前的数据
//i为索引
//arr为我们整个list
const result = list.reduce(function (prev, curr, i, arr) {
     curr.children = arr.filter((v) => v.pid === curr.id);
     if (!curr.pid) {
         prev.push(curr);
     }
     return prev;
}, []);
console.log('list', list);
console.log('tree', result);
},

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端将List列表转化为树型结构(reduce函数) 的相关文章

  • 在 onclick 事件上请求麦克风

    有一天 我偶然发现了这个 Javascript 录音机的例子 http webaudiodemos appspot com AudioRecorder index html http webaudiodemos appspot com Au
  • 循环遍历数组并删除项目,而不中断 for 循环

    我有以下 for 循环 当我使用splice 要删除一个项目 我发现 秒 未定义 我可以检查它是否未定义 但我觉得可能有一种更优雅的方法来做到这一点 我们的愿望是简单地删除一个项目并继续 for i 0 len Auction auctio
  • Chrome 扩展程序可以相互通信吗?

    我正在编写一个Chrome扩展程序 并且想要实现一个接口或api 以便我将来制作的其他扩展程序可以使用它 最终的效果可能如下 分机 B 呼叫extensionA someMethod someParameters 并向分机A发送一些数据 分
  • 在 JavaScript 函数中加载图像

    我有获取图像像素颜色的功能 function getImage imgsrc var img img src imgsrc var imageMap new Object img load function var canvas
  • 返回上一页

    我正在使用表格来 评价 页面 此表单将数据 发布 到其他地方的 php 脚本 我只是想在处理表单后显示一个链接 这将使用户返回到上一页 我可以在 php 脚本中使用 javascript 来执行此操作吗 GF 您可以使用链接来调用histo
  • 如何在 mongodb 聚合管道中使用 Javascript 对象?

    我有一个 JS 对象norm我想在 mongo 聚合管道中使用它 如下所示 var norm 1 1 2 1 16 3 1 413 4 1 622 5 1 6 6 1 753 7 3 001 8 2 818 9 3 291 10 2 824
  • jQuery 可以操作插入的元素吗?

    我是 jQuery 的新手 我认为 jQuery 可以操作由代码添加的元素是合理的 但我发现现在还不能 function addVideo click function publisher append div div
  • 角度垫排序不适用于带点表示法的 matColumnDef

    我正在尝试按列对表进行排序 当我必须过滤另一个结果中的结果时 就会出现问题 我尝试通过括号表示法和点表示法访问该属性 但没有给出结果 还将最终节点放置在 matColumnDef 中 但失败 因为有 2 列同名 table table
  • 如何将类型添加到 Vite 库构建中?

    我按照vite文档使用图书馆模式 https vitejs dev guide build html library mode我能够生成一个工作组件库 我创建了该项目vue ts预设 在我的组件中 我定义了道具及其类型 并使用了一些接口 但
  • 从对象中取出具有无效(NaN、空白等)值的键的最佳方法?

    我有一个供用户填写的简短搜索表单 将有多个搜索查询进入 MongoDB 该表单创建一个名为的变量searchParams可能看起来像这样 var searchParams city Springfield bedrooms 3 bathro
  • 如何在 JavaScript 中将变量的内容写入文件[重复]

    这个问题在这里已经有答案了 可能的重复 firefox 如何启用本地 JavaScript 来读取 写入我的 PC 上的文件 https stackoverflow com questions 2846045 firefox how to
  • 自调用函数未定义

    如果我声明一个函数文字 var x function alert hi console log x returns the function code However var x function alert hi console log
  • Riak 在 MapReduce 查询中失败。使用哪种配置?

    我正在与 riak riak js 结合开发一个 nodejs 应用程序 并遇到以下问题 运行此请求 db mapreduce add logs run 正确返回存储在存储桶日志中的所有 155 000 个项目及其 ID logs 1GXt
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • 如何在新窗口中打开图像或pdf文件?

    我有一个 gridview 它包含文件名和文件路径 图像和 pdf 格式文件 其中我使用了模板字段 在该字段下放置了 1 个图像按钮 单击该图像按钮 即 查看 按钮 时 我想在新窗口中打开所选文件 这是我的代码 protected void
  • 使 Bootstrap Popover 在悬停而不是单击时出现/消失

    我正在使用 Bootstrap 构建一个网站Popover http twitter github com bootstrap javascript html popovers我不知道如何使弹出窗口出现在悬停而不是单击时 我想做的就是当有人
  • 选择单选按钮时隐藏/显示 3 个文本框

    我有 2 个单选按钮 选择一个文本框时 我想显示 3 个文本框 并在选择其他文本框时隐藏它 这是代码 这是我的 2 个单选按钮
  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了
  • Chrome 调试器注入 javascript

    我有这样的好奇心 是否可以以某种方式在我的页面中注入 javascript 并执行它并调试它 正如您在控制台中所做的那样 但在控制台中您无法暂停并观察变量 是否可以调试我通过控制台输入的代码 为什么无法调试通过 XHR 接收的代码 Than
  • 为什么 try catch 块没有捕获 Promise 异常?

    我对承诺的错误处理感到困惑 答案可能很明显 但我不明白 我有以下示例代码 var test async function throw new Error Just another error try test then catch err

随机推荐

  • MySQL——基础50题

    MySql数据库50题 准备工作 参考答案 use PraticeSql create table SC SId varchar 10 CId varchar 10 score decimal 18 1 insert into SC val
  • Freertos 在contexM0芯片上的移植

    1 freertos源码 官网下载地址 https www freertos org 下载LTS长期支持版本 2 在工程目录下新建FreeRTOS文件夹 将FreeRTOS 的源码添加到这个文件夹中 portable 文件夹中只需要复制 k
  • shared_ptr使用场景、陷阱、性能分析,使用建议

    1 std shared ptr使用场景 include
  • 【leetcode】1.两数之和

    力扣原题传送门 https leetcode cn problems two sum 目录 题解 代码链接 题解 class Solution public vector
  • 隐藏通知内容什么意思_原来华为手机隐藏5个技巧,难怪别人都说华为好用,涨知识了...

    阅读本文前 请您先点击上面
  • Kinect开发学习笔记之(追加)深度距离误差分析

    由于最近要研究kinect采集到的深度信息的一些统计特征 所以必须先对kinect深度信息做进一步的了解 这些了解包括kinect的深度值精度 深度值的具体代表的距离是指哪个距离以及kinect深度和颜色扫描范围等 经过查找资料可以解决这些
  • 开启电脑ssl协议的方法

    转自 微点阅读 https www weidianyuedu com 电脑ssl协议怎么开启 开启ssl协议的方法是什么 经近期实际操作了解到开启ssl协议一共需要6个步骤 很快即可完成 以下是开启电脑ssl协议的方法介绍 1 首先打开浏览
  • html src 参数,HTTP参数解析

    本文概述 在本节中 我们将讨论各种HTTP参数及其语法 例如 日期和时间格式 字符集等 这些参数用于在编写客户端或服务器的HTTP程序时构造请求和响应消息 HTTP的各种参数如下 HTTP版本 为了指示协议的版本 HTTP使用 编号方案 协
  • 办公网络上网行为管理规划

    办公网络上网行为管理规划是确保办公网络资源的合理利用和保障网络安全的重要措施 下面是办公网络上网行为管理规划的一般性步骤和原则 确立政策和准则 制定明确的上网行为管理政策和准则 明确员工在办公网络上的合规要求和行为规范 包括规定员工上网内容
  • 项目设计:基于YOLO目标检测算法的安全帽/口罩/汽车/行人/交通标志...检测

    本文将详细介绍YOLO目标检测算法 该算法支持各种目标检测 包括 安全帽 汽车 造价 交通标志 等 其他毕业设计题目推荐参考 毕业设计 电子 通信 计算机 物联网专业毕业设计选题参考 嵌入式linux 单片机STM32 web 图像 htt
  • 数据库难点知识

    索引 当表中有大量记录时 若要对表进行查询 第一种搜索信息方式是全表搜索 是将所有记录一一取出 和查询条件进行一一对比 然后返回满足条件的记录 这样做会消耗大量数据库系统时间 并造成大量磁盘I O操作 第二种就是在表中建立索引 然后在索引中
  • matlab通用操作界面窗口包括哪些,matlab作业题

    第一章 MATLAB环境 1 MATLAB通用操作界面窗口包括哪些 命令窗口 历史命令窗口 当前目录窗口 工作空间窗口各有哪些功能 答 MATLAB通用操作界面窗口包括 命令窗口 历史命令窗口 当前目录浏览器窗口 工作空间窗口 变量编辑器窗
  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开
  • 使用Class.forName 自动完成注册驱动,简化代码 但是 “//” 是使用最多的

    方式1 public void connect05 throws IOException ClassNotFoundException SQLException 通过properties对象获取文件信息 Properties propert
  • Python爬虫突破封禁的6种常见方法

    在互联网上进行自动数据采集 抓取 这件事和互联网存在的时间差不多一样长 今天大众好像更倾向于用 网络数据采集 有时会把网络数据采集程序称为网络机器人 bots 最常用的方法是写一个自动化程序向网络服务器请求数据 通常是用 HTML 表单或其
  • select2 获取选中的值

    获取选中的名 var cardTypeW cardType option checked text 获取选中的值 写法1 var cardTypeW cardType option checked val 写法2 var cardTypeW
  • js逆向-某旗小说

    声明 本文仅供学习参考 请勿用于他途 违者后果自负 前言 笔者一直是一个小说控 喜欢看小说很多年了 自从学会了python后 就经常会去不同的小说网站抓取小说保存到本地阅读 最近发现一本很好看的小说 准备抓下来看 却发现有请求参数和返回的接
  • webpack的构建流程

    一 运行流程 webpack 的运行流程是一个串行的过程 它的工作流程就是将各个插件串联起来 在运行过程中会广播事件 插件只需要监听它所关心的事件 就能加入到这条webpack机制中 去改变webpack的运作 使得整个系统扩展性良好 从启
  • opencv生成棋盘格

    头文件 include
  • 前端将List列表转化为树型结构(reduce函数)

    主要用到了reduce 函数 for循环可以做到的事情reduce 都可以做到 甚至操作起来更加简单方便和高雅 reduce 为数组中的每一个元素依次执行回调函数 不包括数组中被删除或从未被赋值的元素 reduce语法 array redu