数组的递归筛选

数组递归筛选

根据一个值筛选出来通过 includes + 递归

const options = [{name: "ikun",options: [{name: "YAY11",},],},{name: "YAY",},
];function findValue(orgOptions,val) {let newArr1 = []orgOptions.forEach(item=>{if(item.options && item.options.length > 0){let children = findValue(item.options,val)let obj = {...item}if(children && children.length > 0){newArr1.push(obj)}}else{if(item.name.includes(val)){newArr1.push(item)}}})return newArr1
}
console.log(findValue(options,'YAY11'),'YAY11');第二种:并不确定哪个字段是数组,不管层级多深只要是数组里面字段与查找一致就把这一整条筛选出来
const options = [{name: "ikun",options: [{name: "ikun1",children:[{name:'ikun2',list:[{name:'YAY11'}]}]},],},{name: "YAY",},
];function findValue(orgOptions,val) {let newArr1 = []orgOptions.forEach(item=>{for(let i in item){if(Array.isArray(item[i])){let children = findValue(item[i],val)let obj = {...item}if(children && children.length > 0){newArr1.push(obj)}}else{if(item.name.includes(val)){newArr1.push(item)}}}})return newArr1
}
console.log(findValue(options,'YAY11'),'YAY11');

数组扁平化的方法

var array = [1,2,[3,4],[5,[6,7]]];
let arrList = []
function flat(array,arr){array.forEach(v=>{if(Array.isArray(v)){console.log(v,'v');flat(v,arr)}else{arr.push(v)}})return arr
}console.log(flat(array,arrList));

根据id进行分组

const orgArr = [{ id: '1', list: [{oid:'100001'}] },{ id: '2', list: [{oid:'100002'}] },{ id: '1', list: [{oid:'100003'}] },{ id: '1', list: [{oid:'100004'}] },]let orgtemp = []let mapid = []orgArr.forEach(v=>{if(mapid.indexOf(v.id) < 0){orgtemp.push({id:v.id,list:v.list})mapid.push(v.id)}else{orgtemp.map(t=>{if(t.id == v.id){v.list.map(n=>{t.list.push(n)})}})}})console.log(orgtemp,'orgtemp');处理后:[{id:1list:[{oid: '100001'},{oid: '100003'},{oid: '100004'},]},{id:2list:[{oid: '100002'}]}]

在这里插入图片描述

将 id 相同的数据分在同一组

  let dataArr = [{ id: 1, value: "值1" },{ id: 2, value: "值2" },{ id: 3, value: "值3" },{ id: 1, value: "值4" },{ id: 2, value: "值5" },
];
转化成如下
// [
//   {
//     data: [
//       { id: 1, value: "值1" },
//       { id: 1, value: "值4" },
//     ],
//   },
//   {
//     data:[
//       { id: 2, value: "值2" },
//		 { id: 2, value: "值5" },
//     ]
//   },
//   {
//     data:[
//       { id: 3, value: "值3" }
//     ]
//   }
// ];
let orgtemp = [];
let mapid = [];
dataArr.forEach((v) => {if (mapid.indexOf(v.id) < 0) {let obj = {data:[]};obj.data.push(v);mapid.push(v.id);orgtemp.push(obj);} else {orgtemp.map((t) => {t.data.map(n=>{if (n.id == v.id) {t.data.push(v)}})});}
});
console.log(orgtemp, "orgtemp");

在这里插入图片描述

将数组分为 n 个一组

const list1 = [{ id: 1, name: '宰父谷枫' },{ id: 2, name: '买孟' },{ id: 3, name: '疏学林' },{ id: 4, name: '次如风' },{ id: 5, name: '巧紫雪' }
];function datumGroup(list,n=4){let newArray = []for(let i=0,j=list.length;i<j;i+=n){newArray.push(list.slice(i,i+n))}return newArray
}
console.log(datumGroup(list1,2));

数组reduce方法根据数组中的某一字段分类,得到一个新数组

