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数组转树的资料请关注脚本之家其它相关文章!

相关文章

  • 浅谈JS原生Ajax,GET和POST

    浅谈JS原生Ajax,GET和POST

    下面小编就为大家带来一篇浅谈JS原生Ajax,GET和POST。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS进阶指南之你真的掌握变量和类型了吗

    JS进阶指南之你真的掌握变量和类型了吗

    变量是存储信息的容器(JS的变量名是区分大小写的),下面这篇文章主要给大家介绍了关于JS进阶指南之变量和类型的相关资料,文章通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • JavaScript实现跟随鼠标移动的盒子

    JavaScript实现跟随鼠标移动的盒子

    这篇文章主要为大家详细介绍了JavaScript实现跟随鼠标移动的盒子,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 微信小程序实现点击返回顶层的方法

    微信小程序实现点击返回顶层的方法

    这篇文章主要为大家详细介绍了微信小程序实现点击返回顶层的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • js 模仿锚点定位的实现方法

    js 模仿锚点定位的实现方法

    下面小编就为大家带来一篇js 模仿锚点定位的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js时钟翻牌效果实现代码分享

    js时钟翻牌效果实现代码分享

    这篇文章主要介绍了javascript时钟翻牌效果的实现,效果非常酷炫,实现步骤也很简单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • js删除所有的cookie的代码

    js删除所有的cookie的代码

    有时候需要删除网站的cookies,一个一个太麻烦,这个可以批量的删除所有的cookies,需要的朋友可以参考下。
    2010-11-11
  • Javascript网页抢红包外挂实现分享

    Javascript网页抢红包外挂实现分享

    本篇文章通过一个抢红包的网页实例讲述了Javascript书写的原理以及思路,有兴趣的朋友参考学习下。
    2018-01-01
  • webpack中使用Eslint的实现

    webpack中使用Eslint的实现

    本文主要介绍了webpack中使用Eslint的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • antd Upload 文件上传的示例代码

    antd Upload 文件上传的示例代码

    这篇文章主要介绍了antd Upload 文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论