es6过滤树形结构数组

矫情吗；* 2022-12-25 13:56 157阅读 0赞

项目中遇到一个需求是左侧树形结构有不同类型的数据，产品要求只显示某一个类型的数据，这样我就就要对从后端返回的属性数据进行递归过滤；

#### 树形结构数组如下： ####

简单一点，我就写两层树形结构！

const arrData = [
    	 	{
    		  id:'0001',
    		  name:'张三',
    		  type:'category',
    		  children:[
    		   { id:'00011',
    		    name:'麻子',
    		    type:'category'
    		    children:[]
    		    },
    		   { id:'00012',
    		     name:'张龙',
    		     type:'code'
    		     children:[]
    		    },
    		  ]
    		 },
    		 {
    		  id:'0002',
    		  name:'l李四',
    		  type:'category'
    		  children:[]
    		  },
    		 {
    		  id:'0003',
    		  name:'王二',
    		  type:'code'
    		  children:[]
    		  },
    		]

#### 写一个只去type为category的递归函数 ####

filterData (arr) {
          const newArr = arr.filter(item => item.type == 'category')
          return newArr.map(item => {
            if (item.children) {
              item.children = this.filterData (item.children)
            }
            return item
          })
        }
    const newArr = this.filterData (arrData ) //得到的是过滤后的新数据

得到的新树形数据结构如下：

newArr = [
    		 	 {
    			  id:'0001',
    			  name:'张三',
    			  type:'category',
    			  children:[
    			   { id:'00011',
    			    name:'麻子',
    			    type:'category'
    			    children:[]
    			    },
    			  ]
    			 },
    			 {
    			  id:'0002',
    			  name:'l李四',
    			  type:'category'
    			  children:[]
    			  },
    			]

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关 es6过滤树形结构数组

项目中遇到一个需求是左侧树形结构有不同类型的数据，产品要求只显示某一个类型的数据，这样我就就要对从后端返回的属性数据进行递归过滤；树形结构数组如下：简单一点，我就写

矫情吗；*/ 2022年12月25日 13:56/ 0 赞/ 158 阅读

相关 js过滤树形结构数据

使用递归遍历树形结构，根据条件过滤数据，返回过滤后的树形结构 readNodes(nodes,arr=[]) { for (let item of nod

Dear 丶/ 2022年12月23日 15:28/ 0 赞/ 313 阅读

相关 es6 filter() 数组过滤方法总结

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdu

Dear 丶/ 2022年12月03日 13:16/ 0 赞/ 301 阅读

相关 js使用filter递归过滤树形结构数组

今天遇到了这么一个问题，一个管理系统的前端使用vue，通过路由控制用户权限。由后端返回权限编码列表，前端菜单列表需要对这些权限编码进行过滤。菜单是树形结构，如果父级菜单被过滤，

男娘i/ 2022年11月12日 08:16/ 0 赞/ 98 阅读

相关 ES6数组方法

ES6数组方法以下方法添加到了Array.prototype对象上（isArray除外） indexOf 类似字符串的indexOf()方法 ![复制代码][

妖狐艹你老母/ 2022年05月29日 01:25/ 0 赞/ 244 阅读

相关 ES6 数组取值

const arr =[{ id:'1', name:'a' },{ id:'2', name:'b' }

怼烎@/ 2022年05月11日 09:14/ 0 赞/ 132 阅读

相关 es5数组拓展，Filter过滤方法

Filter方法详解： > array.filter(function(currentValue,index,arr), thisValue);该方法与forEach()类似

你的名字/ 2022年04月04日 14:54/ 0 赞/ 440 阅读

相关 ES6 数组扩展

扩展运算符|展开运算符 `...`不仅可以操作对象，也可以操作数组。 var arr1 = [1, "asd", {name:"张三"}]; var a

亦凉/ 2022年02月21日 01:21/ 0 赞/ 246 阅读

相关 ES6 数组操作

1、push() 尾端插入，返回数组长度 let arr = [1,"hello",true]; console.log(arr.push(22));//

末蓝、/ 2021年09月18日 08:32/ 0 赞/ 352 阅读

相关重学ES系列之过滤数组

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

灰太狼/ 2021年08月30日 17:08/ 0 赞/ 273 阅读