javascript树,javascript树形组件

求大神指点js生成树结构

// 生成树结构

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的枝江网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

function tree(list) {

const result = [];

for (let value of list) {

// 排除空字符串的情况

if (!value) {

continue;

}

const values = value.split('/');

// 查找树结构的当前级别是否已经存在，不存在则创建对象，并添加入列表。

let current = result.find(item = item.name === values[0]);

if (current === void 0) {

current = {};

result.push(current);

}

for (let i = 0, length = values.length; i length; i++) {

current.name = values[i];

if (i length - 1) {

// 如果还有下一级内容，判断当前是否有 children，没有则构建.

if (current.children === void 0) {

current.children = [];

}

// 查找下一级对象，为下一遍遍历构建对象

let nextCurrent = current.children.find(item = item.name === values[i + 1]);

if (nextCurrent === void 0) {

nextCurrent = {};

current.children.push(nextCurrent);

}

current = nextCurrent;

}

}

}

return result;

}

============ 假装分割线 ===========

以上代码是生成树的函数，调用 tree 函数并传入你的 input 数据，返回值就是生成的树。百科没找到传代码的地方了。

js 如何获取新的和旧的dom树？

1、javascript 获取 Dom 树比较简单。直接获取document 文档对象就可以了，或者也可以直接从具体的控件对象进行获取。

2、比较困难的是如何获取之前旧的dom 树对象。常见的思路是可以设置一个全局的数组变量保存之前的dom树对象，注意此对象保存的只是引用，你做变更，之前保存的对象也是变的，因为两者本来就是同一个对象。所以你要保存的必须是dom树的复制对象，也就是所谓的深拷贝对象，这个是有点复杂度的，节点如果复杂的话，容易出现问题，要注意处理。

3、希望对你有帮助。

js广度遍历生成树,树的定义

先序，后序，中序针对二叉树。

深度、广度针对普通树。深度遍历：从树根开始扫描，顶层扫描完了，从一层最左（也可以右）面的结点往下层扫描，直到下层已无结点，这时所有靠最左（右）的结点全部扫描完毕，从树梢往上退一层，看这层旁有无兄弟结点，有的话还是一样从最左（右）边开始扫描，这是个递归概念，利用这一方法来遍历整棵树。广度遍历：从树根开始扫描，顶层扫描完了，扫描一层的所有结点，扫描二层的所有结点，，扫描最底层的结点。

javascript实现树形结构把数组{"1", "1-3-4", "1-2", "1-2"}转变成如图的树

var data = ["1", "1-3-4", "1-2", "1-2"],

result = [];

data.map(function(d){

var child = d.split("-"),

temp = result;

child.map(function(d2,i){

var _pos = pos(temp, d2);

if( _pos != -1 ){

temp = temp[_pos]["children"];

}else{

temp.push({

"id": d2,

"children": []

});

temp = temp[temp.length-1]["children"];

};

});

});

function pos(list,id){

var _pos = -1;

list.map(function(d, i){

if( d.id == id )

_pos = i;

});

return _pos;

};

console.log(JSON.stringify(result));

这个就是美化后的json结果

JS树结构数据的遍历

title: JS树结构数据的遍历

date: 2022-04-14

description: 针对项目中出现树形结构数据的时候，我们怎样去操作他

项目中我们会经常出现对树形结构的遍历、查找和转换的场景，比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据，我们又如何去遍历和操作，有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式

树的特点

1、每个节点都只有有限个子节点或无子节点；

2、没有父节点的节点称为根节点；

3、每一个非根节点有且只有一个父节点；

4、除了根节点外，每个子节点可以分为多个不相交的子树；

5、树里面没有环路

下面的图片表示一颗树

在下面的JS中我们由多棵树组成我们的数据

在这数据中我们如何评判数据是否为叶节点（也就是最后一级），我们每个节点都会存在children属性，如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点

我们针对树结构的操作离不开遍历，遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现，而广度优先遍历的话是非递归的

从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问结点，访问完一层就进入下一层，直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。

简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。

所以我们的实现思路是，维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤直到队列为空：

取出队列中的第一个元素，进行访问相关操作，然后将其后代元素（如果有）全部追加到队列最后。

深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止

1、先序遍历

访问子树的时候，先访问根再访问根的子树

2、后序遍历

访问子树的时候，先访问子树再访问根

1、先序遍历

先序遍历与广度优先循环实现类似，要维护一个队列，不同的是子节点不追加到队列最后，而是加到队列最前面

2、后序遍历

后序遍历就略微复杂一点，我们需要不断将子树扩展到根节点前面去，执行列表遍历，并且通过一个临时对象维护一个id列表，当遍历到某个节点如果它没有子节点或者它本身已经存在于我们的临时id列表，则执行访问操作，否则继续扩展子节点到当前节点前面

对于树结构的遍历操作，其实递归是最基础，也是最容易理解的。递归本身就是循环的思想，所以可以用循环来改写递归,以上的方式在项目中已经廊括了大部分的场景了，我们在日常开发中可以根据场景或者需要去选择我们的遍历方式，或者基于此对他进行调整和优化，至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了，各位感兴趣可以自己去验证。

