js匹配数组中对应的值_JS 数组中查找符合条件的数据索引

2023-11-15

日常工作中经常会需要我们前端获取后端为我们传递的数据放在页面中渲染的问题。大批量的数据后端会根据具体的情况来放在数组中传递给我们,但是如果遇到数组中有需要特殊需要处理的数据怎么办?原来100个数据,渲染规则完全一致,这个时候我们用一个循环就可以搞定,但是有的时候需求并不会这样simple,也有100个数据中有任意个不定位置的特殊元素需要特殊处理,这个时候我们需要找一下解决办法:

1.首先将特殊的元素剔除掉,把剩余可以简单循环渲染的数据重新组成数组,首先进行第一步的渲染。这个时候我们可以用到的方法:

1 //将数组中为1的数据删除生成新数组

2 let simpleArr = list.filter((item, i) =>{3 return item != 1;4 })

如上代码所示,simpleArr为新数组,list为原始数组。

2.其次我们可以根据具体的需求来把特殊元素找出来,继续渲染页面。

以我最近遇到的需求情况为例,渲染10张图片,要求其中ID为1的图片要根据图片出现的位置对应的item值来进行划分渲染,其他的图片只需根据ID来展示图片即可。

根据第一步,其他ID不为1的图片我可以轻松渲染出来,那么ID为1的图片的位置我可以根据如下方法进行get出来:

//在数组中查找所有出现的x,并返回一个包含匹配索引的数组

