web|JavaScript扁平数组结构转换成JSON树形结构、无限极、forEach、push、children javascript|前端|JavaScript

1、源数据
2、代码实现
3、函数调用

【web|JavaScript扁平数组结构转换成JSON树形结构、无限极、forEach、push、children】
1、源数据

let data = https://www.it610.com/article/[ { id: 5, parentId: 2, name:"目录1-1-1", }, { id: 1, parentId: 0, name: "目录1", }, { id: 13, parentId: 9, name: "目录2-2-3", }, { id: 3, parentId: 1, name: "目录1-2", }, { id: 2, parentId: 1, name: "目录1-1", }, { id: 12, parentId: 9, name: "目录2-2-2", }, { id: 4, parentId: 1, name: "目录1-3", }, { id: 7, parentId: 0, name: "目录2", }, { id: 9, parentId: 7, name: "目录2-2", }, { id: 6, parentId: 2, name: "目录1-1-2", }, { id: 11, parentId: 9, name: "目录2-2-1", }, { id: 8, parentId: 7, name: "目录2-1", }, { id: 10, parentId: 7, name: "目录2-3", }, ];

2、代码实现

// 数据处理 // 扁平数组结构转换成JSON树形结构 // 核心思想就是引用数据类型地址引用关系 function turnTree() { // map的作用是，使用源数据的id作为属性名 // 这样当通过item.parentId就可以获取到 // 父级对象了 // 然后把对应的项添加到父级对象的children里面 // result存储最终的结果 let map = {}, result = []; // 此处可以使用reduce实现 // 但是不容易理解 data.forEach(item => map[item.id] = item); data.forEach(item => { const parent = map[item.parentId]; if (parent) { // 如果有children则push数据到children中 // 如果没有就新建一个空的children数组 // 然后再push数据 parent.children = parent.children || []; parent.children.push(item); } else { // 在本例中 // else只会进入两次 // 也是最外层目录 result.push(item); } }); return result; }

3、函数调用