js实现数组转树示例

目录
  • 原生 封装工具函数 getTree
  • 结构图:

原生 封装工具函数 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数组转树的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript平铺数组转树形结构的实现示例

    JavaScript平铺数组转树形结构的实现示例

    目录 后台丢来了1w条数据 递归方式 非递归方式 总结 后台丢来了1w条数据 千算万算,还是没有逃过,后台真的就上万条数据一次丢给前端了.好吧,好在还不是10w条.如下,后台返回的是这样的结构: const flatArr = [ { id: '001', name: '节点1' }, { id: '0011', parentId: '001', name: '节点1-1' }, { id: '00111', parentId: '0011', name: '节点1-1-1' }, { id:

  • JS实现数组随机排序的三种方法详解

    JS实现数组随机排序的三种方法详解

    目录 1.利用数组方法sort实现随机排序 2.洗牌算法实现随机排序 3.洗牌算法深入分析 全部代码 1.利用数组方法sort实现随机排序 实现随机排序方法还是很多的,用for循环是可以写的,用Lodash等三方js方法库也行.但个人以为使用sort比较方便,但是他又缺点,缺点就是不够那么的随机,我看过sort运行机制后,发现他竟然是利用一个比较器两两比较出来的. var arr = [1, 2, 3, 4, 5] arr.sort(function () { return Math.rando

  • js判断两个数组相等的5种方法实例

    目录 前言 一. toString() 二.join() 三. JSON.stringify() 四.sort() 五.filter() 总结 前言 在 js 中是不能直接用 == 或者 === 来比较两个数组是否相等,那就需要对数组的值进行比较. 下面各种方法,要根据具体情况来使用. 一. toString() 当两个数组元素类型相同,顺序相同时,直接判断是否相等,结果不相等:转化为字符串后,结果相等 [1,2,3].toString() === [1, 2, 3].toString(); /

  • JavaScript稀疏数组与孔hole示例详解

    JavaScript稀疏数组与孔hole示例详解

    目录 稀疏数组是什么 JavaScript数组天生就是稀疏数组 JavaScript数组稀疏特性带来的“怪异现象” slice会复制孔 forEach.every会跳过孔(不对孔调用回调函数) map不对孔调用回调函数,但是孔会保留 filter不对孔调用回调函数,但是孔会被过滤掉 join会将孔转化为一个空字符串进行拼接,与undefined一样 初始化无孔数组的方法 Array.apply(null, Array(n))的原理 稀疏数组是什么 在绝大多数JavaScript的实现中,数组是稀

  • JavaScript稀疏数组示例教程

    目录 前言 什么是稀疏数组? 创建带有孔洞的稀疏数组 删除元素的映射 现象 稀疏数组的快速映射(强制创建映射关系) 总结 前言 最近有空在看一本关于 JS 数据结构和算法的书,里面有提到数组,却对数组的基本概念轻轻带过,虽然用了 JS 很久但是一直忙于需求业务的实现从未停下好好回视一下这个 既熟悉又陌生的朋友,于是查阅了一些资料,尤其是密集数组和稀疏数组的区别,意犹未尽之下,写了这篇文章,以便更好地帮助理解书中的要点,稍显浅显,也有不足望各位提点. 什么是稀疏数组? 通常编程语言中(C.JAVA

  •  javascript数组中的findIndex方法 

     javascript数组中的findIndex方法 

    目录 1findIndex()简单介绍 2编辑器 3代码部分 4运行结果 5总结 1findIndex()简单介绍 findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置. 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置(注:find()返回的是元素),之后的值不会再调用执行函数.如果没有符合条件的元素返回 -1(注:find()返回的是undefined). findIndex()与find()的使用方法相同,

  • js实现数组转树示例

    js实现数组转树示例

    目录 原生 封装工具函数 getTree 结构图: 原生 封装工具函数 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

  • js 处理数组重复元素示例代码

    复制代码 代码如下: function doSz{ var kzly==["a","a","c","a","b"]; for(var i=0;i<kzly.length;i++){ var targetNode = kzly[i]; for (var j=0; j<i; j++) { if(targetNode == kzly[j]){ kzly.splice(i,1); kzlymc.spli

  • 利用js查找数组中指定元素并返回该元素的所有索引示例

    前言 这篇文章主要给大家介绍的是利用js查找数组中指定元素并返回该元素的所有索引的相关资料,文中给出了详细的示例代码,下面话不多说,来看看详细的代码示例吧. 示例代码 //在数组中查找所有出现的x,并返回一个包含匹配索引的数组 function findall(a,x){ var results=[], len=a.length, pos=0; while(pos<len){ pos=a.indexOf(x,pos); if(pos===-1){//未找到就退出循环完成搜索 break; } r

  • JS实现的合并多个数组去重算法示例

    JS实现的合并多个数组去重算法示例

    本文实例讲述了JS实现的合并多个数组去重算法.分享给大家供大家参考,具体如下: var arr1 = ['a','b']; var arr2 = ['a','c','d']; var arr3 = [1,'d',undefined,true,null]; //合并两个数组,去重 var concat_ = function(arr1,arr2){ //不要直接使用var arr = arr1,这样arr只是arr1的一个引用,两者的修改会互相影响 var arr = arr1.concat();

  • JS实现的JSON数组去重算法示例

    本文实例讲述了JS实现的JSON数组去重算法.分享给大家供大家参考,具体如下: 需求描述:去除JSON数组中paymode字段相同的项,并将paymoney累加. paylist:[{paymode:'1',payname:"现金",paymoney:"20"}, {paymode:'2',payname:"支付宝",paymoney:"50"},{paymode:'1',payname:"现金",paym

  • JS Array.from()将伪数组转换成数组的方法示例

    Array.from 方法用于将两类对象转换为真正的数组: 1.类似数组的对象,可以理解为"伪数组" 2.可遍历对象(比如字符串) 什么是伪数组? 伪数组都有一个基本的特点:必须有 length 属性. let arrayLike = { "0": "a", "1": "b", "2": "c", "length": 3 } 像上面的 arrayL

  • JS实现数组去重复值的方法示例

    JS实现数组去重复值的方法示例

    本文实例讲述了JS实现数组去重复值的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • JS实现数组的增删改查操作示例

    本文实例讲述了JS实现数组的增删改查操作.分享给大家供大家参考,具体如下: 1.给原数组中 新增 用到 push 改变原数组的长度并返回新的长度,新元素添加在原数组的末尾 <doctype> <html> <head>元素新增数组</head> <body> <div id="dem">点击会给原素组末尾新增元素个数</div> <button onclick="funct()"

  • JS实现数组删除指定元素功能示例

    JS实现数组删除指定元素功能示例

    本文实例讲述了JS实现数组删除指定元素功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS数组删除指定元素</title> </head> <body> <script> var array = [&qu

  • JS实现数组简单去重及数组根据对象中的元素去重操作示例

    本文实例讲述了JS实现数组简单去重及数组根据对象中的元素去重操作.分享给大家供大家参考,具体如下: js数组简单去重 var arr1 = [1, 2, 3, 4, 5, 6, 3, 4, 3]; function arrayUnique1(arr) { var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); ha

随机推荐