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)的特…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
