javascript如何用递归写一个简单的树形结构示例

现在有一个数据,需要你渲染出对应的列表出来:

var data = [
 {"id":1},
 {"id":2},
 {"id":3},
 {"id":4},
];

var str="<ul>";

data.forEach(function(v,i){
  str+="<li><span>"+v.id+"</span></li>"
})

str="</ul>"

$(doucment).append(str);

哼,easy!

语罢,又是一道题飞来!

哦,还带了儿子来当帮手。我一个循环再一个循环,轻松带走你们

var data2 = [
  {"id":1,children:[{"id":"child11"},{"id":"child12"}]},
  {"id":2},
  {"id":3children:[{"id":"child31"},{"id":"child32"}]},
  {"id":4},
];

var str="<ul>";

data2.forEach(function(v,i){
  if(v.children&&v.children.length>0){
    str+="<li><span>"+v.id+"</span>";
    str+="<ul>";
    v.children.forEach(function(value,index){
       str+="<li><span>"+value.id+"</span>";
    })
    str="</ul>";
    str="</li>";

  }else{
    str+="<li><span>"+v.id+"</span></li>"
  }
})
str="</ul>"

$(doucment).append(str);

还有谁?

var json=[
    {
     name:123,id:1
     children:[
      {
       name:453,id:456,children:[{name:789,id:777,children:[{name:"hahahqqq---qq",id:3232,children:[name:'son',id:"13132123211"]}]}]
      },
      {
       name:"Cessihshis" , id:12121
      }
     ]
    },
    {
     name:"啊啊啊11", id:12
    },
   ];

竟然把全家都带来了,看我循环循环再循环大法。

嗯,不知道他家几代同堂,我该循环几次?突然间你感觉遇到对手了。

正纳闷着,突然有人拍了一下你的肩膀,兄弟,我这里有一本递归秘籍,我看你骨骼惊奇,是个练武奇才,10块钱卖你了。

 function render(treeJson){
  if(!Array.isArray(treeJson)||treeJson.length<=0){return ""}
  var ul=$("<ul>");
  treeJson.forEach(function(item,i){
   var li=$("<li><span class='treeName'>"+item.name+"</span></li>");
   if(Array.isArray(item.children)&&item.children.length>0){
    li.append(render(item.children))
   }
   ul.append(li);
  })
  return ul
 }

 $(document).append(render(json));

好了不扯了,通过递归,无需再判断数据有多少层级,只有当前数组有children并且长度大于0,函数就会递归调用自身,并且返回一个ul。

这样一来,一颗非常简陋的树就生成了,不过通常树都带有radio或者checkbox选择框,而且很多时候都需要对树的右侧进行拓展,比如加一些新增,编辑等按钮什么的,可以考虑多传一个对象作为参数。

   var checkbox={
    radio:"<label class='myTreeIcon'><input type='radio' name='selectTreeRedio'><span></span></label>",

    multi:"<input type='checkbox' name='selectTreeRedio'>"
   }

   function render(treeJson,option={type:0,expandDom:function(){}}){
     if(!Array.isArray(treeJson)||treeJson.length<=0){return ""}
     var {type,expandDom}=option;
     var ul=$("<ul>");
     treeJson.forEach(function(item,i){
      var str="";
      if(type==1){
       str+=checkbox.multi
      }else if(type==2){
       str+=checkbox.radio
      }
      var li=$("<li data-id='"+item+"'>"+str+"<span class='treeName'>"+item.name+"</span></li>");
      expandDom&&expandDom(li,item);
      if(item.children&&item.children.length>0){
       li.append(render(item.children,option))
      }
      ul.append(li);
    })
    return ul
   }

   //option使用了一个默认对象,默认为不需要选择框和不需要拓展, 如果传入的type为1或者2,则生成checkbox或者radio,由于radio样式比较丑,用label包起来自己模拟选中的效果;如果传入拓展参数,则把当前的父级li以及当前的参数传入,以便进行拓展。

   $("#tree").append(render(json,{
    type:1,
    expandDom:function(el,data){
     el.append("<button>编辑</button><button>测试</button><a data-msg='"+JSON.stringify(data)+"'></a>")
    }
   }))

有时候后台返回的可能不是拼装好层级的数组,而是带有pid标识的所有数组的集合,比如:

var data = [
 {"id":2,"name":"第一级1","pid":0},
 {"id":3,"name":"第二级1","pid":2},
 {"id":5,"name":"第三级1","pid":4},
 {"id":100,"name":"第三级2","pid":3},
 {"id":6,"name":"第三级2","pid":3},
 {"id":601,"name":"第三级2","pid":6},
 {"id":602,"name":"第三级2","pid":6},
 {"id":603,"name":"第三级2","pid":6}
];

