js filter,every,includes 过滤数组

背景:

     页面:在项目中遇到的,前端页面显示为,顶部是下拉搜索条件,下面是一个表格;

     数据:接口请求一次性拿到所有:搜索条件里的下拉选项和表格中的数据;

     现状:需要前端在搜索条件时,筛选表格数据展示,在前端进行筛选;

    为什么不在后端进行筛选?

    答:在某个页面中,接口已经把所有进行数据都返回前端展示了,现在的页面只是多了筛选查看,后端不想再提供接口,让前端还是调用之前的接口进行处理。

  案例一

  let arr = [{type: 'uddaas,xiao',name: '红色,小',},{type: 'ffoop,da',name: '黄色,大',},{type: 'hhhugd,da',name: '绿色,大',},]console.log('原始数据:', arr)let str1 = ['ffoop','da']

   先过滤,再把指定字符串转换为数组,再通过数组比对,返回true或false,查找到对应的数据;

  let results1 = arr.filter( (v) => {// filter过滤数组// 字符串转换数组let typesId = v.type.split(',') return str1.every((e) => {// every查找符合的元素// includes判断数组是否包含指定的值,有则返回true,否则返回falsereturn typesId.includes(e)})})console.log('results1:',results1)
//     {
//     "type": "ffoop,da",
//     "name": "黄色,大"
// }

    案例二
   

 let arr1 = [12,13,14,15,16]let iniArr = []let arr2 = [1000,2000,3000]let obj1 = [{arr: [1000,2000,3000],title: '数字信息',},{arr: [1100,2100,3100],title: '数字信息1',},{arr: [1200,2200,3200],title: '数字信息2',},]


     通过filter过滤,在过滤中使用every查找,并通过includes验证是否有符合的数据,有则返回true,否则返回false
  

  let filterObj = obj1.filter((v1) => {return iniArr.every((e1) => {return v1.arr.includes(e1)})})console.log('filterObj:',filterObj)  // {//     "arr": [//         1100,//         2100,//         3100//     ],//     "title": "数字信息1"// }

不足:在写这部分需求时,花费了较长时间,没有想到filter,every和includes的处理思路,请教了同事后才解决,自己的基础知识还需要打磨。

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

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

相关文章

摄像设备+nginx+rtmp服务器

前言 由于html中的video现在不支持rtmp协议(需要重写播放器框架,flash被一刀切,360浏览器还在支持flash),遂用rtmp作为桥梁,实际是hls协议在html中起作用. 在此推荐一款前端播放器,.ckplayer 简直了,写点页面,一直循环,洗脑神曲 dream it po…

【rust】7、命令行程序实战:std::env、clap 库命令行解析、anyhow 错误库、indicatif 进度条库

文章目录 一、解析命令行参数1.1 简单参数1.2 数据类型解析-手动解析1.3 用 clap 库解析1.4 收尾 二、实现 grep 命令行2.1 读取文件,过滤关键字2.2 错误处理2.2.1 Result 类型2.2.2 UNwraping2.2.3 不需要 panic2.2.4 ? 问号符号2.2.5 提供错误上下文-自定义 Cust…

山海鲸可视化软件:多场景下的数据呈现利器

在当今数据驱动的时代,数据可视化成为了企业和个人不可或缺的工具。作为一个老数据人,本文想借用自己常用山海鲸可视化软件,带大家了解在不同使用场景下数据可视化的应用。山海鲸可视化是一款可以免费编辑、本地化部署的产品,对数…

小程序域名可以使用免费的SSL证书吗?

对于小程序域名而言,选择何种类型的SSL证书主要取决于小程序域名的具体情况。如果小程序域名是单独的域名,那么可以选择最为常见的免费单域名证书;如果小程序是公司主域名的子域名,则可以选择免费的通配符证书,一张证书…

facebook群控如何做?静态住宅ip代理在多账号运营重的作用

在进行Facebook群控时,ip地址的管理是非常重要的,因为Facebook通常会检测ip地址的使用情况,如果发现有异常的使用行为,比如从同一个ip地址频繁进行登录、发布内容或者在短时间内进行大量的活动等等,就会视为垃圾邮件或…

代码随想录算法训练营Day36 | 435.无重叠区间、763.划分字母区间、56.合并区间

435.无重叠区间 这题需要判断好两个点: 1、什么时候移除元素?(如何判断重叠?)——当前区间左边界小于之前区间右边界时移除元素 2、移除哪个元素?——移除右边界更靠后的元素 整体解题框架和昨天打气球…

PHP如何实现动态代理IP

在网络爬虫、数据挖掘、网络安全等领域,动态代理IP的应用越来越广泛。动态代理IP可以帮助我们突破访问限制,保护真实IP地址,防止被封禁。 PHP是一种广泛应用于Web开发的流行服务器端脚本语言。那么,如何在PHP中实现动态代理IP呢&…

【架构】GPU虚拟化

GPU虚拟化方法 远程调用API 半虚拟化和全虚拟化 硬件划分 局限:授权付费 Hardware Partition:Ampere 架构的 A100 GPU 所支持的 MIG,即是一种 Hardware Partition。它的问题是不灵活: 只有高端 GPU 支持;只支持 CUDA 计算&#x…

基于springboot校园志愿者管理系统源码和论文

随着信息化时代的到来,管理系统都趋向于智能化、系统化,校园志愿者管理系统也不例外,但目前国内仍都使用人工管理,市场规模越来越大,同时信息量也越来越庞大,人工管理显然已无法应对时代的变化,…

ROUGE-L和SPICE

ROUGE-L ROUGE-L(Recall-Oriented Understudy for Gisting Evaluation - Longest Common Subsequence)是一种用于评估自动文本摘要或机器翻译等自然语言处理任务的评价指标。它基于最长公共子序列(LCS)来计算,主要关注…

Linux下彻底卸载MySQL数据库

一、检查服务器是否已经安装了MySQL rpm -qa|grep mysql 如下所示 mysql-community-libs-compat-8.1.0-1.el7.x86_64 mysql-community-server-8.1.0-1.el7.x86_64 mysql-community-icu-data-files-8.1.0-1.el7.x86_64 mysql-community-common-8.1.0-1.el7.x86_64 php-mysqlnd-…

YOLOv8改进PIoU损失函数:PIoU v2损失增强了专注于中等质量锚盒的能力,v1版本使用非单调聚焦机制更直接、更快的边界框回归损失

💡本篇内容:YOLOv8改进PIoU损失函数:PIoU v2损失增强了专注于中等质量锚盒的能力,v1版本使用非单调聚焦机制更直接、更快的边界框回归损失 💡附改进源代码及教程,用来改进🚀PIoU损失函数 Powerful-IoU损失函数论文地址:https://www.sciencedirect.com/science/art…

C# 中的回调函数

引言 回调函数是一种在编程中常用的概念,它在 C# 中扮演着重要的角色。本文将介绍回调函数的概念、语法和应用,并讨论如何设计优化和重用回调函数,以及它们在并发编程中的用途。 1. 回调函数的概念与作用 回调函数是指将一个函数作为参数传…

设计模式学习笔记 - 面向对象 - 2.封装、抽象、继承、多态分别用来解决哪些问题?

1.封装 封装也叫作信息隐藏或者数据访问保护。类通过暴露有限的访问接口,授权外部仅能通过类提供的方法(或者叫作函数)来访问内部信息或数据。 下面这段代码是一个简化版的虚拟钱包的代码实现。在金融系统中,我们会给每个用户创…

电脑恢复删除数据的原理和方法

在恢复数据的时候,很多人都会问,为什么删除的数据还能恢复?本篇和大家一起了解下硬盘上数据的存储方式,文件被删除的时候具体发生了什么,帮助大家理解数据恢复的基本原理。最后还会分享一个好用的数据恢复工具并附上图…

垂起固定翼无人机基础知识,垂起固定翼无人机应用前景,垂起固定翼无人机优缺点分析

无人机定义与类型 无人机,也称为无人驾驶飞行器,是一种无需人工直接操作的航空器。根据其用途、设计及技术特点,可以分为多种类型。垂起固定翼无人机是其中的一种,它具有垂直起降的能力并采用固定翼设计以提高飞行效率和稳定性。…

Excel SUMPRODUCT函数用法(成绩求和,分组排序)

SUMPRODUCT函数是Excel中功能比较强大的一个函数,可以实现sum,count等函数的功能,也可以实现一些基础函数无法直接实现的功能,常用来进行分类汇总,分组排序等 SUMPRODUCT 函数基础 SUMPRODUCT函数先计算多个数组的元素之间的乘积…

解决flask结合layui前端框架模板(laytpl 语法)与gin语法出现冲突的问题。

在模板中加了laytpl的写法 例如: gin框架渲染数据的语法也是{{ }} 例如: 如何两者都出现在html模板页,运行gin框架会识别为框架定义的变量,运行之后发现报如上错误,出现了错误是因为刚好gin的写法也是"{{ 变量 }…

【JavaEE】_CSS选择器

目录 1. 基本语法格式 2. 引入方式 2.1 内部样式 2.2 内联样式 2.3 外部样式 3. 基础选择器 3.1 标签选择器 3.2 类选择器 3.3 ID选择器 4. 复合选择器 4.1 后代选择器 4.2 子选择器 4.3 并集选择器 4.4 伪类选择器 1. 基本语法格式 选择器若干属性声明 2. 引入…

力扣:40. 组合总和 II

回溯&#xff1a; 1.先声明好大集合和小集合&#xff0c;在调用回溯函数&#xff0c;终止条件为sumtarget&#xff0c;要进行剪枝操作减少遍历的次数&#xff0c;去重操作防止数组中有两个相同的值来组成的集合相同。 class Solution {List<List<Integer>> li1ne…