JS 數組中查找符合條件的數據索引

日常工作中經常會需要我們前端獲取后端為我們傳遞的數據放在頁面中渲染的問題。大批量的數據后端會根據具體的情況來放在數組中傳遞給我們，但是如果遇到數組中有需要特殊需要處理的數據怎么辦？原來100個數據，渲染規則完全一致，這個時候我們用一個循環就可以搞定，但是有的時候需求並不會這樣simple，也有100個數據中有任意個不定位置的特殊元素需要特殊處理，這個時候我們需要找一下解決辦法：

1.首先將特殊的元素剔除掉，把剩余可以簡單循環渲染的數據重新組成數組，首先進行第一步的渲染。這個時候我們可以用到的方法：

//將數組中為1的數據刪除生成新數組
let simpleArr = list.filter((item, i) => {
    return item != 1;
})

如上代碼所示，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()是將標簽內元素覆蓋式渲染。