为了用递归来渲染出树来,这时,就需要我们手动来将层级装好了:

  function arrayToJson(treeArray){
  var r = [];
  var tmpMap ={};

  for (var i=0, l=treeArray.length; i<l; i++) {
   // 以每条数据的id作为obj的key值,数据作为value值存入到一个临时对象里面
   tmpMap[treeArray[i]["id"]]= treeArray[i];
  } 

  for (i=0, l=treeArray.length; i<l; i++) {
   var key=tmpMap[treeArray[i]["pid"]];

   //循环每一条数据的pid,假如这个临时对象有这个key值,就代表这个key对应的数据有children,需要Push进去
   if (key) {
    if (!key["children"]){
      key["children"] = [];
      key["children"].push(treeArray[i]);
    }else{
     key["children"].push(treeArray[i]);
    }
   } else {
    //如果没有这个Key值,那就代表没有父级,直接放在最外层
    r.push(treeArray[i]);
   }
  }
  return r
  }

现在我们已经实现了将没有层级结构的数组转化为带有层级的数组,那么问题来了,树形图还常常会需要带搜索功能,有没有办法把带层级结构的数组转化为不带层级结构的一个数组呢?因为如果不带层级的话,进行搜索等操作时就非常方便,一个filter基本就可以搞定了。

  var jsonToArray=function (nodes) {
   var r=[];
   if (Array.isArray(nodes)) {
    for (var i=0, l=nodes.length; i<l; i++) {
     r.push(nodes[i]);
     if (Array.isArray(nodes[i]["children"])&&nodes[i]["children"].length>0)
      //将children递归的push到最外层的数组r里面
      r = r.concat(jsonToArray(nodes[i]["children"]));
       delete nodes[i]["children"]
    }
   }
   return r;
  }

这样,不管后台返回什么格式给我们,我们都可以自由的互转了,不管是带层级的转不带层级的,还是把不带层级的转化为带有层级的,都只需要调用一个函数就可以轻松解决。

不过这里有一个隐患,就是由于对象的引用关系,操作后虽然返回了我们需要东西,但是会改变原来的数据。

为了不影响到原来的数据,我们需要复制一份数据,需要进行一次深拷贝。

为什么是深拷贝而不是浅拷贝?因为浅拷贝只会复制最外面的一层,假入某一个key值里面又是一个对象,那对复制后的对象的这个key的值进行操作通用会影响到原来的对象。浅拷贝的方法有很多,ES6的assign,jq第一个参数不为true的 $.extend(),数组的slice(0),还有很多很多。

对于标准的json格式的对象,可以用JSON.parse(JSON.stringify(obj))来实现。当然,本文写的是递归,所以还是来手写一个

function deepCopy(obj){
  var object;
  if(Object.prototype.toString.call(obj)=="[object Array]"){
   object=[];
   for(var i=0;i<obj.length;i++){
    object.push(deepCopy(obj[i]))
   }
   return object
  }

  if(Object.prototype.toString.call(obj)=="[object Object]"){
   object={};
   for(var p in obj){
    object[p]=obj[p]
   }
   return object
  }
 }

其实有点类似于浅拷贝,浅拷贝会复制一层,那么我们判断某个值是对象,通过递归再来一次(好比饮料中奖再来一瓶一样,如果中奖了,就递归再来一瓶,又中奖就又递归再来一瓶,直到不再中奖),也就是说我们通过无尽的浅拷贝来达到复制一个完全的新的对象的效果。

这样,对树结构操作时,只需要传入深拷贝后新对象,就不会影响原来的对象了;

jsonToArray(deepCopy(data));

亦或是

arrayToJson(deepCopy(data)):

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

(0)

