当前位置: 首页 > news >正文

reduce过滤递归符合条件的数据

图片展示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let newArray = [{id: 1,name: '张三1',// key: 2,children: [{id: 2,name: '李四',key: 2,children: [{id: 5,name: '李四5',key: 2,}]},]}, {id: 3,name: '张三2',key: 0,children: [{id: 4,name: '李四',key: 2,children: [{id: 5,key: 1,name: '王五'}]},{id: 5,name: '李四2',key: 22,children: [{id: 5,key: 1,name: '王五'}]}]}]const keys1 = [0]function filterTreeData (arr, values, field = 'key') {// 随机数function randomId () {const randomId = Math.random().toString(36).substring(2, 10);return randomId;}return arr.reduce((pre, cur) => {// 添加唯一标识符const newCur = { ...cur, $id: randomId() };const result = [...pre, { ...newCur }].map(item => {return {...item,$id: item.$id ? item.$id : randomId(),}}).filter(item => {// 当没有key值时,返回truereturn item?.key === undefined ? true : values.includes(item?.key)});const flag = result.findIndex(item => {return item.$id === newCur.$id})// 去除唯一标识符result.forEach(item => {delete item.$id})// 递归操作if (flag !== -1) {result[flag].children = filterTreeData(result[flag]?.children || [], values, field)}return result;}, []);}console.log(filterTreeData(newArray, keys1))</script>
</body></html>
http://www.lryc.cn/news/364480.html

相关文章:

  • Go微服务: 基于rocketmq:5.2.0搭建RocketMQ环境,以及示例参考
  • Wpf 使用 Prism 开发MyToDo应用程序
  • vue-Dialog 自定义title样式
  • 数据库主键设计
  • 小熊家务帮day13-day14 门户管理(ES搜索,Canal+MQ同步,索引同步)
  • Android8.1高通平台修改默认输入法
  • 49. 字母异位词分组
  • 负压实验室设计建设方案
  • 作文笔记10 复述故事
  • 业务安全蓝军测评标准解读—业务安全体系化
  • 关于焊点检测SJ-BIST)模块实现
  • 使用 Logback.xml 配置文件输出日志信息
  • Allegro-开店指南
  • Spring AI 第二讲 之 Chat Model API 第二节Ollama Chat
  • 服务器环境搭建
  • 数仓建模—指标体系指标拆解和选取
  • 微信小程序如何在公共组件中改变某一个页面的属性值
  • TCP/UDP的区别
  • JavaWeb1 Json+BOM+DOM+事件监听
  • DSP6657 GPIO中断学习(只支持GPIO0-15)
  • vue数字翻盘,翻转效果
  • 【简单讲解TalkingData的数据统计】
  • JMeter的基本使用
  • Oracle和Random Oracle
  • word 无法自动检测拼写
  • docker和docker-compose的安装
  • python的一种集成开发工具:PyCharm开发工具
  • 【匹配线段问题】
  • vue中$bus.$emit和$bus.$on的用法温故
  • 【JavaScript脚本宇宙】优化你的React项目:探索表单库的世界