Shulou(Shulou.com)06/02 Report--

js will be assembled into a tree structure of the two ways to implement what, many novices are not very clear about this, in order to help you solve this problem, the following small series will be explained in detail for everyone, there are people who need this can come to learn, I hope you can harvest.

preface

Occasionally, we will encounter a list thrown by our back-end classmates and ask us to assemble it into a tree structure and render it on the page. This article explores the algorithm idea of spanning tree in two different ways.

背景介绍

可组装成树结构的数组一般有以下几个要素：

当前节点id

parentId 当前节点的父节点id

children 子节点列表（可能不会在接口中返回，需要组装时候自己加上）

原始结构：

目标结构：

关键就是一维数组中通过parentId找到其对应的父节点并添加到父节点的children数组中。

实现方案

最直接的方式就是遍历数组，并把找到的子节点逐一添加到父节点中

function listToTreeSimple(data) { const res = []; data.forEach((item) => { const parent = data.find((node) => node.id === item.parentId); if (parent) { parent.children = parent.children || []; parent.children.push(item); } else { // * 根节点 res.push(item); } }); return res;}

考虑进一步优化，使用哈希表，以id为key存储每个节点值，省去data.find计算

function listToTree(data) { // * 先生成parent建立父子关系 const obj = {}; data.forEach((item) => { obj[item.id] = item; }); // * obj -> {1001: {id: 1001, parentId: 0, name: 'AA'}, 1002: {...}} // console.log(obj, "obj") const parentList = []; data.forEach((item) => { const parent = obj[item.parentId]; if (parent) { // * 当前项有父节点 parent.children = parent.children || []; parent.children.push(item); } else { // * 当前项没有父节点 -> 顶层 parentList.push(item); } }); return parentList;}

即便数据量很小，带来的性能提升也是显著的

递归法

更有骚操作递归法，性能会很差，但代码会很酷????

function recursiveToTree(data) { function loop(key) { const arr = []; data.forEach((item) => { if (item.parentId === key) { item.children = loop(item.id); arr.push(item); } }); return res; } return loop(1);}

看看性能，诶？看起来竟然递归性能最佳????

但是数据量稍微大一点

(上面递归，下面非递归)

资源

原始数据列表

const list = [ { id: 1001, parentId: 0, name: "AA", }, { id: 1002, parentId: 1001, name: "BB", }, { id: 1003, parentId: 1001, name: "CC", }, { id: 1004, parentId: 1003, name: "DD", }, { id: 1005, parentId: 1003, name: "EE", }, { id: 1006, parentId: 1002, name: "FF", }, { id: 1007, parentId: 1002, name: "GG", }, { id: 1008, parentId: 1004, name: "HH", }, { id: 1009, parentId: 1005, name: "II", },];看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.