js数组转树形结构 递归
时间: 2023-04-01 17:02:29 浏览: 95
可以使用递归来实现将一个数组转换成树形结构。首先需要定义一个函数,接收一个数组和一个父节点 ID,然后遍历数组,找到所有父节点 ID 为当前节点 ID 的子节点,将它们作为当前节点的子节点,然后递归调用函数,将子节点作为当前节点,继续遍历数组,直到所有节点都被遍历完。最后返回根节点即可。
相关问题
js一维数组转树形结构
在JavaScript中,将一维数组转换为树形结构通常是为了组织数据,使其更易于表示层级关系。这可以通过递归或者栈技术来实现。下面是一个简单的例子,假设我们有一维数组,每个元素包含`id`, `parentId`等字段:
```javascript
function arrayToTree(data) {
const map = new Map(); // 用于存储已处理过的节点
function buildTree(item) {
if (!item.id || !item.parentId) return; // 如果缺少必要的属性,则忽略
let node = map.get(item.id); // 查找已有节点
if (!node) { // 否则,创建新节点并添加到map中
node = { id: item.id, children: [] };
map.set(item.id, node);
}
let parent = map.get(item.parentId);
if (parent) { // 找到父节点,并将其添加为子节点
parent.children.push(node);
}
}
data.forEach(buildTree); // 遍历所有元素并构建树形结构
return Array.from(map.values()); // 返回所有的节点组成数组
}
// 示例输入:
const arr = [
{ id: 1, parentId: null },
{ id: 2, parentId: 1 },
{ id: 3, parentId: 1 },
{ id: 4, parentId: 2 },
{ id: 5, parentId: 3 }
];
// 示例输出:
const tree = arrayToTree(arr);
console.log(tree);
```
js数组递归转树形结构
好的,对于这个问题,可以使用递归的方式来将数组转为树形结构。
首先,我们需要定义一个函数,用于将每个节点插入到对应的父节点下面,如下:
```javascript
function buildTree(nodes) {
var map = {};
var tree = [];
var i;
var node;
for (i = 0; i < nodes.length; i += 1) {
map[nodes[i].id] = i;
nodes[i].children = [];
}
for (i = 0; i < nodes.length; i += 1) {
node = nodes[i];
if (node.parent_id) {
nodes[map[node.parent_id]].children.push(node);
} else {
tree.push(node);
}
}
return tree;
}
```
其中,我们先遍历节点数组,将每个节点添加到一个 map 中,之后再次遍历节点数组,根据每个节点的 `parent_id` 属性将其插入到对应的父节点下面。
接着,我们可以定义一个数组,包含一些节点数据,如下:
```javascript
var nodes = [
{ id: 1, parent_id: null, name: 'Node 1' },
{ id: 2, parent_id: 1, name: 'Node 1.1' },
{ id: 3, parent_id: 1, name: 'Node 1.2' },
{ id: 4, parent_id: 2, name: 'Node 1.1.1' },
{ id: 5, parent_id: 2, name: 'Node 1.1.2' },
{ id: 6, parent_id: 3, name: 'Node 1.2.1' },
];
```
最后,我们可以调用 `buildTree` 函数将节点数组转换为树形结构,如下:
```javascript
var tree = buildTree(nodes);
console.log(tree);
```
输出结果如下:
```javascript
[
{
"id": 1,
"parent_id": null,
"name": "Node 1",
"children": [
{
"id": 2,
"parent_id": 1,
"name": "Node 1.1",
"children": [
{
"id": 4,
"parent_id": 2,
"name": "Node 1.1.1",
"children": []
},
{
"id": 5,
"parent_id": 2,
"name": "Node 1.1.2",
"children": []
}
]
},
{
"id": 3,
"parent_id": 1,
"name": "Node 1.2",
"children": [
{
"id": 6,
"parent_id": 3,
"name": "Node 1.2.1",
"children": []
}
]
}
]
}
]
```
希望可以帮到您!
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)