数组的递归筛选

数组递归筛选

根据一个值筛选出来通过 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:1
	 	list:[
	 		{oid: '100001'},
		    {oid: '100003'},
			{oid: '100004'},
	 	]
	 },
	  {
	 	id:2
	 	list:[
	 		 {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.class
    obj.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.class
      obj.detail = [cur]
      pre.push(obj)
    }
  }
  return pre
},[])

console.log(list2,'list2');

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【windows测试通过】关于Godot导入外部音频文件的问题

file.open(filepath, file.READ) var buffer file.get_buffer(file.get_len()) #put data into audiostreamsample var stream AudioStreamSample.new() stream.data buffer 代码给出&#xff0c;还没有测试过。(godot3.2测试未通过&#xff09; 在运行时轻松加载外部音频…

ROS:动态参数

目录 一、前言二、概念三、作用四、实际用例4.1需求4.2客户端4.2.1流程4.2.2新建功能包4.2.3添加.cfg文件4.2.4配置 CMakeLists.txt4.2.5编译 4.3服务端(C)4.3.1流程4.3.2vscode配置4.3.3服务器代码实现4.3.4编译配置文件4.3.5执行 4.4服务端(Python)4.4.1流程4.4.2vscode配置4…

Kakfa - 多副本架构

文章目录 基本架构Kafka 多副本架构概念优点缺点 图解多副本架构小结 基本架构 Kafka 多副本架构 概念 Kafka 是一个高性能、分布式的消息系统&#xff0c;被广泛应用于各种场景中。在 Kafka 中&#xff0c;多副本架构是保证数据可靠性的重要手段之一。 多副本架构指的是将同…

微信小程序中常见组件的使用

文章目录 微信小程序中常见组件的使用视图组件viewscroll-viewswipermovable-area 基础组件icontextrich-textprogress 表单组件buttoncheckbox、checkbox-grouplabelforminputpicker单列选择器多列选择器时间选择器&日期选择器&地区选择器 picker-viewradiosliderswit…

【protobuf】socket.io序列化和反序列化

1.背景 后台利用socket.io发送websocket消息&#xff0c;加密用到protobuf 2.反序列化时遇到问题 Traceback (most recent call last): File "D:/locust/Nigeria/test3.py", line 40, in <module> play.ParseFromString(decode_spin_str) google.proto…

Java将获取的参数,图片以及pdf文件放入到word文档指定位置

首先引入的依赖 <!-- poi库 --> <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency><dependency><groupId>org.apache.poi</groupId&…

【hadoop】HDFS

HDFS 操作HDFSWeb Console 网页工具操作NameNode操作SecondaryNameNode 命令行Java API HDFS的原理解析数据上传的过程数据下载的过程 HDFS的高级特性回收站配额Quota名称配额空间配额 快照Snapshot安全模式 SafeMode权限管理&#xff1a;类似LinuxHDFS的集群 HDFS的底层原理&a…

UART串口通信协议

一、串行通信 串行通信分为两种方式&#xff1a;同步串行通信和异步串行通信。 同步串行通信需要通信双方在同一时钟的控制下&#xff0c;同步传输数据。 异步串行通信是指通信双方使用各自的时钟控制数据的发送和接收过程。 二、UART 通用异步收发传输器&#xff08;Unive…

基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程

首先前端发起HTTP请求之后&#xff0c;后端返回一个Excel输出流&#xff0c;然后前端用Blob类型接收数据&#xff0c;并且解析响应头数据以及提取源文件名&#xff0c;最后用a标签完成下载。 一、后端代码 &#xff08;1&#xff09;导入阿里巴巴的EasyExcel依赖&#xff08;…

云计算的学习(五)

五、虚拟化特性介绍 1.集群特性 1.1HA HA&#xff08;Hith Available&#xff0c;高可用特性)&#xff0c;克服单台主机的局限性&#xff0c;当一台服务器损坏&#xff0c;运行在损坏服务器上的虚拟机会自动迁移到其他运行状态正常的服务器上&#xff0c;整个迁移过程用户无感…

基于ssm的社区生活超市的设计与实现

博主介绍&#xff1a;专注于Java技术领域和毕业项目实战。专注于计算机毕设开发、定制、文档编写指导等&#xff0c;对软件开发具有浓厚的兴趣&#xff0c;工作之余喜欢钻研技术&#xff0c;关注IT技术的发展趋势&#xff0c;感谢大家的关注与支持。 技术交流和部署相关看文章…

设计模式-外观模式在Java中的使用示例

场景 外观模式 外观模式是一种使用频率非常高的结构型设计模式&#xff0c;它通过引入一个外观角色来简化客户端与子系统 之间的交互&#xff0c;为复杂的子系统调用提供一个统一的入口&#xff0c;降低子系统与客户端的耦合度&#xff0c;且客户端调用非常方便。 示例 自…

让小程序动起来-轮播图的两种方式--【浅入深出系列003】

浅入深出系列总目录在000集 如何0元学微信小程序–【浅入深出系列000】 文章目录 本系列校训学习资源的选择啥是轮播图轮播图的关键代码最常见的轮播图代码便于理解的轮播代码两种轮播代码的比较 实际操练第一步&#xff0c;就是找到文件。第二步&#xff0c;先改动一下最显眼…

HTTP1.1、HTTPS、HTTP2.0 、HTTP3.0

HTTP1.1 优点&#xff1a; 整体方面&#xff1a;简单、灵活和易于扩展、应用广泛和跨平台 性能方面&#xff1a;长连接、管道网络传输解决请求队头阻塞&#xff08;没有使用&#xff09; 缺点&#xff1a; 安全方面&#xff1a;无状态、明文窃听、伪装、篡改 性能方面&am…

基于jeecg-boot的nbcio-boot亿事达企业管理平台发布

目前这个演示系统与代码都同步&#xff0c;以后也尽量保持同步。 更多功能看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/nbcio-boot 前端代码&#xff1a;https://gitee.com/nbacheng/nbcio-vue.git 在线演示&#xff08;包括H5&#xff…

Databend 开源周报第 102 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 为指定列创建 B…

MongoDB

MongoDB概述 MongoDB是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。 它支持的数据结构非…

VMware安装Ubuntu(VMware版本17-Ubuntu版本16.0)

VMware安装Ubuntu&#xff08;VMware版本17-Ubuntu版本16.0&#xff09; 一&#xff0c;VMware虚拟机下载官网点击https://customerconnect.vmware.com/cn/downloads/info/slug/desktop_end_user_computing/vmware_workstation_pro/17_0 二&#xff0c;Ubuntu乌班图下载官网点…

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面 虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了&#xff0c;但是WIN7自带的浏览器IE8还是需要支持的。 本文这个方法主要的优点&#xff0c;个人觉得就是准备少&#xff0c;不需要上网寻找大量的图片做素材&…

Redis高级篇(一)

分布式缓存 -- 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; 1.Redis持久化 Redis有两种持久化方案&#xff1a;RDB持久化、AOF持久化 1.1.RDB持久化 什么是RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&am…
最新文章