JS遍历树层级关系实现原理解析
更新时间：2020年08月31日 10:03:27 作者：FeelRose
这篇文章主要介绍了JS遍历树层级关系实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1.遍历树的层级关系
1）先整理数据
2）找到id和数据的映射关系
3）然后找到父节点的数据，进行存储
代码如下
test() {
const list = [
{ id: "123", parentId: "", children: [] },
{ id: "124", parentId: "123", children: [] },
{ id: "125", parentId: "124", children: [] },
{ id: "126", parentId: "125", children: [] },
{ id: "127", parentId: "126", children: [] }
];
const mapList = [];
const tree = [];
list.forEach(item => {
mapList[item.id] = item;
});
list.forEach(item => {
const parentNode = mapList[item.parentId];
if (!parentNode) {
if (!item.children) {
item.children = []
}
tree.push(item);
} else {
if (!parentNode.children) {
parentNode.children = []
}
parentNode.children.push(item);
}
});
console.log("tree", tree);
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
在做前端界面开发的时候，遇到需要改变颜色的需求，就需要使用颜色选择器。本文就来用JavaScript编写一个简单的颜色选择器，感兴趣的可以了解一下2023-02-02
这篇文章主要介绍了详解微信小程序轨迹回放实现及遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章介绍了5分钟理解JavaScript中this用法，有需要的朋友可以参考一下2013-11-11
近期项目需要实现将 html 页面转换成 pdf 报告的需求,经过一番调研以及结合过往经验,发现了三种技术方案,下面我们就来看看它们的具体实现步骤吧2024-02-02
JS表格组件神器bootstrap table详解（强化版）
这篇文章主要以实例的方式为大家再次介绍了JS表格组件神器bootstrap table，bootstrap table界面采用扁平化的风格，用户体验比较好，更好兼容各种客户端，需要了解更多bootstrap table的朋友可以参考下2016-05-05
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
这篇文章主要介绍了微信小程序MUI导航栏透明渐变功能,结合实例形式分析了通过改变opacity实现透明度渐变功能相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要给大家介绍了关于js获取当前年月日的相关资料,JavaScript内置的Date对象是获取当前日期最常用的工具之一,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写。提醒用户。2011-02-02
Bootbox.js 是一个小型的 JavaScript 库用来创建简单的可编程对话框，基于 Twitter 的 Bootstrap 开发。今天我们就来研究下，如何使用bootbox插件来实现自定义弹窗。2015-04-04
最新评论