一文吃透JS树状结构的数据处理(增删改查)

 更新时间:2022年07月05日 14:13:00   作者:国服第二切图仔  
在开发后台管理系统时,常常会涉及到各种树状结构的数据处理逻辑,例如:增,删,改,查等。而树状结构的处理就没有数组那么的直观。本文为大家总结了JS树状结构的数据处理的方法,需要的可以参考下

问题描述

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 < treeList.length; i++) {
    if (treeList[i].id === id) {
      treeList.splice(i, 1);
      break;
    }
    removeNodeInTree(treeList[i].children, id)
  }
}

3、修改节点

递归查找并修改某个节点的状态,代码如下:

  const updateNodeInTree=(treeList,id, obj)=> {
      if (!treeList || !treeList.length) {
        return;
      }
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].id == id) {
          treeList[i]= obj;
          break;
        }
        setTreeListNodeFalse(treeList[i].children,id,obj);
      }
    }

4、查找节点

递归查找树形节点的某个节点,代码:

const findNodeInTree = (data, key, callback) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key == key) {
          return callback(data[i], i, data)
        }
        if (data[i].children) {
          findNodeInTree (data[i].children, key, callback)
        }
      }
    }
 
    // 所查找到的节点要存储的方法
    let Obj={}
    findNodeInTree(data, key, (item, index, arr) => {
      Obj = item
    })
 
    // 此时就是Obj对应的要查找的节点
    console.log(Obj)

总结

本文介绍了js如何处理树装数据结构的增删改查,掌握以上函数,基本可以应对同样业务类型的数据处理

以上就是一文吃透JS树状结构的数据处理(增删改查)的详细内容,更多关于JS树状结构的数据处理的资料请关注脚本之家其它相关文章

相关文章

  • JavaScript实现拖拽盒子效果

    JavaScript实现拖拽盒子效果

    这篇文章主要为大家详细介绍了JavaScript实现拖拽盒子效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 浅谈函数调用的不同方式,以及this的指向

    浅谈函数调用的不同方式,以及this的指向

    下面小编就为大家带来一篇浅谈函数调用的不同方式,以及this的指向。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js获取对象为null的解决方法

    js获取对象为null的解决方法

    js获取对象为null的情况,想必很多的朋友都有遇到过吧,只要是js对字符串的解析跟对数字串的解析还是不太一样,这是需要注意的地方
    2013-11-11
  • JS打字效果的动态菜单代码分享

    JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • 微信小程序用户拒绝授权的处理方法详解

    微信小程序用户拒绝授权的处理方法详解

    这篇文章主要介绍了微信小程序用户拒绝授权的处理方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 纯js的右下角弹窗实例

    纯js的右下角弹窗实例

    下面小编就为大家带来一篇纯js的右下角弹窗实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • javascript动画系列之模拟滚动条

    javascript动画系列之模拟滚动条

    本文主要介绍了js动画模拟滚动条的实现原理以及分享了通过滚动条实现的几个应用的实例代码:1.通过移动滚动条来实现数字的加减;2.通过拖动滚动条来实现元素尺寸的变化,以改变元素宽度为例;3.通过拖动滚动条来实现内容滚。需要的朋友一起来看下吧
    2016-12-12
  • WebSocket中心跳检测与断开重连机制详解

    WebSocket中心跳检测与断开重连机制详解

    心跳检测是指在WebSocket连接过程中定时向服务端发送和接收心跳消息,来确定当前连接是否是正常状态的检测机制,断开重连是指在WebSocket不正常断开连接后,进行重新连接的策略,下面我们就来看看这二者的具体实现吧
    2024-01-01
  • 当$.get返回失败后调用fail方法示例详解

    当$.get返回失败后调用fail方法示例详解

    这篇文章主要介绍了当$.get返回失败后,调用fail方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • 前端性能优化建议

    前端性能优化建议

    这篇文章主要分享了一些前端性能优化的建议,帮助大家提高页面性能,感兴趣的朋友可以了解下
    2020-09-09

最新评论