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

主要用到了reduce（）函数

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

reduce语法：

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

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

代码：

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);
},

前端将List列表转化为树型结构（reduce函数）相关推荐

php删除树结构文件,树型结构列出目录中所有文件的php代码
以树型结构列出指定目录里的所有文件,这样的话,目录下的所有文件便结构清晰的呈现在你的面前,有什么文件你一看便知,很方便的哦. 示例, php; auto-links:false;"> ...
axure树形表格_Axure教程：可增删改的树型结构
原标题:Axure教程:可增删改的树型结构今天,教大家如何做一个树型结构,以及节点与节点之间相互交互的内容. 演示地址:http://b0bgsg.axshare.cn/#g=1&p=树一 ...
dtree和jquery构建树型结构
对于小型的树型应用来说,dtree是一个不错的选择. 先看一眼dtree给的例子构造静态树首先引入css文件和js文件 <link rel="StyleSheet" hr ...
【唠叨两句】如何将一张树型结构的Excel表格中的数据导入到多张数据库表中...
小弟昨天遇到一个相对比较棘手的问题,就像标题说的那样.如何将一张树型结构的Excel表格中的数据导入到多张数据库表中,在现实中实际是七张数据库表,这七张表之间有着有着相对比较复杂的主外键关系,对于我这 ...
EF架构~单表一对多集合的插入（树型结构）
单表一对多关系很常见,它是一种树形结构,如系统菜单表,部门表,分类表,这些都可以做成单表一对多关系,而这些表做成一对多关系后,如果通过EntityFramework进行插入操作时,会很方便,EF会自动 ...
C#实现树型结构TreeView节点拖拽的简单功能，附全部源码，供有需要的参考
为什么80%的码农都做不了架构师?>>> 应用软件是否好用就体现在一些细节操作上,开发人员是否考虑到了很多细节,例如一个树形结构的数据若不支持拖拽功能那用起来会很糟糕一些,用户 ...
go之树型结构深度理解补充
go之树型结构深度理解补充在上一篇中借用了 Ilija Eftimov 文章来讲解了tree的定义和一些方法.这篇文章主要是讲解在树型结构中如何判断节点与节点之间的关系. A节点是否是B节点的直接上 ...
Nestable 可移动拖拽的树型结构的使用(jQuery)
利用jQuery可以制作出很好的树型结构.这里介绍一款最近才找到使用的Nestable 可以拖动. 网页中的效果 http://dbushell.github.com/Nestable/ 具体详细介 ...
mysql 转成树_Mysql树型结构2种方式及相互转换
Mysql实现树型结构,数据库上常见有2种方式:领接表.预排序遍历树(MPTT). 领接表方式-- 主要依赖于一个 parent 字段,用于指向上级节点,将相邻的上下级节点连接起来,id 为自动递增自 ...

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

前端将List列表转化为树型结构（reduce函数）相关推荐

最新文章

热门文章