let arrya=[{name:'小明',class:'18'},{name:'小红',class:'18'},{name:'小王',class:'19'},
];const list2 = arrya.reduce((pre,cur,index)=>{// if(a[b.old]){//   console.log(a[b.old],'a[b.old]');// }let obj = {}if(index == 0){obj.class = cur.classobj.detail = [cur]pre.push(obj)}else{const i = pre.findIndex(item => item.class == cur.class)if(i > -1){pre[i].detail.push(cur)}else{obj.class = cur.classobj.detail = [cur]pre.push(obj)}}return pre
},[])console.log(list2,'list2');

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/5054.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASUS华硕无双15_K3502ZA工厂模式原装Win11恢复原厂OEM预装系统 带ASUS Recovey恢复功能

ASUS华硕无双15笔记本电脑12代Vivobook_ASUSLaptop K3502ZA出厂Windows11系统工厂包 自带恢复功能、所有驱动、出厂主题壁纸LOGO、Office办公软件、MyASUS等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;HDI,SWP,OFS,EDN,KIT,TLK多个底包 文件大小&…

leetcode 40. 组合总和 II

2023.7.19 此题为 组合总和 的升级版。本题的特殊之处在于 给定的candidates数组只一个无序且包含重复元素的数组&#xff0c;并且最终的解集不能包含重复的组合。 所以本题的关键在于去重。那么&#xff0c;此类题的去重分为两种&#xff0c;一种是解集内部去重&#xff0c;灵…

Spring Boot学习

Spring Boot 配置 同一目录下配置文件优先级&#xff1a;.properties > .yml > .yaml 错误&#xff1a;org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input length 1 Caused by: java.nio.charset.MalformedInputException: Inp…

VUE- 选取本地图片,自定义裁切图片比例 vue-cropper

裁切图片&#xff0c;按照比例裁切&#xff0c;分步骤 1&#xff1a;el-upload选择本地图片&#xff08;分选择本地和上传两步骤&#xff09; 2&#xff1a;在on-change回调方法中拿到el-upload选中的图片&#xff0c;显示在vueCropper上&#xff08;&#xff09;。 2.1&…

查看IP地址方法(电脑IP地址方法)

查看IP地址方法 如何识别win7还是win10系统&#xff1f; &#xff08;一&#xff09;Win7系统电脑导航栏如下&#xff1a; &#xff08;二&#xff09;Win10系统电脑导航栏如下&#xff1a; 一、win7系统查看IP地址 方法一&#xff1a;查看网络设置 点击电脑导航栏最右下…

react和vue2/3父子组件的双向绑定(sync、emit、v-model)

目录 Vue .sync&#xff08;2.3.0&#xff09; $emit &#xff08;2.3后&#xff09; 自定义组件的 v-model 2.2.0 v-modelemits(3.0取消了.sync) React 父组件回调函数 相关基础 框架 MVC &#xff08;Model View Controller&#xff09;/MVP&#xff08;Model View…

STM32 Proteus仿真可设置时间红绿灯-0075

STM32 Proteus仿真可设置时间红绿灯-0075 Proteus仿真小实验&#xff1a; STM32 Proteus仿真可设置时间红绿灯-0075 功能&#xff1a; 硬件组成&#xff1a;STM32F103C6单片机 74HC595串入并出芯片4个2位数码管显示十字路口红绿灯时间多个按键 1.包含机动车指示灯(红、黄、…

windows安装mysql8.0.23版本成功示例-免安装

windows安装mysql8.0.23版本成功示例 一.通过mysql-installer-*.msi安装包的方式1.安装准备1.1 官网下载地址1.2 选择合适的版本点击下载 2.安装mysql 二.通过mysql-8.0.23-winx64.zip免安装方式-推荐1.安装准备1.1 下载官网压缩包1.2 解压后配置文件my.ini信息1.3 配置my.ini …

STM32MP157驱动开发——按键驱动(查询方式)