广度优先搜索

树的遍历

深度优先搜索

图文详解两种算法：深度优先遍历（DFS）和广度优先遍历（BFS）

二叉树遍历（前序，后序，中序，层次）递归与迭代实现JavaScript

JS树结构操作:查找、遍历、筛选、树和列表相互转换

JavaScript 文件目录树

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

meta name="author" content="心梦缘ocean ocl" /

titleMy tree demo/title

style type="text/css"

/*主页面样式*/

.leftNav {

  width: 20%;

  height:500px;

  border:#B9E0F7 1px solid;

  margin-left: 1%;

  margin-right: 1%;

}

#footer {

color:#808080;

line-height: 1.6em;

padding: 0 0 1em 0;

}

/*我的树样式表*/

.treeDiv {

color: #636363;

font-size: 14px;

font-weight: normal;

background-color: #fff;

color: black;

overflow: auto;

padding: 0 0 1em 0;

overflow-x: hidden;

}

.treeNode {

white-space: nowrap;

text-indent: -14px;

margin: 6px 2px 5px 14px;

}

a.treeUnselected:hover, a.treeSelected:hover {

background-color: #BFD9ED;

text-decoration: none;

}

a.treeUnselected, a.treeSelected {

color: black;

padding: 1px 3px 1px 0;

text-decoration: none;

}

a.treeSelected {

background-color: #B9E0F7;

}

a.treeUnselected {

background-color: transparent;

}

.treeSubnodes {

display: block;

}

.treeSubnodesHidden {

display: none;

}

.treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {

height: 15px;

margin-left: 5px;

margin-right: 0px;

width: 15px;

}

.treeNode img.treeLinkImage {

cursor: pointer;

}

div.treeNode a, div.treeNode span.apiRoot {

display: inline-block;

margin-left: 24px;

text-indent: 0;

white-space: normal;

width: 95%;

word-wrap: break-word;

}

div.treeNode span.category {

cursor: pointer;

}

/style

/head

body

div class="leftNav"

div id="samplesToc"

  div id="tree" style="top: 35px; left: 0px;" class="treeDiv"

    div id="treeRoot" onselectstart="return false" ondragstart="return false"

      div class="treeNode"

        img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"

        span onclick="expandCollapse(this.parentNode)" class="category"目录节点一 /span

        div class="treeSubnodesHidden"

            div class="treeNode"

                 img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"

                 span onclick="expandCollapse(this.parentNode)" class="category"目录节点一子目录 /span

                 div class="treeSubnodesHidden"

                     div class="treeNode"

                        a href="#" class="treeUnselected" onclick="clickAnchor(this)"二级叶子结点一/a

                  /div

                  div class="treeNode"

                        a href="#" class="treeUnselected" onclick="clickAnchor(this)"二级叶子结点二/a

                  /div

              /div

            /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点一/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点二/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点三/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点四/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点五/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点六/a

          /div

        /div

      /div

      !--end block--

      div class="treeNode"

        img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"

        span onclick="expandCollapse(this.parentNode)" class="category"目录节点二/span

        div class="treeSubnodesHidden"

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点一/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点二/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点三/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点四/a

          /div

          div class="treeNode"

            a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点五/a

          /div

        /div

      /div

      !--end block--

    /div

  /div

/div !-- end samplesToc --

/div !-- end leftNav --

div class="right content"

/div!-- end main  content--

div id="footer" align="center"

/div!-- end footer--

script type="text/javascript"

var treeSelected = null;//选中的树节点

var imgPlus = new Image();

imgPlus.src="../graphics/treenodeplus.gif";

var imgMinus = new Image();

imgMinus.src="../graphics/treenodeminus.gif";

//父节点展开事件

function expandCollapse(el)

{

//如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点

if (el.className!= "treeNode"){

  return;    //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode

}  

var child;

var imgEl;//图片子节点，在树展开时更换图片

for(var i=0; i el.childNodes.length; i++)

{

  child = el.childNodes[i];

  if (child.src)

  {

      imgEl = child;

  }

  else if (child.className == "treeSubnodesHidden")

  {

      child.className = "treeSubnodes";//原来若隐藏，则展开

      imgEl.src = imgMinus.src;//更换图片

      break;

  }

  else if (child.className == "treeSubnodes")

  {

      child.className = "treeSubnodesHidden";//原来若展开，则隐藏

      imgEl.src = imgPlus.src;//更换图片

      break;

  }

}

}

//子节点点击事件，设置选中节点的样式

function clickAnchor(el)

{

selectNode(el.parentNode);

el.blur();

}

function selectNode(el)

{

if (treeSelected != null)

{

  setSubNodeClass(treeSelected, 'A', 'treeUnselected');

}

setSubNodeClass(el, 'A', 'treeSelected');

treeSelected = el;

}

function setSubNodeClass(el, nodeName, className)

{

var child;

for (var i=0; i el.childNodes.length; i++)

{

  child = el.childNodes[i];

  if (child.nodeName == nodeName)

  {

      child.className = className;

      break;

  }

}

}

/script

/body

/html

运行效果：