js实现数组转树示例

 更新时间:2022年06月27日 10:12:45   作者:FBI_6720  
这篇文章主要为大家介绍了js实现数组转树示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

原生 封装工具函数 getTree

1.1 定义

-映射对象 map

数组 treeList=[]

1.2 遍历后端返回的数组 list 为 每个数组对象item 添加 children 属性 值为空数组

1.3 为映射对象 map 添加属性 并赋值key:id值 value:item

1.4 遍历数组对象list 当item.pid为空时 为一级目录 将该一级目录数组对象 添加到treeList中

1.5 通过 item.pid获取到 id 不为空时 获取数组对象 pid为01

1.6 获取 映射对象 map 获取到 属性名01 将该数组对象item 添加 到children中 并返回到treeList中

代码:

结构图:

以上就是js实现数组转树示例的详细内容,更多关于js数组转树的资料请关注脚本之家其它相关文章!

相关文章

  • javascript读取xml实现javascript分页

    javascript读取xml实现javascript分页

    这篇文章主要介绍了javascript读取xml数据对其实现javascript分页效果,大家参考使用吧
    2013-12-12
  • 微信小程序获取位置展示地图并标注信息的实例代码

    微信小程序获取位置展示地图并标注信息的实例代码

    这篇文章主要介绍了微信小程序获取位置展示地图并标注信息的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • BootStrapTable服务器分页实例解析

    BootStrapTable服务器分页实例解析

    项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页,需要的朋友可以参考下
    2016-12-12
  • JS+HTML5 Canvas实现简单的写字板功能示例

    JS+HTML5 Canvas实现简单的写字板功能示例

    这篇文章主要介绍了JS+HTML5 Canvas实现简单的写字板功能,结合实例形式分析了js结合HTML5 canvas特性的图形绘制相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • JavaScript defineProperty如何实现属性劫持

    JavaScript defineProperty如何实现属性劫持

    双向数据绑定的核心方法,主要是做数据劫持操作(监控数据变化),下面这篇文章主要给大家介绍了关于JavaScript defineProperty如何实现属性劫持的相关资料,需要的朋友可以参考下
    2021-07-07
  • javascript 获取图片颜色

    javascript 获取图片颜色

    html 5.0的canvas可以获取到图片的像素点了。这样,我们可以做很多以图片有关的操作和渲染了。当然今后也会给浏览器渲染引擎更高的要求。(YY, 什么时候html渲染引擎也支持多核和GPU呢?)
    2009-04-04
  • Clipboard.js 无需Flash的JavaScript复制粘贴库

    Clipboard.js 无需Flash的JavaScript复制粘贴库

    这篇文章主要介绍了JavaScript 内容复制(无需flash) Clipboard.js使用方法,需要的朋友可以参考下
    2015-10-10
  • 如何去除js中的json存在的转义字符\问题

    如何去除js中的json存在的转义字符\问题

    这篇文章主要介绍了如何去除js中的json存在的转义字符\问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • js闭包用法实例详解

    js闭包用法实例详解

    这篇文章主要介绍了js闭包用法,结合实例形式分析了JS闭包的概念、功能及相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • javascript实现回到顶部特效

    javascript实现回到顶部特效

    当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个“返回顶部”的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。
    2015-05-05

最新评论