文章目录 概述APP 读取按键的 4 种方法查询方式休眠-唤醒方式poll 方式异步通知方式 查询方式的按键驱动程序&#xff08;框架&#xff09;按键驱动编写思路board_xxx.cbutton_drv.cbutton_drv.hbutton_test.cMakefile编译测试 查询方式的按键驱动程序(stm32mp157)board_stm32m…

浅谈测试工程化 - 以并发自动化框架为例

目录 前言 测试工程化 一、测试需求分析 二、测试设计 三、测试实现和落地 四、测试维护 扩展 前言 测试工程化是指将软件测试过程中的各个环节进行自动化和标准化&#xff0c;以提高测试效率、质量和可持续性。在测试工程化中&#xff0c;使用并发自动化框架是一个重要…

docker容器引擎(一)

docker 一、docker的理论部分docker的概述容器受欢迎的原因容器与虚拟机的区别docker核心概念 二、安装docker三、docker镜像操作四、docker容器操作 一、docker的理论部分 docker的概述 一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源再Linux容…

PDF在线转PPT,不用下载软件网页在线即可转换!

PDF是我们经常在办公中使用的文件格式&#xff0c;它的兼容性和安全性使得它成为了传输文件的首选。而PPT则是我们常用的演示文稿格式&#xff0c;无论是在学校还是在公司&#xff0c;我们都需要制作演讲和汇报的PPT文件。由于这两种文件格式的重要性&#xff0c;我们经常需要进…

1.13 通过aop日志监控service执行时间

步骤1&#xff1a;添加aop依赖包 <!-- aop切面 依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>步骤2&#xff1a;创建AOP日记监控记录切面类 …

CentOS目录详解

在centos中&#xff0c;最顶层的目录称作根目录&#xff0c; 用/表示。/目录下用户可以再创建目录&#xff0c;但是有一些目录随着系统创建就已经存在&#xff0c;接下来重点介绍几个常用目录。 /bin&#xff08;binary&#xff09;包含了许多所有用户都可以访问的可执行文件&a…

HTML input text 常用事件

前言 用于记录开发中常用到的&#xff0c;快捷开发 简单实例 <input type"text" name"noSecretKeyJson" maxlength"200" />常用事件 oninput &#xff08;在用户输入时触发&#xff09;及案例 案例一&#xff1a;限制只允许输入数字…

element-ui select数据回显显示数字的问题 el-select校验失效出现阿拉伯数字问题

初始化参数 return {fields: [{"title":"景区","id":0},{"title":"酒店","id":1}],evaluates: [{"title":"好评","id":0},{"title":"中评","id":1…

Linux查看机器内存空间

执行 fdisk命令查看磁盘空间 fdisk -l更多方法参考&#xff1a; Linux检查磁盘空间

datatables.editor 2.2 for PHP/JS/NodeJS Crack

使用数据表编辑器在几分钟内创建自定义、完全可编辑的表 编辑器添加了三种编辑模式&#xff0c;以适应任何类型的应用程序 新增功能 编辑 删除 搜索&#xff1a; 名字位置办公室开始日期工资名字位置办公室开始日期工资佐藤爱里会计东京2008-11-28$162&#xff0c;700安吉莉卡拉…

【数据结构】图解八大排序(下)

文章目录 一、前言二、快速排序1. hoare 版2. 挖坑法3. 前后指针法4. 快排的非递归实现5. 时空复杂度分析 三、归并排序1. 递归实现2. 非递归实现 四、计数排序 一、前言 在上一篇文章中&#xff0c;我们已经学习了五种排序算法&#xff0c;还没看过的小伙伴可以去看一下&…

Redis数据结构 — Listpack

目录 listpack 结构 listpack 节点结构 quicklist 虽然通过控制 quicklistNode 结构里的压缩列表的大小或者元素个数&#xff0c;来减少连锁更新带来的性能影响&#xff0c;但是并没有完全解决连锁更新的问题。 于是&#xff0c;Redis 在 5.0 新设计一个数据结构叫 listpack…