functionfindall(a,x){var results=[],

len=a.length,

pos=0;while(pos

pos=a.indexOf(x,pos);if(pos===

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js匹配数组中对应的值_JS 数组中查找符合条件的数据索引 的相关文章

  • C# 自定义Label实现 指定字符串(关键词)高亮显示(字体、颜色)

    C 自定义Label实现 指定字符串 关键词 高亮显示 字体 颜色 原来是搞android的 本来自己就菜 现在由于项目需要开始着手弄C WPF 虽然了解一些 毕竟只是皮毛 唉 苦不堪言啊 还是得倚靠万能的互联网啊 需求 提示用户的文字 但
  • 机器学习--支持向量机(sklearn)

    机器学习 支持向量机 1 1 线性可分支持向量机 硬间隔支持向量机 训练数据集 T x 1 y 1 x 2 y 2 x N y N 当 y i 1 y i 1
  • Flutter页面不流畅,难道是使用姿势有问题?

    作者 檀婷婷 三莅 出品 阿里巴巴新零售淘系技术部 背景 高性能高流畅度一直是Flutter团队宣传的一大亮点 也是当初闲鱼选择Flutter的重要因素之一 但是随着复杂业务的应用落地 通过Flutter页面和原生页面滑动流畅度对比 我们开
  • 使用Azure Data Factory REST API和

    题解 给数组加一 class Solution public 代码中的类名 方法名 参数名已经指定 请勿修改 直接返回方法规定的值即可 题解 统计每种性别的人数 字符串子串函数的使用 substring index profile 1 SE
  • listView闪烁的问题

    用了一个ListView来实时的显示数据传输情况 于是问题就来了 当数据量比较大 而且处理速度很快时 这该死的界面闪得人眼花 废话不多说 直接上代码 首先 自定义一个类ListViewNF 继承自 System Windows Forms
  • stata 数据处理

    目录 按类别求均值 然后创建一个新的变量 缩尾处理 日期处理 连续变量处理成虚拟变量 按条件删除数据 按类别求均值 然后创建一个新的变量 bysort year industry egen meanvariable mean variabl
  • MySQL系列---事务与锁详解

    table of contents 1 背景 2 事务隔离级别 2 1 事务及其ACID属性 2 2 并发事务带来的问题 2 3 数据库事务隔离级别 3 锁机制 3 1 定义 3 2 分类 3 2 1 性能上划分 悲观乐观 3 2 2 从对
  • 解决微信小程序button的hover-class不生效问题

    在小程序开发过程中我们会遇到button添加style样式后即使添加hover class样式也没有点击效果的问题 产生该问题的原因为 在css中 内联样式style的优先级要高于class选择器的优先级 所以在我们添加style标签后即使
  • RabbitMq 报 An unexpected connection driver error occured和socket close异常处理

    进入rabbitMQ后台 1 后台地址为http localhost 15672 如果state状态为无法访问 那么我们就需要把这个链接给关掉 2 点击地址 找到close this connection 选择force close强制关闭
  • Centos7配置静态IP

    Centos7配置服务器静态IP 1 使用 ip addr 查看当前网卡信息 通过执行结果我们可以看到我们使用的网卡名称为ens33 2 配置服务器静态IP vi etc sysconfig network scripts ifcfg en
  • STL list

    文章目录 一 list 类的模拟实现 list 是一个带头双向循环链表 可以存储任意类型 模板参数 T 表示存储元素的类型 Alloc 是空间配置器 一般不用传 一 list 类的模拟实现 iterator 和 const iterator
  • 傅里叶图像相关性匹配-《医学图像处理》小作业五-Python代码/Matlab代码

    天津中医药大学 20级医学信息工程 教师 王翌 学生 邓集亲 学长我是用的python写的 matlab同样可以参考 实验五 相关性匹配 作业要求 参考 傅里叶变换 课的内容 采用快速傅里叶变换 FFT 进行相关性匹配 如下图示例输出结果图
  • 数据结构(第2版)陈越主编课后习题_【课后习题答案】离散数学(第2版)—课后习题答案...

    资 源 介 绍 本次分享内容为课程课后习题答案 教材名称 离散数学 第2版 主编作者 屈婉玲 耿素云 张立昂 出版社 高等教育出版社 ISBN 9787040419085 课后习题答案 01 习题一 02 习题二 03 习题三 04 习题四
  • java.io.IOException: Connection reset by peer

    接口要是返回的是字节 1 首先查看本地调用是否能正常返回 2 其次判断同样的参数测试环境是否正常返回 3 本地要是正常 测试环境异常的话 很大可能就是http协议版本不一致导致 解决办法 在nginx conf的location里加上 pr
  • Angular4基础开发文档

    Angular4基础开发文档
  • netstat命令详解

    命令介绍 netstat命令用于显示与IP TCP UDP和ICMP协议相关的统计数据 一般用于检验本机各端口的网络连接情况 netstat是在内核中访问网络及相关信息的程序 它能提供TCP连接 TCP和UDP监听 进程内存管理的相关报告
  • java/php/net/pythonMES生产线控制系统设计

    本系统带文档lw万字以上 答辩PPT 查重 如果这个题目不合适 可以去我上传的资源里面找题目 找不到的话 评论留下题目 或者站内私信我 有时间看到机会给您发 生产线控制系统 的设计主要是为了满足生产线管理员的实际需求 因此 它需要通过Int
  • 移动应用开发期末总结

    移动应用开发 什么是intent 问答题 Intent是一个动作的完整描述 包含了动作的产生组件 接收组件和传递的数据信息 Intent为Activity Service和BroadcastReceiver等组件提供交互能力 将一个组件的数
  • 使用Modelarts快速开发Hilens Kit实现人脸识别功能

    导语 在华为云平台上线的Modelarts模型训练平台结合华为智能终端产品Hilens kit 对Hilens Kit进行开发 实现产品的快速使用以及功能的实现 自从2020年疫情开始 使得人与人的接触变得更加不方便 间接促使了人工智能产业

随机推荐

  • Java中9种常见的CMS GC问题分析与解决

    目前 互联网上 Java 的 GC 资料要么是主要讲解理论 要么就是针对单一场景的 GC 问题进行了剖析 对整个体系总结的资料少之又少 前车之鉴 后事之师 美团的几位工程师历时一年多的时间 搜集了内部各种 GC 问题的分析文章 并结合个人的
  • unity开发小贴士之三 UGUI-Lua Component回收

    ugui tolua local test test b gameobjecttest c gameobject GetComponent typeof UnityEngine UI Button 首先调用UnityEngine GameO
  • Java Logging

    最后一次实验要求用日志来记录信息 学习的内容整理如下 Java 中的 Logging API 让 Java 应用可以记录不同级别的信息 它在debug过程中非常有用 如果系统因为各种各样的原因而崩溃 崩溃原因可以在日志中清晰地追溯 日志工作
  • 在小程序中使用图标

    因为最近在自学微信小程序 掌握了他的基础的使用 包括小程序的语法 小程序的自有组件 小程序的自有API及小程序的自定义组件 在学玩以上的各方面的知识体系后 我就想着学了这么就的微信小程序 自己总要写出点什么东西来才对的起自己这段时间来的努力
  • Android退出应用程序方法总结

    Android退出应用程序方法总结 在Android开发中 我们运行了应用程序后 都需要退出应用的 那么该如何退出应用 又都有哪些实现方式呢 今天就为大家整理分享一些退出应用程序的方法 一起来看看吧 更新内容 Ver v1 任务管理器方法补
  • 简短的char*与char[]

    include
  • 这就是搜索引擎——索引压缩

    对于海量数据 建立倒排索引往往需要较大的磁盘空间 尤其是一些常见的单词 这些单词对应的倒排列表可能有几百兆 如果搜索引擎在相应用户查询的时候 用户查询包含了常见的单词 就需要将大量的倒排列表信息从磁盘读入内存 由于磁盘读写速度往往是个瓶颈
  • RLHF 技术:如何能更有效?又有何局限性?

    编者按 自ChatGPT推出后 基于人类反馈的强化学习 RLHF 技术便成为大模型构建和应用人员关注的热点 但该方法一些情况下效果却差强人意 有些基础模型经RLHF调优后反而表现更差 RLHF技术的适用性和具体操作细节似乎成谜 这篇文章探讨
  • 平板电脑黑苹果EFI_保姆级别教你安装黑苹果,提供大量EFI与工具驱动!

    最近无聊 在电脑上装了个黑苹果 可能是我的机型比较好找吧 安装的过程中没有遇到太大的问题 接下教大家安装 也为大家准备了大量的EFI N卡驱动 蓝牙驱动 键盘驱动等工具 需要工具的小伙伴可以点击此处 所需要工具 1 黑果镜像 2 U盘 3
  • Python音视频剪辑库MoviePy1.0.3中文教程导览及可执行工具下载

    前往老猿Python博文目录 一 简介 MoviePy是一个用于视频编辑的Python模块 可用于进行视频的基本操作 如剪切 拼接 标题插入 视频合成 也称非线性编辑 视频处理或创建高级效果 它可以读写最常见的视频格式 MoviePy能处理
  • Xshell连接Ubuntu详细过程

    一 打开虚拟机VMware 二 启动虚拟机 输入密码 进入Ubuntu系统界面 三 鼠标右键 选择 在终端打开 出现终端对话框 四 在命令行输入 sudo apt get install openssh server 安装openssh s
  • 2017校招Java开发笔试题集

    美丽联合 二分查找要求结点 A 有序 顺序存储 B 有序 链接存储 C 无序 顺序存储 D 无序 链接存储 答案选 A 引入线索二叉树的目的是 A 加快查找结点的前驱或后继结点的速度 B 为了能在二叉树中方便插入和删除 C 为了能方便找到双
  • 使用STM32CubeMx配置STM32输入捕获功能

    输入捕获原理 在输入捕获模式下 当检测到ICx信号上相应的边沿后 计数器的当前值被锁存到捕获 比较寄存 器 TIMx CCRx 中 当发生捕获事件时 相应的CCxIF标志 TIMx SR寄存器 被置1 如果开放 了中断或者DMA操作 则将产
  • tools:context=".MainActivity的作用

    http blog csdn net caiwenfeng for 23 article details 8373569
  • Spring AOP 的搭建与源码分析

    AOP 面向切面编程 一 AOP 概述 AOP 的实现步骤 示例 二 通过 EnableAspectJAutoProxy 了解 AOP 原理 1 分析 EnableAspectJAutoProxy 2 复习 Spring 容器启动后 bea
  • Jq手搓一个简易版分页器

    分页器的效果如下 1 分页器dom结构 前面要有你将渲染列表的dom结构 这里省略 div class news trends fy div class left img src imags nof icon left png 左箭头 di
  • python异步爬虫

    本文主要包括以下内容 线程池实现并发爬虫 回调方法实现异步爬虫 协程技术的介绍 一个基于协程的异步编程模型 协程实现异步爬虫 线程池 回调 协程 我们希望通过并发执行来加快爬虫抓取页面的速度 一般的实现方式有三种 线程池方式 开一个线程池
  • 2023华为od机试统一考试B卷【雨花石难题】

    题目描述 MELON是一个热爱雨花石的人 他拥有一堆数量为n的精美雨花石 每块石头的重量都不相同 现在 MELON想要将这些雨花石平均分给他的朋友S和W 以使两人所得到的石头的重量相等 你需要设计一个程序 来帮助MELON确认是否可以实现这
  • 近期思维片段

    1 感觉360这样的公司就是让少数明眼人讨厌 让大多数人不知不觉接受 2 点子 lt 我买了 gt 购物分享 把自己买过的经验分享出来 3 不要负面思维 No negative thinking 4 突然想起几年前那些熟悉的名字 现在都没有
  • js匹配数组中对应的值_JS 数组中查找符合条件的数据索引

    日常工作中经常会需要我们前端获取后端为我们传递的数据放在页面中渲染的问题 大批量的数据后端会根据具体的情况来放在数组中传递给我们 但是如果遇到数组中有需要特殊需要处理的数据怎么办 原来100个数据 渲染规则完全一致 这个时候我们用一个循环就