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

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中分支语句可以分为三种&#xff0c;分别是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的农家乐订餐系统&#xff0c…...

OSQP文档学习

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

ONLYOFFICE 8.0:引领数字化办公新纪元

目录 前言 软件安装 软件启动 软件新版本特性 个人评价 总结 前言 在当今快节奏的数字化世界中&#xff0c;高效的办公软件已成为企业竞争力的关键因素。ONLYOFFICE&#xff0c;作为全球领先的办公解决方案提供商&#xff0c;始终致力于通过技术创新来优化用户体验。如今…...

「Linux」基础命令

目录结构 Linux只有1个顶级目录&#xff0c;称为“根目录”路径之间的层级关系&#xff0c;使用/来表示&#xff0c;例如&#xff1a;/usr/local/hello.txt 开头的/表示根目录后面的/表示层级关系 命令入门 命令的通用格式&#xff1a;command [ -options ] [ parameter] c…...

三防平板丨平板终端丨加固平板丨户外勘测应用

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

npm ERR! code CERT_HAS_EXPIRED:解决证书过期问题

转载&#xff1a;npm ERR! code CERT_HAS_EXPIRED&#xff1a;解决证书过期问题_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微调知识

为什么需要提示学习&#xff1f; 提示学习是一种在自然语言处理任务中引入人类编写的提示或示例来辅助模型生成更准确和有意义的输出的技术。以下是一些使用提示学习的原因&#xff1a; 解决模糊性&#xff1a;在某些任务中&#xff0c;输入可能存在歧义或模糊性&#xff0c;通…...

vue 导出,下载错误提示、blob与json数据转换

一、成功/失败 - 页面展示 失败 成功 二、成功/失败 - 接口请求/响应展示成功 2. 失败 三、解决 // 导出列表exportReceivedExcel() {if (this.tableCheckedValue) {this.form.ids this.tableCheckedValue.map(v > {return v.id || null})}this.loadingReceivedExcel …...

代码随想录算法训练营|二叉树总结

二叉树的定义&#xff1a; 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 命令行&#xff1a; python display_yolo_log.py ./person_training_log/person_train_log_DIMM40_stdout…...

Security6.2 中的SpEL 表达式应用(权限注解使用)

最近学习若依框架&#xff0c;里面的权限注解涉及到了SpEL表达式 PreAuthorize("ss.hasPermi(system:user:list)")&#xff0c;若依项目中用的是自己写的方法进行权限处理&#xff0c; 也可以只用security 来实现权限逻辑代码&#xff0c;下面写如何用security 实现。…...

软考笔记--信息系统开发方法(下)

信息系统是一个极其复杂的人机交互系统&#xff0c;它不仅包含计算机技术&#xff0c;通信技术和网络规划以及其他的工程技术&#xff0c;而且&#xff0c;它还是一个复杂的管理系统&#xff0c;需要管理理论和方法的支持&#xff0c;因此&#xff0c;与其他工程项目相比&#…...

从 AGP 4.1.2 到 7.5.1——XmlParser、GPathResult、QName 过时

新年首发&#xff0c; 去年的问题&#xff0c;今年解决~ 问题 & 排查 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实现是否已登录检测

前后端分离的开发中&#xff0c;用户http请求应用服务的接口时, 如果要求检测该用户是否已登录。可以实现的方法有多种&#xff0c; 本示例是通过aop 的方式实现&#xff0c;简单有效。 约定&#xff1a;前端http的post 请求 export async function request(url,data) {const …...

为什么从没有负值的数据中绘制的小提琴图(Violin Plot)会出现负值部分?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 小提琴图&#xff08;Violin Plot&#xff09; 是一种用于展示和比较数据分布的可视化工具。它结合了箱形图&#xff08;Box Plot&#xff09;和密度图&#xff08;Kernel Density Plot&#xff09;的特…...

深入解析XSpiPs_PolledTransfer与XSpiPs_Transfer的片选信号行为差异

