【javascript】基于JS ，数组处理转换成 树形结构数组
【javascript】基于JS ，数组处理转换成 树形结构数组
用户11865655
发布于 2025-10-13 17:01:44
发布于 2025-10-13 17:01:44
代码可运行
运行总次数：0
代码可运行
1. 将数据列表转换为树形结构
这是数据库的字段
- 可以分析得出 parent_id 对应是是当前项的父类id，也就是一行元素的id值
经过查询后，获得的数据结构：
[
{
"parentId": 0,
"id": 1,
"code": "001",
"name": "成品"
},
{
"parentId": 1,
"id": 3,
"code": "0011",
"name": "燃油车"
},
{
"parentId": 2,
"id": 4,
"code": "0021",
"name": "发动机"
},
{
"parentId": 2,
"id": 5,
"code": "0022",
"name": "变速箱"
},
{
"parentId": 1,
"id": 6,
"code": "0012",
"name": "新能源车"
},
{
"parentId": 2,
"id": 7,
"code": "0023",
"name": "轮胎"
},
{
"parentId": 2,
"id": 8,
"code": "0024",
"name": "电池"
},
{
"parentId": 2,
"id": 9,
"code": "0025",
"name": "车身"
},
{
"parentId": 2,
"id": 10,
"code": "0026",
"name": "底盘"
},
{
"parentId": 2,
"id": 11,
"code": "0027",
"name": "前大灯"
},
{
"parentId": 2,
"id": 12,
"code": "0028",
"name": "转向灯"
},
{
"parentId": 2,
"id": 13,
"code": "0029",
"name": "刹车灯"
},
{
"parentId": 2,
"id": 14,
"code": "0030",
"name": "空调系统"
},
{
"parentId": 2,
"id": 15,
"code": "0031",
"name": "车座椅"
},
{
"parentId": 0,
"id": 27,
"code": "002",
"name": "零件"
},
{
"parentId": 27,
"id": 28,
"code": "021",
"name": "发动机"
},
{
"parentId": 27,
"id": 29,
"code": "022",
"name": "变速箱"
},
{
"parentId": 27,
"id": 30,
"code": "023",
"name": "轮胎"
},
{
"parentId": 27,
"id": 31,
"code": "024",
"name": "电池"
},
{
"parentId": 27,
"id": 32,
"code": "025",
"name": "底盘"
},
{
"parentId": 27,
"id": 33,
"code": "026",
"name": "大灯"
},
{
"parentId": 27,
"id": 34,
"code": "027",
"name": "空调"
},
{
"parentId": 27,
"id": 35,
"code": "028",
"name": "座椅"
}
]2.1 存储数据
let oList = [
{
"parentId": 0,
"id": 1,
"code": "001",
"name": "成品"
},
{
"parentId": 1,
"id": 3,
"code": "0011",
"name": "燃油车"
},
{
"parentId": 2,
"id": 4,
"code": "0021",
"name": "发动机"
},
{
"parentId": 2,
"id": 5,
"code": "0022",
"name": "变速箱"
},
{
"parentId": 1,
"id": 6,
"code": "0012",
"name": "新能源车"
},
{
"parentId": 2,
"id": 7,
"code": "0023",
"name": "轮胎"
},
{
"parentId": 2,
"id": 8,
"code": "0024",
"name": "电池"
},
{
"parentId": 2,
"id": 9,
"code": "0025",
"name": "车身"
},
{
"parentId": 2,
"id": 10,
"code": "0026",
"name": "底盘"
},
{
"parentId": 2,
"id": 11,
"code": "0027",
"name": "前大灯"
},
{
"parentId": 2,
"id": 12,
"code": "0028",
"name": "转向灯"
},
{
"parentId": 2,
"id": 13,
"code": "0029",
"name": "刹车灯"
},
{
"parentId": 2,
"id": 14,
"code": "0030",
"name": "空调系统"
},
{
"parentId": 2,
"id": 15,
"code": "0031",
"name": "车座椅"
},
{
"parentId": 0,
"id": 27,
"code": "002",
"name": "零件"
},
{
"parentId": 27,
"id": 28,
"code": "021",
"name": "发动机"
},
{
"parentId": 27,
"id": 29,
"code": "022",
"name": "变速箱"
},
{
"parentId": 27,
"id": 30,
"code": "023",
"name": "轮胎"
},
{
"parentId": 27,
"id": 31,
"code": "024",
"name": "电池"
},
{
"parentId": 27,
"id": 32,
"code": "025",
"name": "底盘"
},
{
"parentId": 27,
"id": 33,
"code": "026",
"name": "大灯"
},
{
"parentId": 27,
"id": 34,
"code": "027",
"name": "空调"
},
{
"parentId": 27,
"id": 35,
"code": "028",
"name": "座椅"
}
]oList 为数据存储的变量
2.2 一层遍历
先将第一级列表找出来 创建出方法
/*
data: 所有的原数组，需要进行树形分类的原数组
id：匹配的主键ID
list：子节点列表
*/
const createTree(data,id,list){
// 对源数组进行全部的遍历
data.forEach(item=>{
// 匹配源数组中的每一项父类id是否与传入进行来的id一致
if(item.parentId == id){
// 父类id一致，代表当前item是 list 的子节点
item.push(item)
}
})
// 将列表返回
return list
}
// 这里方法的使用：
/*
第一个参数：所有的原数组就是 oList：所有的数据
第二个参数：一切匹配都从第一级开始，这里第一级匹配的 ID 是等于 0 ，所以传入0
第三个参数：子节点列表，也是一切从第一级开始，使用 空数组 存储
如果自定义从第几级开始，
那么方法的参数 id 和 list 就应该是那一级对应的 父级id 和 它对应的children子节点列表
*/
const treeList = createTree(oList,0,[])2.3 多层遍历（递归)
上述代码只是将第一层分析出来 这一步完成对子列表的生成
/**
data: 所有的原数组，需要进行树形分类的原数组
id：匹配的主键ID
list：子节点列表
*/
const createTree(data,id,list){
// 对源数组进行全部的遍历
data.forEach(item=>{
// 匹配源数组中的每一项父类id是否与传入进行来的id一致
if(item.parentId == id){
// 父类id一致，代表当前item是 list 的子节点
item.push(item)
}
})
// 当执行到这一行，list已经是一个一级树形结构数组了
// 我们需要为list数组添加子节点了！
// 所以，遍历list数组
list.forEach(item=>{
// 避免 item对象中没有存储子节点的数组，所以先初始化一个属性为数组
item.children = []
/*
这里的递归调用：
第一个参数：原数组，还是需要从全部的数据中匹配
第二个参数：是当前的一级列表的主键ID，
层层递归后，会不断使用当前项的主键ID在原数组中匹配，
当匹配成功则会.push追加进第三个参数提供的 当前数据的子节点列表
第三个参数：当前列表项的子节点列表
*/
createTree(oList,item.id,item.children)
})
return list最后的结构
[
{
"parentId": 0,
"id": 1,
"code": "001",
"name": "成品",
"children": [
{
"parentId": 1,
"id": 3,
"code": "0011",
"name": "燃油车",
"children": []
},
{
"parentId": 1,
"id": 6,
"code": "0012",
"name": "新能源车",
"children": []
}
]
},
{
"parentId": 0,
"id": 27,
"code": "002",
"name": "零件",
"children": [
{
"parentId": 27,
"id": 28,
"code": "021",
"name": "发动机",
"children": []
},
{
"parentId": 27,
"id": 29,
"code": "022",
"name": "变速箱",
"children": []
},
{
"parentId": 27,
"id": 30,
"code": "023",
"name": "轮胎",
"children": []
},
{
"parentId": 27,
"id": 31,
"code": "024",
"name": "电池",
"children": []
},
{
"parentId": 27,
"id": 32,
"code": "025",
"name": "底盘",
"children": []
},
{
"parentId": 27,
"id": 33,
"code": "026",
"name": "大灯",
"children": []
},
{
"parentId": 27,
"id": 34,
"code": "027",
"name": "空调",
"children": []
},
{
"parentId": 27,
"id": 35,
"code": "028",
"name": "座椅",
"children": []
}
]
}
]这样子树形结构就处理完成了
2.4 处理item.children为[]空数组的情况
只需要在添加子子列表的时候判断为空即可 如果为空，则删除掉当前项
list.forEach(item=>{
item.children = []
createTree(oList,item.id,item.children)
// 删除子列表数量为0的属性
if(item.children.length == 0){
delete item.children
}
})2. 完整代码
const createTree = (data,id,list)=>{
oList.forEach(item=>{
if(item.parentId == id){
list.push(item)
}
})
list.forEach(item=>{
item.children = []
createTree(oList,item.id,item.children)
if(item.children.length == 0){
delete item.children
}
})
return list
}
/**
如果符合这种结构，就可以直接使用调用该方法
[
{
id: 0,
parentId: id
},
{
id: 1,
parentId: id
}
]
*/
// 调用时，0代表最顶级的父类ID；或者换成自定义第几级的父类ID
// [] 必须为空数组；或者换成自定义第几级的子节点列表
const data = createTree(oList,0,[]) // 更换oList为你需要转换树形结构的原数组本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-03-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
