所用测试数据:

 1 const data = [
2 {
3 "area_id": 5,
4 "name": "广东省",
5 "parent_id": 0,
6 },
7 {
8 "area_id": 6,
9 "name": "广州市",
10 "parent_id": 5,
11 },
12 {
13 "area_id": 7,
14 "name": "深圳市",
15 "parent_id": 5,
16 },
17 {
18 "area_id": 9,
19 "name": "昌平区",
20 "parent_id": 4,
21 },
22 {
23 "area_id": 4,
24 "name": "北京市",
25 "parent_id": 3,
26 },
27 {
28 "area_id": 3,
29 "name": "北京",
30 "parent_id": 0,
31 },
32 {
33 "area_id": 2,
34 "name": "测试子地区",
35 "parent_id": 1,
36 },
37 {
38 "area_id": 1,
39 "name": "测试地区",
40 "parent_id": 0,
41 }
42 ]

递归实现无限级数据:

 1 function toTreeData(data,pid){
2 function tree(id) {
3 let arr = []
4 data.filter(item => {
5 return item.parent_id === id;
6 }).forEach(item => {
7 arr.push({
8 area_id: item.area_id,
9 label: item.name,
10 children: tree(item.area_id)
11 })
12 })
13 return arr.length>0?arr:""
14 }
15 return tree(pid) // 第一级节点的父id,是null或者0,视情况传入
16 }
17 var tmp=toTreeData(data,0);
18 console.log(tmp);
对象的方式实现无限级数据维护
 1 function setTreeData(arr) {
2 // 删除所有 children,以防止多次调用
3 arr.forEach(function (item) {
4 delete item.children;
5 });
6 let map = {}; // 构建map
7 arr.forEach(i => {
8 map[i.area_id] = i; // 构建以area_id为键 当前数据为值
9 });
10
11 let treeData = [];
12 arr.forEach(child => {
13 const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中
14
15 if (mapItem) { // 存在则表示当前数据不是最顶层数据
16
17 // 注意: 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变,踩坑点
18 (mapItem.children || ( mapItem.children = [] )).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
19 } else { // 不存在则是组顶层数据
20 treeData.push(child);
21 }
22 });
23
24 return treeData;
25 };

总结:递归其实遇到数据格式类似且嵌套的时候会使用到

JS的有关递归的知识点(数据无限级联的实现)的更多相关文章

  1. JS实现-页面数据无限加载

    在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...

  2. 【整理】iview Tree数据格式问题,无限递归树处理数据

    iview Tree数据格式问题,无限递归树处理数据 https://juejin.im/post/5b51a8a4e51d455d6825be20

  3. Python--递归函数实现:多维嵌套字典数据无限遍历

    原创:多层嵌套字典无限遍历,实现当value值以特殊字符$开头,并且等于某项值时,用随机函数替换该参数 """处理前的字典{'patient': {'avatarPic' ...

  4. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  5. <经验杂谈>介绍Js简单的递归排列组合

    最近在开发SKU模块的时候,遇到这样一个需求,某种商品有N(用未知数N来表示是因为规格的数组由用户制定且随时可以编辑的,所以对程序来说,它是一个未知数)类规格,每一类规格又有M个规格值,各种规格值的组 ...

  6. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  7. 关于js渲染网页时爬取数据的思路和全过程(附源码)

    于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...

  8. [转]JS判断字符串是否为json数据

    原文地址:https://blog.csdn.net/qq_26400953/article/details/77411520 这周碰到了很多问题,尽量把遇到的问题都记录下来. JS判断字符串是否为j ...

  9. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  10. js怎样得出数组中某个数据最大连续出现的次数

     1:js怎样得出数组中某个数据最大连续出现的次数 var test=[1,2,3,3,2,2,2,3,3,3,3,5,3,3,3,3,3] ;    var j  = 0 ;    var max  ...

随机推荐

  1. 注意看,她叫小美,在地址栏输入URL地址后发生了什么?

    注意看,这个用户叫小美,他在地址栏输入了一串URL地址,然后竟然发生了不可思议的事情! 01.输入URL发生了什么? 从输入URL开始,到页面呈现出来,简单来说分为四个步骤: ① 建立连接:建立与服务 ...

  2. 基于 Traefik 如何实现 path 末尾自动加斜杠?

    前言 Traefik 是一个现代的 HTTP 反向代理和负载均衡器,使部署微服务变得容易. Traefik 可以与现有的多种基础设施组件(Docker.Swarm 模式.Kubernetes.Mara ...

  3. python之路54 forms组件 渲染 展示 参数补充 modelform组件 django中间件

    forms组件渲染标签 <p>forms组件渲染标签的方式1(封装程度高 扩展性差 主要用于本地测试):</p> {# {{ form_obj.as_p }}#} {# {{ ...

  4. [Leetcode] 寻找数组的中心索引

    题目 代码 class Solution { public: int pivotIndex(vector<int>& nums) { int right=0; for(auto i ...

  5. [cocos2d-x]关于动画

    声明一下:看见这篇文章总结的已经非常好了,没必要再去自己到处东翻西找了,链接:http://shahdza.blog.51cto.com/2410787/1546998 [唠叨] 基本动画制作需要用到 ...

  6. 数字IC设计流程

    数字IC设计流程 简单介绍数字IC设计流程

  7. webpack 中 loader 和 plugin 的区别

    通俗点讲loader是转换,plugin是执行比转换更复杂的任务,比如合并压缩等 loader:让webpack能够处理非js文件,然后你就可以利用 webpack 的打包能力,对它们进行处理. 例如 ...

  8. 阅读B2B使用手册随感

    EDI 协议中最重要的协议之一AS2协议,几乎成为对安全性要求比较高的企业.监管机构的首选.在零售.物流.医药等行业,EDI都有广泛应用.据我所知,在医药行业,几乎全球重要的监管机构都在使用EDI, ...

  9. 【多线程】交替输出abc

    package com.xf; public class WaitNotify { // 等待标记 private int flag; // 循环次数 private final int loopNu ...

  10. 城市路(Dijkstra)

    这道题目需要用到 Dijkstra plus 版(堆优化) 模板还是一样就是有几个点值得注意 1.这里用的是优先队列,原版需要搜出最小,并且没用过的点,省时间就剩在这里用小根堆就可以完美解决这个问题. ...