我们常常在做后台管理系统的时候 需要对数据进行组装成一个树装结构,这里特地将此方法进行封装:

let data = [
{ id: , text: 't11', parentId: },
{ id: , text: 't11', parentId: },
{ id: , text: 't11', parentId: },
{ id: , text: 't11', parentId: },
{ id: , text: 't11', parentId: },
{ id: , text: 't11', parentId: }
]
function treeData (data, id, parentId, childName) {
let cloneData = JSON.parse(JSON.stringify(data))
return cloneData.filter((father) => {
let newArr = cloneData.filter((child) => {
return father[id] === child[parentId]
})
father[childName] = newArr
return father[parentId] ===
})
}
let msg = treeData(data, 'id', 'parentId', 'childaaa')
console.log(msg)

JS基石之-----数组转换为树结构函数的更多相关文章

  1. js将伪数组转换为标准数组的多种方法

    在js中,数组是特殊的对象,凡是对象有的性质,数组都有,数组表示有序数据的集合,而对象表示无序数据的集合. 那伪数组是什么呢,当然它也是对象,伪数组一般具有以下特点: 按索引方式存储数据: 具有len ...

  2. js中将类数组转换为数组的几种方法

    1.slice方法 最经典的方法,使用Array的slice方法,此方法如果不传参数的话会返回原数组的一个拷贝,因此可以用此方法转换类数组到数组: // 创建一个类数组对象 var alo = {0: ...

  3. JS 封装一个对数组去重的函数

    var zz = [1,2,3,5,5,7,8,6,6]; var se = []; d(se); function d(attr){ for(var i = 1;i<zz.length;i++ ...

  4. JavaScript的作用;JS常见的三种对话框;==和===的区别;函数内部参数数组arguments在函数内部打印实参;JS的误区:没有块级作用域

    JS:客户端(浏览器)脚本语言 弱类型 基于原型 事件驱动 不需要编译(直接运行)   JS的作用:表单验证,减轻服务端的压力 添加页面动画效果  动态更改页面内容  Ajax网络请求 (一)常见的对 ...

  5. JS: 数组的循环函数

    JS 数组相关的循环函数,用得挺多,所以有些坑还是要去踩一下,先来看一道面试题. 注意:下面提到的不改变原数组仅针对基本数据类型. 面试题 模拟实现数组的 map 函数. 心中有答案了吗?我的答案放在 ...

  6. JQuery/JS插件 数组转换为Table

    //数组 转换为 table var arr = [{ "D_AlarmValue": 7.00, "D_Code": "002", &qu ...

  7. js数组的splice函数

    一直没搞懂数组的splice函数,今天稍微测试了一下,了解了它的功能,在这里记录一下 1.测试 测试① var a = [1,2,3]; console.info(a.splice(1,1)); co ...

  8. js一维数组转换为二维数组

    function arrTrans(num, arr) { // 一维数组转换为二维数组 const iconsArr = []; // 声明数组 arr.forEach((item, index) ...

  9. JS Jquery去除数组重复元素

    js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...

随机推荐

  1. python cookie登录DVWA,phpstudy搭建DVWA参考https://www.jianshu.com/p/97d874548300

    import requestsheader={"User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleW ...

  2. P4677 山区建小学|区间dp

    P4677 山区建小学 题目描述 政府在某山区修建了一条道路,恰好穿越总共nn个村庄的每个村庄一次,没有回路或交叉,任意两个村庄只能通过这条路来往.已知任意两个相邻的村庄之间的距离为di 为了提高山区 ...

  3. 201871010121-王方-《面向对象(java)程序设计对象》第十周学习总结

    王方第九周Java实验总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  4. django学习-管理界面、视图

    django管理界面 设计背景 为你的员工或客户生成一个用户添加,修改和删除内容的后台是一项缺乏创造性和乏味的工作.因此,django全自动地根据模型创建后台界面. django产生于一个公众页面和内 ...

  5. 微信小程序单向数据流解决

    1. 小程序中没有vue中v-model一样的双向数据机制,并且小程序也不像vue那样的进行 实时的数据驱动视图. 小程序页面数据加载完成后再去改变data中的数据页面是 不会有变化的. 2. 解决: ...

  6. vijos2051 SDOI2019 快速查询

    题目链接 吐槽 竟然让\(nlog\)的做法卡过去了.. 思路 因为\(1 \le q \le 10^5\),所以可以先对每个标准操作,所操作的位置进行重标号.这样所有的下标都是在\(10^5\)以内 ...

  7. 【转】spring的AOP原理,使用场景是什么?

    什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入 ...

  8. 递归函数详解——VS调试教你理解透彻递归

    #include <stdio.h> #include <stdlib.h> int recursion(int); ; int main(void) { recursion( ...

  9. it's over | 2019 CSP-S 第一轮认证

    不知道自己有没有凉,毕竟我们省这么弱(据说有的省80都悬... 其实这几天对初赛基本没什么感觉,可能是没给自己多大压力吧,倒是班上的一群同学似乎比我们还着急,我们的数学课代表兼数竞大佬特意给我画了吉祥 ...

  10. mac 下使用shell 命令 jq 解析json

    官网 https://stedolan.github.io/jq/download/ 安装 brew install jq 创建json文件,file.json { , "msg" ...