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的处理思路,请教了同事后才解决,自己的基础知识还需要打磨。
相关文章:
js filter,every,includes 过滤数组
背景: 页面:在项目中遇到的,前端页面显示为,顶部是下拉搜索条件,下面是一个表格; 数据:接口请求一次性拿到所有:搜索条件里的下拉选项和表格中的数据; 现状:需要前端在搜…...
jenkins自动化部署
Jenkins安装 安装前提条件 yum install java-1.8.0-openjdk* git maven -y 1.下载jenkins wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat/jenkins-2.346-1.1.noarch.rpm --no-check-certificate jenkins的安装路径: /var/lib/jenkins/ …...

【JavaScript】分支语句
目录 一、if语句 二、三元运算符 三、switch语句 JS中分支语句可以分为三种,分别是if语句、三元运算符、switch语句。 一、if语句 let num 10 if (num > 20) {console.log("大于20"); } else if (num < 20) {console.log("小于20");…...

【开源】SpringBoot框架开发农家乐订餐系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户2.2 管理员 三、系统展示四、核心代码4.1 查询菜品类型4.2 查询菜品4.3 加购菜品4.4 新增菜品收藏4.5 新增菜品留言 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的农家乐订餐系统,…...

OSQP文档学习
OSQP官方文档 1 QSQP简介 OSQP求解形式为的凸二次规划: x ∈ R n x∈R^n x∈Rn:优化变量 P ∈ S n P∈S^n_ P∈Sn:半正定矩阵 特征 (1)高效:使用了一种自定义的基于ADMM的一阶方法,只需…...

ONLYOFFICE 8.0:引领数字化办公新纪元
目录 前言 软件安装 软件启动 软件新版本特性 个人评价 总结 前言 在当今快节奏的数字化世界中,高效的办公软件已成为企业竞争力的关键因素。ONLYOFFICE,作为全球领先的办公解决方案提供商,始终致力于通过技术创新来优化用户体验。如今…...
「Linux」基础命令
目录结构 Linux只有1个顶级目录,称为“根目录”路径之间的层级关系,使用/来表示,例如:/usr/local/hello.txt 开头的/表示根目录后面的/表示层级关系 命令入门 命令的通用格式:command [ -options ] [ parameter] c…...

三防平板丨平板终端丨加固平板丨户外勘测应用
随着科技的不断发展,现代勘测业也在不断升级。相较于传统的勘测设备,三防平板在户外勘测中有着广泛的应用。那么,三防平板在户外勘测中究竟有哪些优势呢? 首先,三防平板具备极强的防水、防尘、防摔能力。在野外勘测中&…...

npm ERR! code CERT_HAS_EXPIRED:解决证书过期问题
转载:npm ERR! code CERT_HAS_EXPIRED:解决证书过期问题_npm err! code cert_has_expired npm err! errno cert-CSDN博客 npm config set registry http://registry.cnpmjs.org npm config set registry http://registry.npm.taobao.org...

npm报错之package-lock.json found. 问题和淘宝镜像源过期问题
1、package-lock.json found. 问题的解决 在执行yarn add react-transition-group -S 安装react-transition-group时出现package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in orde…...
大模型提示学习、Prompting微调知识
为什么需要提示学习? 提示学习是一种在自然语言处理任务中引入人类编写的提示或示例来辅助模型生成更准确和有意义的输出的技术。以下是一些使用提示学习的原因: 解决模糊性:在某些任务中,输入可能存在歧义或模糊性,通…...

vue 导出,下载错误提示、blob与json数据转换
一、成功/失败 - 页面展示 失败 成功 二、成功/失败 - 接口请求/响应展示成功 2. 失败 三、解决 // 导出列表exportReceivedExcel() {if (this.tableCheckedValue) {this.form.ids this.tableCheckedValue.map(v > {return v.id || null})}this.loadingReceivedExcel …...

代码随想录算法训练营|二叉树总结
二叉树的定义: struct TreeNode {int val;TreeNode* left;TreeNode* right;TreeNode():val(0),left(nullptr),right(nullptr){}TreeNode(int val):val(val),left(nullptr),right(nullptr){}TreeNode(int val,TreeNode* left,TreeNode* right):val(val),left(left),…...
rtt的io设备框架面向对象学习-uart设备
目录 1.uart设备基类2.uart设备基类的子类3.初始化/构造流程3.1设备驱动层3.2 设备驱动框架层3.3 设备io管理层 4.总结5.使用 1.uart设备基类 此层处于设备驱动框架层。也是抽象类。 在/ components / drivers / include / drivers 下的serial.h定义了如下uart设备基类 struc…...

PyCharm - Script parameters (脚本参数)
PyCharm - Script parameters [脚本参数] References Run -> Edit Configurations… -> Run/Debug Configurations -> Configuration -> Script parameters 命令行: python display_yolo_log.py ./person_training_log/person_train_log_DIMM40_stdout…...

Security6.2 中的SpEL 表达式应用(权限注解使用)
最近学习若依框架,里面的权限注解涉及到了SpEL表达式 PreAuthorize("ss.hasPermi(system:user:list)"),若依项目中用的是自己写的方法进行权限处理, 也可以只用security 来实现权限逻辑代码,下面写如何用security 实现。…...
软考笔记--信息系统开发方法(下)
信息系统是一个极其复杂的人机交互系统,它不仅包含计算机技术,通信技术和网络规划以及其他的工程技术,而且,它还是一个复杂的管理系统,需要管理理论和方法的支持,因此,与其他工程项目相比&#…...

从 AGP 4.1.2 到 7.5.1——XmlParser、GPathResult、QName 过时
新年首发, 去年的问题,今年解决~ 问题 & 排查 1: Task failed with an exception. ----------- * What went wrong: Execution failed for task :app:processCommonReleaseManifest. > org.xml.sax.SAXParseException; lineNumber: 1; columnNu…...
spring boot 使用AOP实现是否已登录检测
前后端分离的开发中,用户http请求应用服务的接口时, 如果要求检测该用户是否已登录。可以实现的方法有多种, 本示例是通过aop 的方式实现,简单有效。 约定:前端http的post 请求 export async function request(url,data) {const …...

为什么从没有负值的数据中绘制的小提琴图(Violin Plot)会出现负值部分?
🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 小提琴图(Violin Plot) 是一种用于展示和比较数据分布的可视化工具。它结合了箱形图(Box Plot)和密度图(Kernel Density Plot)的特…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...

(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
SQL进阶之旅 Day 22:批处理与游标优化
【SQL进阶之旅 Day 22】批处理与游标优化 文章简述(300字左右) 在数据库开发中,面对大量数据的处理任务时,单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”,深入探讨如何通过批量操作和游标技术提…...
AWS vs 阿里云:功能、服务与性能对比指南
在云计算领域,Amazon Web Services (AWS) 和阿里云 (Alibaba Cloud) 是全球领先的提供商,各自在功能范围、服务生态系统、性能表现和适用场景上具有独特优势。基于提供的引用[1]-[5],我将从功能、服务和性能三个方面进行结构化对比分析&#…...

理想汽车5月交付40856辆,同比增长16.7%
6月1日,理想汽车官方宣布,5月交付新车40856辆,同比增长16.7%。截至2025年5月31日,理想汽车历史累计交付量为1301531辆。 官方表示,理想L系列智能焕新版在5月正式发布,全系产品力有显著的提升,每…...