当前位置: 首页 > 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的处理思路,请教了同事后才解决,自己的基础知识还需要打磨。

http://www.lryc.cn/news/302900.html

相关文章:

  • jenkins自动化部署
  • 【JavaScript】分支语句
  • 【开源】SpringBoot框架开发农家乐订餐系统
  • OSQP文档学习
  • ONLYOFFICE 8.0:引领数字化办公新纪元
  • 「Linux」基础命令
  • 三防平板丨平板终端丨加固平板丨户外勘测应用
  • npm ERR! code CERT_HAS_EXPIRED:解决证书过期问题
  • npm报错之package-lock.json found. 问题和淘宝镜像源过期问题
  • 大模型提示学习、Prompting微调知识
  • vue 导出,下载错误提示、blob与json数据转换
  • 代码随想录算法训练营|二叉树总结
  • rtt的io设备框架面向对象学习-uart设备
  • PyCharm - Script parameters (脚本参数)
  • Security6.2 中的SpEL 表达式应用(权限注解使用)
  • 软考笔记--信息系统开发方法(下)
  • 从 AGP 4.1.2 到 7.5.1——XmlParser、GPathResult、QName 过时
  • spring boot 使用AOP实现是否已登录检测
  • 为什么从没有负值的数据中绘制的小提琴图(Violin Plot)会出现负值部分?
  • 有哪几种行为会导致服务器被入侵
  • Redis RabbitMQ
  • http 和 https 的区别?
  • C++中线程的创建
  • 基于JavaWeb开发的家政服务平台计算机毕业设计[附源码]
  • 性能调优:容易忽视的JavaScript标签属性及其性能影响
  • 【机器学习笔记】7 KNN算法
  • mysql 2-20
  • Unity3D Shader 素描风格渲染管线实现详解
  • WordPress站点如何实现发布文章即主动推送到百度快速收录和普通收录?
  • C++11---(3)