Document

# 前言工作中前后端都需要将一个扁平的数组转换为嵌套的树状结构的数组，今天一起来看一看前端如何使用递归的方式实现吧~

# 一、需求数组中某个对象的pid若与某个对象的id值相同，就将该项加到对应对象的children数组中。 ```js const data = [ { id: '01', name: '张大大', pid: '', job: '项目经理' }, { id: '02', name: '小亮', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老马', pid: '01', job: '技术leader' }, { id: '05', name: '老王', pid: '01', job: '测试leader' }, { id: '06', name: '老李', pid: '01', job: '运维leader' }, { id: '07', name: '小丽', pid: '02', job: '产品经理' }, { id: '08', name: '大光', pid: '02', job: '产品经理' }, { id: '09', name: '小高', pid: '03', job: 'UI设计师' }, { id: '10', name: '小刘', pid: '04', job: '前端工程师' }, { id: '11', name: '小华', pid: '04', job: '后端工程师' }, { id: '12', name: '小李', pid: '04', job: '后端工程师' }, { id: '13', name: '小赵', pid: '05', job: '测试工程师' }, { id: '14', name: '小强', pid: '05', job: '测试工程师' }, { id: '15', name: '小涛', pid: '06', job: '运维工程师' } ] ``` # 二、代码演示 ## 1、for循环实现这段代码参考了[灿尔哈擦苏](https://blog.csdn.net/susuzhe123/article/details/95353403)，感谢这位大佬~ 代码如下（示例）： ```html Document ``` ## 2、reduce()实现代码如下（示例）： ```html Document ``` 下边这个写法也能实现。 ```js function toTree(arr,parentId){ function loop(parentId) { return arr.reduce( (acc, cur) => (cur.pid === parId ? ((cur.children = loop(cur.id)), acc.push(cur)) : '', acc), [] ) } } ``` # 三、结果演示上面两个运行的最终结果都是一样的。 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/857c61217a03491f9e15cdee4af4c0b7~tplv-k3u1fbpfcp-zoom-1.image)

# 总结需求已实现，掰掰~