1. 从波形图看片选信号的关键差异 第一次用逻辑分析仪抓取SPI波形时&#xff0c;我被XSpiPs_PolledTransfer和XSpiPs_Transfer的片选信号差异惊到了。同样是发送两个字节的数据&#xff0c;前者像老式电报机一样稳定保持CS低电平&#xff0c;后者却像发摩尔斯电码似地频繁跳变。…...

sing-box常见问题排查:99%的用户都会遇到的坑

sing-box常见问题排查&#xff1a;99%的用户都会遇到的坑 引言 sing-box作为一款功能强大的通用代理平台&#xff08;The universal proxy platform&#xff09;&#xff0c;在使用过程中难免会遇到各种问题。本文将针对用户最常遇到的配置错误、连接失败、日志分析等问题提供…...

抖音无水印视频下载全攻略:从技术突破到行业落地的实战指南

抖音无水印视频下载全攻略&#xff1a;从技术突破到行业落地的实战指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback …...

ShortURL MCP 集成指南

在今天的数字时代&#xff0c;短链接的生成和管理变得越来越重要。Ace Data Cloud 提供的 ShortURL MCP 服务器&#xff0c;利用 MCP (模型上下文协议)&#xff0c;允许 AI 模型&#xff08;如 Claude、GPT 等&#xff09;通过标准化接口调用外部工具&#xff0c;从而更加便利地…...

Lepton AI与FastAPI集成:构建高性能AI API服务的终极指南

Lepton AI与FastAPI集成&#xff1a;构建高性能AI API服务的终极指南 【免费下载链接】leptonai A Pythonic framework to simplify AI service building 项目地址: https://gitcode.com/gh_mirrors/le/leptonai Lepton AI是一个Pythonic框架&#xff0c;专门用于简化AI…...

智能仪器仪表:数字化转型浪潮下的产业升级与市场机遇

在全球工业4.0与智能制造浪潮的推动下&#xff0c;智能仪器仪表作为工业自动化与数字化的核心设备&#xff0c;正经历从传统测量工具向智能化、网络化、平台化解决方案的深刻转型。这一变革不仅重塑了行业技术架构&#xff0c;更催生了新的商业模式与竞争格局。本文将从技术演进…...

Spark依赖管理二选一:spark.yarn.archive和spark.yarn.jars到底怎么选?

Spark依赖管理深度抉择&#xff1a;spark.yarn.archive与spark.yarn.jars的架构师级决策指南 当你在凌晨三点被集群告警惊醒&#xff0c;发现数百个Spark作业因依赖加载超时而堆积&#xff0c;那一刻你会明白&#xff1a;依赖管理策略的选择绝非配置文件中的简单参数调整&#…...

Leather Dress Collection 快速上手:10分钟完成Vue3前端项目集成

Leather Dress Collection 快速上手&#xff1a;10分钟完成Vue3前端项目集成 你是不是刚拿到一个部署好的AI模型接口&#xff0c;想把它快速集成到你的Vue3项目里&#xff0c;看看效果&#xff1f;或者你正在开发一个需要AI能力的应用&#xff0c;但对接后端API、处理流式响应…...

Kandinsky-5.0-I2V-Lite-5s部署教程:Ubuntu 22.04 LTS环境完整安装与验证

Kandinsky-5.0-I2V-Lite-5s部署教程&#xff1a;Ubuntu 22.04 LTS环境完整安装与验证 1. 环境准备与快速部署 Kandinsky-5.0-I2V-Lite-5s是一款轻量级图生视频模型&#xff0c;能够将静态图片转换为5秒左右的短视频。在开始之前&#xff0c;请确保你的系统满足以下要求&#…...

双模型混搭方案:OpenClaw同时接入千问3.5-27B与Llama3

双模型混搭方案&#xff1a;OpenClaw同时接入千问3.5-27B与Llama3 1. 为什么需要多模型混搭 去年我在尝试用AI自动化处理技术文档时&#xff0c;发现单一模型总是存在能力短板。比如用纯文本模型生成示意图说明时&#xff0c;要么需要手动补充描述&#xff0c;要么得额外调用…...