js数组对象,没父亲树形,转树形结构 递归
时间: 2023-10-11 12:21:19 浏览: 76
好的,如果您的数组对象不包含父级 ID,您可以使用以下代码将该数组对象转换为树形结构:
```javascript
function buildTree(items) {
const result = [];
const itemMap = {};
// 将每个元素添加到映射表中
for (const item of items) {
const { id } = item;
itemMap[id] = { ...item, children: [] };
}
// 添加子元素到父级元素的 children 数组中
for (const item of Object.values(itemMap)) {
const { parent_id } = item;
if (parent_id) {
itemMap[parent_id].children.push(item);
} else {
result.push(item);
}
}
return result;
}
```
该函数采用一个参数 `items`,它是一个包含要转换为树形结构的元素的数组。函数首先创建一个空数组 `result`,用于存储根元素。然后,它创建一个映射表 `itemMap`,其中包含每个元素的副本,并将其按 ID 存储。最后,它遍历映射表中的每个元素,并将其添加到其父级元素的 `children` 数组中,或者如果它没有父级,则添加到 `result` 数组中。
现在,我们可以使用以下代码调用该函数并输出结果:
```javascript
const arr = [
{ id: 1, name: 'Root' },
{ id: 2, parent_id: 1, name: 'Child 1' },
{ id: 3, parent_id: 1, name: 'Child 2' },
{ id: 4, parent_id: 2, name: 'Grandchild 1' },
{ id: 5, parent_id: 2, name: 'Grandchild 2' },
{ id: 6, parent_id: 3, name: 'Grandchild 3' }
];
const tree = buildTree(arr);
console.log(tree);
```
输出的结果应该与我们之前的示例相同:
```javascript
[
{
id: 1,
name: 'Root',
children: [
{
id: 2,
parent_id: 1,
name: 'Child 1',
children: [
{ id: 4, parent_id: 2, name: 'Grandchild 1', children: [] },
{ id: 5, parent_id: 2, name: 'Grandchild 2', children: [] }
]
},
{
id: 3,
parent_id: 1,
name: 'Child 2',
children: [{ id: 6, parent_id: 3, name: 'Grandchild 3', children: [] }]
}
]
}
]
```
希望这可以帮助您将没有父级 ID 的数组对象转换为树形结构。如果您有任何疑问,请随时问我。
相关推荐
![](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)
![](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)
![](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)
![](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)