1.根据子id 递归查找所有父级 id  主要用于vue  element 中 Cascader 级联选择器展示 在编辑中回显默认展示

tree 数据

var arr = [{
"label": "文件夹",
"parentId": null,
"id": "0",
"children": [{
"label": "文件夹1",
"parentId": "0",
"id": "1",
"children": [{
"label": "文件夹1-1",
"parentId": "1",
"id": "1.1",
"children": null
},
{
"label": "文件夹1-2",
"parentId": "1",
"id": "1.2",
"children": null
},
{
"label": "文件夹1-3",
"parentId": "1",
"id": "1.3",
"children": [{
"label": "文件夹1-3-1",
"parentId": "1.3",
"id": "1.3.1",
"children": [{
"label": "文件夹1-3-1-1",
"parentId": "1.3.1",
"id": "1.3.1.1",
"children": null
}]
},
{
"label": "文件夹1-3-2",
"parentId": "1.3",
"id": "1.3.2",
"children": null
},
{
"label": "文件夹1-3-3",
"parentId": "1.3",
"id": "1.3.3",
"children": null
}
]
}
]
},
{
"label": "文件夹2",
"parentId": "0",
"id": "2",
"children": [{
"label": "文件夹2-1",
"parentId": "2",
"id": "2.1",
"children": null
}]
},
{
"label": "文件夹3",
"parentId": "0",
"id": "3",
"children": null
} ]
}];

递归查找

//递归找父级id
getParentIds(treeData, nodeId) {
                var arrRes = [];
                if(treeData.length == 0) {
                    if(!!nodeId) {
                        arrRes.unshift(nodeId);
                    }
                    return arrRes;
                }
                let rev = (data, nodeId) => {
                    for(var i = 0, length = data.length; i < length; i++) {
                        let node = data[i];
                        if(node.id == nodeId) {
                            arrRes.unshift(nodeId);
                            rev(treeData, node.parentId);
                            break;
                        } else {
                            if(!!node.children) {
                                rev(node.children, nodeId);
                            }
                        }
                    }
                    return arrRes;
                };
                arrRes = rev(treeData, nodeId);
                return arrRes;
            },

结果

console.log(getParentIds(arr,'1.3.1'))  //["0", "1", "1.3", "1.3.1"]

2.  删除children:[] 存在且为空的情况   主要用于vue  element 中 Cascader 级联选择器展示

var tree = [{
value: 'ziyuan',
label: '资源',
children: [
{
value: 'axure',
label: 'Axure Components',
children: []
},
{
value: 'sketch',
label: 'Sketch Templates',
children: []
},
{
value: 'jiaohu',
label: '组件交互文档',
children: []
}
]
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'layout',
label: 'Layout 布局',
children: []
},
{
value: 'icon',
label: 'Icon 图标',
children: []
} ]
}
]; function render(arr) {
for(let i = 0; i < arr.length; i++) {
if(arr[i] && arr[i].children.length == 0) {
delete arr[i].children
}
if(arr[i].children && arr[i].children.length > 0) {
render(arr[i].children)
}
}
return arr
} console.log(render(tree))
//打印如下:
已经删除空的children

js 递归总结的更多相关文章

  1. js递归遍历多维数组并在修改数组的key后返回新的多维数组

    我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统,接口会根据用户的权限不同返回不同的菜单名称.URL等,前端要将这些菜单名称及URL动态添加到系统的左侧,这里就用到了vue-rou ...

  2. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  3. js 递归调用

    js递归调用 function fact(num) { ) { ; } else { ); } } 以下代码可导致出错: var anotherFact = fact; fact = null; al ...

  4. 关于js回调方法 js递归时使用方法

    js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...

  5. Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  6. js 递归学习

    作用:将一些复制的算法变为简单,比如:(举例子)计算数组 var  a =[1,3,4,6,7,8]的长度:求 5!的值,也可以做搜索用等. //求数组的长度function len(arry){ i ...

  7. js递归错误

    错误信息:Uncaught RangeError: Maximum call stack size exceeded 问题代码: js代码:$(function(){        selectTog ...

  8. 用Vue.js递归组件构建一个可折叠的树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', {   template: `<!--Invoking myself! ...

  9. Vue.js递归组件实现动态树形菜单

    使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...

  10. js递归获取html页面所有标签

    js原生递归获取,直接源码 : <script> var child = document.children; var arr = [];//用来存放获取到的所有的标签 function ...

随机推荐

  1. Mac下使用Matplotlib无法显示中文的解决办法

    参考:matplotlib图例中文乱码? - 知乎用户的回答 - 知乎 https://www.zhihu.com/question/25404709/answer/309784195 1.下载字体安 ...

  2. Java单体应用 - Markdown - 03.高级技巧

    原文地址:http://www.work100.net/training/monolithic-markdown-advance.html 更多教程:光束云 - 免费课程 高级技巧 序号 文内章节 视 ...

  3. 管理2000+Docker镜像,Kolla是如何做到的

    根据 DockerHub 上的数据,整个 Kolla 项目管理的 镜像有 2000 多个,这么多的镜像,是怎么定义,又是如何构建的呢? 简介 我们一直在说的 Kolla,通常情况下泛指,包括了 Kol ...

  4. ValidationAttribute特性的截图

  5. vue-cli3 axios解决跨域问题

    这种错误就是跨域问题: 我百度了各种方法,最终下面这种方法解决了,直接上代码:  解决: 如果没安装axios: npm install axios -save //安装axios main.js / ...

  6. [HNOI2008]GT考试(kmp,dp,矩阵乘法)

    [HNOI2008]GT考试(luogu) Description 求有多少个n位的数字串不包含m位的字符串(范围 n <= 1e9 n<=1e9, m <= 20m<=20) ...

  7. Python zmq的三种简单模式

    ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高. 是一个消息处理队列库,可在多个 ...

  8. 拓扑排序(基于dfs+基于队列)

    经典问题-Ordering Tasks dfs函数的返回值表示是否成环,若存在有向环,则不存在拓扑排序.不包含有向环的有向图称为有向无环图(DAG) 可以借助DFS完成拓扑排序,在访问完一个结点时把他 ...

  9. vue-cli3中引入图片的几种方式和注意事项

    如果你是在数据中引入图片,他是从项目中引入的应该按第一种方式引入 如果不是在数据中引入图片,按第二种方式引入

  10. 七、django学习之聚合函数

    七.django学习之聚合函数 如何使用 from django.db.models import Avg,Max,Min,Sum models.Book.objects.all().aggregat ...