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

标签：分块   code   color   覆盖   return   html   规则   pen   item   

日常工作中经常会需要我们前端获取后端为我们传递的数据放在页面中渲染的问题。大批量的数据后端会根据具体的情况来放在数组中传递给我们，但是如果遇到数组中有需要特殊需要处理的数据怎么办？原来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()是将标签内元素覆盖式渲染。

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

标签：分块   code   color   覆盖   return   html   规则   pen   item   

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