相关推荐

  • java、js中实现无限层级的树形结构方法(类似递归)

    js中: var zNodes=[ {id:0,pId:-1,name:"Aaaa"}, {id:1,pId:0,name:"A"}, {id:11,pId:1,name:"A1"}, {id:12,pId:1,name:"A2"}, {id:13,pId:1,name:"A3"}, {id:2,pId:0,name:"B"}, {id:21,pId:2,name:"B1&qu

  • javascript如何用递归写一个简单的树形结构示例

    现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {"id":4}, ]; var str="<ul>"; data.forEach(function(v,i){ str+="<li><span>"+v.id+"</span></li>&

  • 如何用Python写一个简单的通讯录

    目录 用Python写一个简单的通讯录 一.构思 1.定义空列表和一个空字典来存储 2.定义功能选项 3.添加通讯录功能 3.2 删除学员功能 二.整体项目演示 用Python写一个简单的通讯录 一.构思 1.定义空列表和一个空字典来存储 list1=[] #用于储存字典中的信息 dict1={} #用于储存联系人信息 2.定义功能选项 def Menu(): print('请选择功能--------\n' '1.添加学员\n' '2.删除学员\n' '3.修改学员\n' '4.查询学员\n'

  • 如何用python写一个简单的词法分析器

    编译原理老师要求写一个java的词法分析器,想了想决定用python写一个. 目标 能识别出变量,数字,运算符,界符和关键字,用excel表打印出来. 有了目标,想想要怎么实现词法分析器. 1.先进行预处理,把注释,多余的空格,空行去掉. 2.一行一行扫描,行里逐字扫描,把界符和运算符当做分割符,遇到就先停下开始判断. 若是以 英文字母.$.下划线开头,则可能是变量和关键字,在判断是关键字还是变量. 若是数字开头,则判断下一位是不是也是数字,直到遇到非数字停止,在把数字取出来. 再来判断分割符是

  • Angular6 写一个简单的Select组件示例

    Select组件目录结构 /src /app /select /select.ts /select.html /select.css /options.ts /index.ts //select.ts import { Component, ContentChildren, ViewChild, Input, Output, EventEmitter, QueryList, HostListener } from '@angular/core'; import { NzOptionDirecti

  • 什么是递归?用Java写一个简单的递归程序

    什么是递归?用Java写一个简单的递归程序 递归的定义 递归(recursion):以此类推是递归的基本思想,将规模大的问题转化为规模小的问题来解决. 递归的要素 自定义递归函数,并确定函数的基本功能 例如Java从键盘输入一个数,求输入这个数的阶乘.这个时候把输入的数字作为形参 int diGuiTest(int n ){ } 找到递归函数循环结束条件 在求阶乘的时候,我们不妨做出如下思考,例如输入的n是5,那么5!是5 * 4 3 * 2 * 1,那是不是可以写成 n f(n-1)?,程序运

  • 利用JavaScript写一个简单计算器

    效果如下: 参考程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

  • 如何用C写一个web服务器之基础功能

    服务器架构 目标架构 以 nginx 的思想来考虑本服务器架构,初步考虑如下图: 当然 php 进程也可以替换为其他的脚本语言,可以更改源码中的 command 变量实现. 服务器有一个 master 进程,其有多个子进程为 worker 进程,master 进程受理客户端的请求,然后分发给 worker 进程,worker 进程处理 http 头信息后将参数传递给 php 进程处理后,将结果返回到上层,再响应给客户端. 也考虑过使用 php-fpm 的 worker 进程池方式,那样的话 ph

  • 如何用C写一个web服务器之GCC项目编译

    前言 本想着接下来大概实现一下 CGI 协议,但是实现过程中被一个问题卡住了: C进程与php进程的交互数据类型问题: 在 C 进程中我准备将服务器处理后的请求数据存储在一个结构体内,然后将此结构体中的信息传给 PHP,而 PHP 进程内也会有一个全局数组与之对应,可是众所周之,结构体是 C 进程内的内存数据,是无法直接传给 PHP 使用的. 这时候我们也需要一种"协议"来解决进程数据类型的异构性.当然这个解决方案确定起来还是很简单的,无非是对C结构体进行序列化,使用xml,json,

  • 如何用C写一个web服务器之I/O多路复用

    前言 I/O模型 接触过 socket 编程的同学应该都知道一些 I/O 模型的概念,linux 中有阻塞 I/O.非阻塞 I/O.I/O 多路复用.信号驱动 I/O 和 异步 I/O 五种模型. 其他模型的具体概念这里不多介绍,只简单地提一下自己理解的 I/O 多路复用:简单的说就是由一个进程来管理多个 socket,即将多个 socket 放入一个表中,在其中有 socket 可操作时,通知进程来处理, I/O 多路复用的实现方式有 select.poll 和 epoll. select/p

  • 如何用C写一个web服务器之CGI协议

    目录 前言 CGI CGI请求 CGI响应 Nginx和PHP的CGI实现 SAPI PHP-FPM 纠偏 代码实现 http_parser cJSON 前言 这次更新主要实现一下 CGI 协议. 先放上GitHub链接https://github.com/zhenbianshu/tinyServer 作为一个服务器,基本要求是能受理请求,提取信息并将消息分发给 CGI 解释器,再将解释器响应的消息包装后返回客户端.在这个过程中,除了和客户端 socket 之间的交互,还要牵扯到第三个实体 -

随机推荐