首页 > 其他分享 >js处理树形结构数据过滤

js处理树形结构数据过滤

时间:2023-09-05 11:55:08浏览次数:35  
标签:node tree 树形 js item 过滤 节点 children

最近项目经常遇到后台接口返回整个树形结构,而前端展示只需要展示部分类型的数据,需要过滤一下,所以整理了一个过滤方法。

非层级结构时过滤非常简单,只需要一层代码就够了

export function filterTree (tree) {
return tree.filter(item => item.type === 0)
}
而要做到子节点也过滤时就需要用到递归去过滤

思路梳理:循环数组,然后过滤数据,如果有子节点,子节点过滤,把子节点传给递归函数

实现:

export function filterTree (tree, arr = []) {
if (!tree.length) return []
for (let item of tree) {
// 循环数组,然后过滤数据
// 如果该条数据type不为0时,跳出本次循环
if (item.type !== 0) continue
// 如果满足条件时,用新node代替,然后把chilren清空
let node = {...item, children: []}
// 然后添加到新数组中
arr.push(node)
// 如果有子节点,调用递归函数,并把空数组传给下一个函数
// 利用引用数据类型的特性,实现浅拷贝
// 递归函数过滤时会改变这个空数组数据,从而实现层级结构过滤
if (item.children && item.children.length) {
filterTree(item.children, node.children)
}
}
return arr
}

标签:node,tree,树形,js,item,过滤,节点,children
From: https://www.cnblogs.com/csji/p/17679246.html

相关文章

  • JS 追加元素的几种办法
    JS追加元素的几种办法append(),在父级最后追加一个子元素appendTo(),将子元素追加到父级的最后prepend(),在父级最前面追加一个子元素prependTo(),将子元素追加到父级的最前面after(),在当前元素之后追加(是同级关系)before(),在当前元素之前追加(是同级关系)insertAfter(),将元素追......
  • 使用JSON.parseObject深拷贝二-复杂型拷贝
    问:如果json拷贝类型类似Page<T>这种复杂型的呢答:使用JSON的publicstatic<T>TparseObject(Stringtext,TypeReference<T>type,Feature...features)方法;代码如下:Page<EtcPassBillDataResponseVo>voPage=JSON.parseObject(JSON.toJSONString(dtoPage),new......
  • JS 获取页面尺寸
    通过JS获取页面相关的尺寸是比较常见的操作,尤其是在动态计算页面布局时,今天我们就来学习一下几个获取页面尺寸的基本方法。获取页面高度functiongetPageHeight(){varg=document,a=g.body,f=g.documentElement,d=g.compatMode=="BackCompat"?a......
  • js怎么删除数组元素多种方法
    1.根据索引删除数组元素delete数组[索引]  vararr1=["aa","bb","cc","dd"];deletearr1[2];运行之后:arr=["aa","bb",undefined,"dd"];delete  它是将内容删除为空,但是元素的个数不变2.根据元素内容直接删除数组元素splice(inde......
  • js ast 函数调用替换为值
    目标替换ob文件中形如_0x55f3('0x19',"Pg54")的代码为具体的值。consttypes=require("@babel/types");conststr_to_str={ StringLiteral(path){ const{node}=path; node.extra=null; }}var_0x4818=["wqImMT0tw6RNw5k=&quo......
  • MySQL的Json类型个人用法详解
    前言虽然MySQL很早就添加了Json类型,但是在业务开发过程中还是很少设计带这种类型的表。少不代表没有,当真正要对Json类型进行特定查询,修改,插入和优化等操作时,却感觉一下子想不起那些函数怎么使用。比如把json里的某个键和值作为SQL条件,修改某个键下的子键的值,其中可能会遇到数组形式......
  • JS中函数的上下文和上下文规则
    JS:函数的上下文、上下文规则、call和apply指定上下文JS中函数的上下文和上下文规则一、函数的上下文函数中可以使用this关键字,它表示函数的上下文函数中的this具体指代什......JS中函数的上下文和上下文规则一、函数的上下文函数中可以使用this关键字,它表示函数的上下......
  • Java对象与json的转换使用的依赖是fastjson,转换的简单案例
    2023-09-04<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version></dependency>转换的简单案例packagecom.hh.json;importcom.alibaba.fastjson......
  • Web Service Tip: JSPs Calling Web Services
    WebServiceTip:JSPsCallingWebServicesHowdoIcallaWebservicefromaJSP? Seemslikeasimplequestionbutitturnsouttherearemanyways-somequickanddirtyandothersmorecorrect. Let'snotdebatecorrectness(doyoureallywantto......
  • 针对jsapi_ticket不能频繁刷新,缓存的几种方式
    正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket。 在.NETCore中,你可以使用内置的缓存系统来管理和操作缓存数......