登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript怎么处理树状结构数据的增删改查

WBOY
发布: 2022-07-18 13:53:13
转载
1972人浏览过

本篇文章给大家带来了关于javascript的相关知识,其中主要整理了处理树状结构数据的增删改查的相关问题,相比普通的数组结构数据,树状结构的处理就没有数组那么的直观,但是也没那么复杂,需要多一步递归查找来对数据进行深度遍历操作,下面一起来看一下,希望对大家有帮助。

JavaScript怎么处理树状结构数据的增删改查

【相关推荐:javascript视频教程web前端

问题描述:JS处理树状结构的增删改查

最近在开发一个后台管理系统的权限管理模块,涉及到各种树状结构的数据处理逻辑,例如:增,删,改,查等;相比普通的数组结构数据,树状结构的处理就没有数组那么的直观,但是也没那么复杂,需要多一步——递归查找来对数据进行深度遍历操作,那么这里呢,博主也将开发过程中总结出来的方法分享给大家,一文带你吃透JS树装结构数据处理:

数据结构示例

  let data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
登录后复制

解决方案:

1、新增节点

查找树装结构的指定节点,新增子节点,代码如下:

const appendNodeInTree = (id, tree, obj) => {
  tree.forEach(ele=> {
    if (ele.id === id) {
      ele.children ? ele.children.push(obj) : ele.children = [obj]
    } else {
      if (ele.children) {
        appendNodeInTree(id, ele.children, obj)
      }
    }
  })
  return tree
}
登录后复制

2、删除节点

查找树装结构的指定节点,删除节点,代码如下

const removeNodeInTree=(treeList, id)=> { // 通过id从数组(树结构)中移除元素
  if (!treeList || !treeList.length) {
    return
  }
  for (let i = 0; i <h2 id="%E4%BF%AE%E6%94%B9%E8%8A%82%E7%82%B9">3、修改节点</h2><p>递归查找并修改某个节点的状态,代码如下:</p><pre class="brush:php;toolbar:false">  const updateNodeInTree=(treeList,id, obj)=&gt; {
      if (!treeList || !treeList.length) {
        return;
      }
      for (let i = 0; i <h2 id="%E6%9F%A5%E6%89%BE%E8%8A%82%E7%82%B9">4、查找节点</h2><p>递归查找树形节点的某个节点,代码:</p><pre class="brush:php;toolbar:false">const findNodeInTree = (data, key, callback) =&gt; {
      for (let i = 0; i  {
      Obj = item
    })

    // 此时就是Obj对应的要查找的节点
    console.log(Obj)
登录后复制

【相关推荐:javascript视频教程web前端

以上就是JavaScript怎么处理树状结构数据的增删改查的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:CSDN网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号