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

news/2024/7/10 1:43:55 标签: vue, javascript, vue.js, tree, 树结构

目标:

JS 将有父子关系的平行数组转换成树形数据

方法:双重遍历,一次遍历parentId,一次遍历id == parendId;

该方法应该能很容易被想到,实现起来也一步一步可以摸索出来;

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},

]





function listToTree(oldArr){

  oldArr.forEach(element => {

    let parentId = element.parentId;

    if(parentId !== 0){

      oldArr.forEach(ele => {

        if(ele.id == parentId){ //当内层循环的ID== 外层循环的parendId时,(说明有children),需要往该内层id里建个children并push对应的数组;

          if(!ele.children){

            ele.children = [];

          }

          ele.children.push(element);

        }

      });

    }

  });

  console.log(oldArr) //此时的数组是在原基础上补充了children;

  oldArr = oldArr.filter(ele => ele.parentId === 0); //这一步是过滤,按树展开,将多余的数组剔除;

  console.log(oldArr)

  return oldArr;

}

listToTree(oldData);

以上就是本文的全部内容,希望对大家的学习有所帮助。

treeSkill">

http://www.niftyadmin.cn/n/1466620.html

相关文章

div在body中可以任意拖动

HTML代码 <div id"idOuterDiv" class"CsOuterDiv"></div> CSS代码 body {background-color:#232429; } .CsOuterDiv {width:256px;height:146px;background-color:white;position:absolute;top:50%;left:50%;transform:translateX(-50%) tra…

在Vue中使用JSX作为render

ant-design-vue开源了一段时间后&#xff0c;收到了一些反馈&#xff0c;尤其是Form组件上线后&#xff0c;很多用户对JSX的使用感到迷惑和不习惯&#xff0c;为此专门介绍下Vue JSX的使用姿势及注意事项。 Form组件的自动收集校验功能需要在JSX下使用&#xff0c;当然如果不需…

Vue 自定义指令实现点击DOM元素以外触发事件

1.directive.js import Vue from "vue";// 提交验证Vue.directive("clickOutside", {// 初始化指令bind(el, binding, vnode) {function clickHandler(e) {// 这里判断点击的元素是否是本身&#xff0c;是本身&#xff0c;则返回if (el.contains(e.target…

Vue 实现复制功能,不需要任何结构内容直接复制方式

介绍&#xff1a; 在做复制文档功能时&#xff0c;考虑到是个不太会复用的小功能&#xff0c;最后选择直接用 document.execCommand 方法实现。 在查阅资料时候&#xff0c;发现其他人都需要在页面上写上结构、ID。然后捕捉某个ID获取内容&#xff0c;感觉很不方便。 使用&a…

css3字体背景颜色跑马灯

页面效果 CSS .title {border: 0px;font-size: 200%;font-weight: bold;float: left;line-height: 1.5;width: 100%;padding-left: 5px;margin-top:0px;background: -webkit-linear-gradient(left,#ffffff,#ff0000 6.25%,#ff7d00 12.5%,#ffff00 18.75%,#00ff00 25%,#00ffff 31.…

vue路由切换之淡入淡出的简单实现

路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果&#xff0c;提升我们程序的动效设计 想让路由有过渡动画&#xff0c;需要在<router-view>标签的外部添加<trans…

基于vuex的任务事项管理的小demo

基于vuex的任务管理的小demo&#xff0c;适合学习vuex&#xff0c;充分运用了vuex 程序demo页面 使用到的vuex方法总概况 大家可以自己看看&#xff0c;探讨一下&#xff0c;附git地址&#xff1a; https://github.com/erdfty/vuex-todos

关于Vue不能监听(watch)数组变化

一、vue监听数组 vue实际上可以监听数组变化&#xff0c;比如 data () {return {watchArr: [],}; }, watchArr (newVal) {console.log(监听&#xff1a; newVal); }, created () {setTimeout(() > {this.watchArr [1, 2, 3];}, 1000); }, 在比如使用splice(0,2,3)从数组…