JS 数组中查找符合条件的数据索引

日常工作中经常会需要我们前端获取后端为我们传递的数据放在页面中渲染的问题。大批量的数据后端会根据具体的情况来放在数组中传递给我们,但是如果遇到数组中有需要特殊需要处理的数据怎么办?原来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,并返回一个包含匹配索引的数组
        function findall(a,x){
            var results=[],
                len=a.length,
                pos=0;
            while(pos<len){
                pos=a.indexOf(x,pos);
                if(pos===-1){//未找到就退出循环完成搜索
                break;
                }
                results.push(pos);//找到就存储索引
                pos+=1;//并从下个位置开始搜索
            }
            return results;
        }

再根据这个信息去寻找该ID值对应的item是多少进行渲染就OK了;

Tips:统一渲染用Jquery 中的.html()即可,分块渲染统一展示要使用.append()等方法渲染,因为.html()是将标签内元素覆盖式渲染。

原文地址:https://www.cnblogs.com/zhangxin123/p/12041179.html

时间: 2024-11-09 16:13:56

JS 数组中查找符合条件的数据索引的相关文章

如何从List&lt;T&gt;中筛选符合条件的数据的集合或个数

ChannelList就是一个List类型的数据,IsOpen 是其元素的属性 channelCount = (from channel in DevicesManager.Instance.CurrentDevice.ChannelList where channel.IsOpen group channel by channel.ChannelID).Count();

学underscore在数组中查找指定元素

前言 在开发中,我们经常会遇到在数组中查找指定元素的需求,可能大家觉得这个需求过于简单,然而如何优雅的去实现一个 findIndex 和 findLastIndex.indexOf 和 lastIndexOf 方法却是很少人去思考的.本文就带着大家一起参考着 underscore 去实现这些方法. 在实现前,先看看 ES6 的 findIndex 方法,让大家了解 findIndex 的使用方法. findIndex ES6 对数组新增了 findIndex 方法,它会返回数组中满足提供的函数的

在拥有20个整数数据的数组中查找某个数据。

在随机生成一个有20个整数数据的数组中查找某个数据. #include <stdio.h> #include <stdlib.h> #include <time.h> #define N 20 int main() { int array[N],x,i; int f = -1; srand(time(NULL)); //随机种子 for(i = 0; i < N; i++) { array[i] = rand()/1000; //产生数组 } printf(&qu

14.输入一个已经按升序排序过的数组和一个数字, 在数组中查找两个数,使得它们的和正好是输入的那个数字。 要求时间复杂度是O(n)

待完善! 转载请注明出处:http://www.cnblogs.com/wuzetiandaren/p/4259199.html 声明:现大部分文章为寻找问题时在网上相互转载,此博是为自己做个记录记录,方便自己也方便有类似问题的朋友,本文的思想也许有所借鉴,但源码均为本人实现,如有侵权,请发邮件表明文章和原出处地址,我一定在文章中注明.谢谢. 题目: 输入一个已经按升序排序过的数组和一个数字,在数组中查找两个数,使得它们的和正好是输入的那个数字.要求时间复杂度是O(n).如果有多对数字的和等于输

程序员面试题目总结--数组(三)【旋转数组的最小数字、旋转数组中查找指定数、两个排序数组所有元素中间值、数组中重复次数最多的数、数组中出现次数超过一半的数】

转!http://blog.csdn.net/dabusideqiang/article/details/38271661 11.求旋转数组的最小数字 题目:输入一个排好序的数组的一个旋转,输出旋转数组的最小元素. 分析:数组的旋转:把一个数组最开始的若干个元素搬到数组的末尾.例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转,该数组的最小值为1.这道题最直观的解法并不难.从头到尾遍历数组一次,就能找出最小的元素,时间复杂度显然是O(N).但这个思路没有利用输入数组

旋转数组中查找最小值-剑指Offer11

1.题目简介 求一个旋转数组的最小值.( 把一个数组从最开始的若干个元素搬到数组的末尾,即为旋转数组.) 输入:一个递增排序数组的旋转 输出:数组的最小值 例子:数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数组的最小值为1. 2.思路分析 最直观的解法是从头到尾顺序遍历,这种方法的时间复杂度为O(n).这里并没有用到旋转数组的知识,显然不合题意. 结合提议,旋转数组从有序数组中的得来的,经过旋转后得到的两个部分也为有序的.在有序数组中查找首选二分法,可以把时间复杂度变为O(n

C语言编程 在杨氏数组中查找数字

题目:杨氏矩阵(一个二维数组,数组的每行从左到右是递增的,每列从上到下是递增的)在这样的数组中查找一个数字是否存在.要求时间复杂度小于O(N); 主要思路:题目要求时间复杂度度不能大于O(N),所以判断次数必须小于遍历一次数组次数.所以从数组的右上角开始判断,若当前元素大于要查找的数字,则跳过当前列查询下一列,若当前元素小于要查找的数,则跳过当前行查找下一行,直至找到或者找不到. eg:此处使用数组arr[3][3]={1,2,3,4,5,6,7,8,9}:1 2 34 5 67 8 9在数组中

在一个升序的但是经过循环移动的数组中查找指定元素

数组是升序的,数组经过循环移动之后,肯定是有左半部分或者有半部分还是升序的. 代码: public class SearchRotateArray { public static int search(int a[], int l, int u, int x) { while(l<=u){ int m = (l+u)/2; if(x==a[m]){ return m; }else if(a[l]<=a[m]){ //左半部分升序排列 if(x>a[m]){ l=m+1; }else if

java语言在某个数组中查找某个字符出现的次数

package com.llh.demo; import java.util.Scanner; /** * * @author llh * */ public class Test { /* * 在某个字符数组中查找某个字符出现的次数 */ public static void main(String[] args) { Scanner sc = new Scanner(System.in); System.out.println("请输入一个字符:"); char a = sc.ne