js 递归总结
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 递归总结的更多相关文章
- js递归遍历多维数组并在修改数组的key后返回新的多维数组
我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统,接口会根据用户的权限不同返回不同的菜单名称.URL等,前端要将这些菜单名称及URL动态添加到系统的左侧,这里就用到了vue-rou ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- js 递归调用
js递归调用 function fact(num) { ) { ; } else { ); } } 以下代码可导致出错: var anotherFact = fact; fact = null; al ...
- 关于js回调方法 js递归时使用方法
js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...
- Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- js 递归学习
作用:将一些复制的算法变为简单,比如:(举例子)计算数组 var a =[1,3,4,6,7,8]的长度:求 5!的值,也可以做搜索用等. //求数组的长度function len(arry){ i ...
- js递归错误
错误信息:Uncaught RangeError: Maximum call stack size exceeded 问题代码: js代码:$(function(){ selectTog ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- js递归获取html页面所有标签
js原生递归获取,直接源码 : <script> var child = document.children; var arr = [];//用来存放获取到的所有的标签 function ...
随机推荐
- Mac下使用Matplotlib无法显示中文的解决办法
参考:matplotlib图例中文乱码? - 知乎用户的回答 - 知乎 https://www.zhihu.com/question/25404709/answer/309784195 1.下载字体安 ...
- Java单体应用 - Markdown - 03.高级技巧
原文地址:http://www.work100.net/training/monolithic-markdown-advance.html 更多教程:光束云 - 免费课程 高级技巧 序号 文内章节 视 ...
- 管理2000+Docker镜像,Kolla是如何做到的
根据 DockerHub 上的数据,整个 Kolla 项目管理的 镜像有 2000 多个,这么多的镜像,是怎么定义,又是如何构建的呢? 简介 我们一直在说的 Kolla,通常情况下泛指,包括了 Kol ...
- ValidationAttribute特性的截图
- vue-cli3 axios解决跨域问题
这种错误就是跨域问题: 我百度了各种方法,最终下面这种方法解决了,直接上代码: 解决: 如果没安装axios: npm install axios -save //安装axios main.js / ...
- [HNOI2008]GT考试(kmp,dp,矩阵乘法)
[HNOI2008]GT考试(luogu) Description 求有多少个n位的数字串不包含m位的字符串(范围 n <= 1e9 n<=1e9, m <= 20m<=20) ...
- Python zmq的三种简单模式
ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高. 是一个消息处理队列库,可在多个 ...
- 拓扑排序(基于dfs+基于队列)
经典问题-Ordering Tasks dfs函数的返回值表示是否成环,若存在有向环,则不存在拓扑排序.不包含有向环的有向图称为有向无环图(DAG) 可以借助DFS完成拓扑排序,在访问完一个结点时把他 ...
- vue-cli3中引入图片的几种方式和注意事项
如果你是在数据中引入图片,他是从项目中引入的应该按第一种方式引入 如果不是在数据中引入图片,按第二种方式引入
- 七、django学习之聚合函数
七.django学习之聚合函数 如何使用 from django.db.models import Avg,Max,Min,Sum models.Book.objects.all().aggregat ...