js 实现 list转换成tree的方法示例（数组到树）

从数组到树：JavaScript中的列表转换树形数据示例

你是否曾经面对过将具有父子关系的平行数组转换为树形数据的挑战？今天，我们将通过示例展示如何使用JavaScript实现这一转换。这种方法通过双重遍历实现，一次遍历parentId，一次遍历id等于parentId的过程。这种思路既直观又容易实现。

假设我们有以下旧数据格式：

```javascript

const oldData = [

{id:1, name:'boss', parentId:0},

{id:2, name:'lily', parentId:1},

{id:3, name:'jack', parentId:1},

{id:4, name:'john', parentId:2},

{id:5, name:'boss2', parentId:0}

]

```

我们可以使用以下的`listToTree`函数将其转换为树形结构：

```javascript

function listToTree(oldArr) {

oldArr.forEach(element => {

let parentId = element.parentId;

if (parentId !== 0) {

oldArr.forEach(ele => {

if (ele.id === parentId) { // 当内层循环的ID等于外层循环的parentId时，表示有子元素

if (!ele.children) {

ele.children = [];

}

ele.children.push(element);

}

});

}

});

console.log("带有children的数组：", oldArr); // 此时数组已补充了children属性

oldArr = oldArr.filter(ele => ele.parentId === 0); // 过滤出根节点，构成完整的树形结构

console.log("树形结构的数组：", oldArr);

return oldArr;

}

listToTree(oldData);

```

在这个例子中，我们首先遍历每一个元素，找到它的父ID。然后，我们再次遍历数组，查找具有相同ID的元素（也就是子元素），并将它们添加到父元素的`children`数组中。我们过滤出所有父ID为0的元素，也就是树的根节点。这个过程就完成了数组到树形结构的转换。

以上就是本文的全部内容，希望对大家的学习有所帮助。也希望大家能支持我们的网站——狼蚁SEO。如果你对SEO优化在长沙网络推广方面的应用感兴趣，欢迎与我们一同学习交流。让我们一起努力，将知识转化为力量！