日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript中對大量數(shù)據(jù)的多重過濾

所有代碼使用 ES2015 語法，需要 ES5 語法的可以用 Babel - Try it out 或者 TypeScript Playground 翻譯。

問題提出

今天有朋友問我一個問題，前端通過 Ajax 從后端取得了大量的數(shù)據(jù)，需要根據(jù)一些條件過濾，過濾的方法是這樣的：

 
 
    
  
  
  1. class Filter { 
    2.   
  
  2.     filterA(s) { 
    3.   
  
  3.         let data = this.filterData || this.data; 
    4.   
  
  4.         this.filterData = data.filter(m => m.a === s); 
    5.   
  
  5.     } 
    6.   
  
  6.      
    7.   
  
  7.     filterB(s) { 
    8.   
  
  8.         let data = this.filterData || this.data; 
    9.   
  
  9.         this.filterData = data.filter(m => m.b === s); 
    10.   
  
  10.     } 
    11.   
  
  11. }  
    12.

現(xiàn)在迷糊了，覺得這樣處理數(shù)據(jù)不對，但是又不知道該怎么處理。

發(fā)現(xiàn)問題

問題就在過濾上，這樣固然可以實現(xiàn)多重過濾(先調(diào)用 filterA() 再調(diào)用 filterB() 就可以實現(xiàn))，但是這個過濾是不可逆的。假如過濾過程是這樣：

 
 
    
  
  
  1. f.filterA("a1"); 
    2.   
  
  2. f.filterB("b1"); 
    3.   
  
  3. f.filterA("a2");  
    4.

本來是希望按 "a1" 和 "b1" 過濾了數(shù)據(jù)之后，再修改***個條件為 "a2"，但結(jié)果卻成了空集。

解決問題

發(fā)現(xiàn)了問題，就針對性的解決。這個問題既然是因為過濾過程不可逆造成的，那每次都直接從 this.data 開始過濾，而不是從this.filterData 開始過濾，就能解決問題。如果要這樣做，就需要將選擇的過濾條件先記錄下來。

記錄過濾條件

用一個列表記錄過濾條件當(dāng)然是可行的，但是注意對同一個條件的兩次過濾是互斥的，只能保留***一個，所以應(yīng)該用 HashMap 更為合適。

 
 
    
  
  
  1. class Filter { 
    2.   
  
  2.     constructor() { 
    3.   
  
  3.         this.filters = {}; 
    4.   
  
  4.     } 
    5.   
  
  5.  
    6.   
  
  6.     set(key, filter) { 
    7.   
  
  7.         this.filters[key] = filter; 
    8.   
  
  8.     } 
    9.   
  
  9.  
    10.   
  
  10.     getFilters() { 
    11.   
  
  11.         return Object.keys(this.filters).map(key => this.filters[key]); 
    12.   
  
  12.     } 
    13.   
  
  13. }  
    14.

這種情況下，像上面的過程表示為

 
 
    
  
  
  1. f.set("A", m => m.a === "a1"); 
    2.   
  
  2. f.set("B", m => m.b === "b1"); 
    3.   
  
  3. f.set("A", m => m.a === "a1"); 
    4.   
  
  4. let filters = f.getFilters(); // length === 2;  
    5.

上面第 3 句設(shè)置的 filter 覆蓋了第 1 句設(shè)置的那個?，F(xiàn)在再用***取得的 filters 依次來過濾原數(shù)據(jù) this.data，就能得到正確的結(jié)果。

有人會覺得 getFilters() 返回的列表不是按 set 的順序的——的確，這是 HashMap 的特點，無序。不過對于簡單條件的判斷，不管誰先誰后，結(jié)果是一樣的。但是對于一些復(fù)合條件判斷，就可能會有影響。

確實需要的話，可以通過 array 代替 map 來解決一下順序的問題，但這樣查找效率會降低(線性查找)。如果還想解決查找效率的問題，可以用 array + map 來處理。這里就不多說了。

過濾

實際上在使用的時候，每次都 getFilter() 再用一個循環(huán)來處理確實比較慢。既然 data 都封裝成 Filter 中，可以考慮直接給一個filter() 方法來送貨過濾接口。

 
 
    
  
  
  1. class Filter { 
    2.   
  
  2.     filter() { 
    3.   
  
  3.         let data = this.data; 
    4.   
  
  4.         for (let f of this.getFilters()) { 
    5.   
  
  5.             data = data.filter(f); 
    6.   
  
  6.         } 
    7.   
  
  7.         return data; 
    8.   
  
  8.     } 
    9.   
  
  9. }  
    10.

不過這樣我覺得效率不太好，尤其是對大量數(shù)據(jù)的時候。不妨利用一下 lodash 的延遲處理過程。

利用 lodash 的延遲處理

 
 
    
  
  
  1. filter() { 
    2.   
  
  2.     let chain = _(this.data); 
    3.   
  
  3.     for (let f of this.getFilters()) { 
    4.   
  
  4.         chain = chain.filter(f); 
    5.   
  
  5.     } 
    6.   
  
  6.     return chain.value(); 
    7.   
  
  7. }  
    8.

lodash 在數(shù)據(jù)大于 200 的時候會啟用延遲處理過程，也就是說，它會處理成一個循環(huán)中依次調(diào)用每一個 filter，而不是對每一個 filter 進行一次循環(huán)。

延遲處理和非延遲處理通過下圖可以看出來區(qū)別。非延遲處理總共會進行 n(這里 n = 3) 次大循環(huán)，產(chǎn)生 n - 1 個中間結(jié)果。而延遲處理只會進行一次大循環(huán)，沒有中間結(jié)果產(chǎn)生。

不過說實在的，我不太喜歡為了一點小事多加載一個庫，所以干脆自己做個簡單的實現(xiàn)

自己實現(xiàn)延遲處理

 
 
    
  
  
  1. filter() { 
    2.   
  
  2.     const filters = this.getFilters(); 
    3.   
  
  3.     return data.filter(m => { 
    4.   
  
  4.         for (let f of filters) { 
    5.   
  
  5.             // 如果某個 filter 已經(jīng)把它過濾掉了，也不用再用后面的 filter 來判斷了 
    6.   
  
  6.             if (!f(m)) { 
    7.   
  
  7.                 return false; 
    8.   
  
  8.             } 
    9.   
  
  9.         } 
    10.   
  
  10.         return true; 
    11.   
  
  11.     }); 
    12.   
  
  12. }  
    13.

里面的 for 循環(huán)還可以用 Array.prototype.every 來簡化：

 
 
    
  
  
  1. filter() { 
    2.   
  
  2.     const filters = this.getFilters(); 
    3.   
  
  3.     return data.filter(m => { 
    4.   
  
  4.         return filters.every(f => f(m)); 
    5.   
  
  5.     }); 
    6.   
  
  6. }  
    7.

數(shù)據(jù)過濾其實并不是多復(fù)雜的事情，只要把思路理清楚，搞明白什么數(shù)據(jù)是需要保留的，什么數(shù)據(jù)是臨時(中間過程)的，什么數(shù)據(jù)是最終結(jié)果……利用 Array.prototype 中的相關(guān)方法，或者諸如 lodash 之類的工具，很容易就處理出來了。


網(wǎng)站欄目：JavaScript中對大量數(shù)據(jù)的多重過濾
文章來源：http://www.5511xx.com/article/dpjjjjs.html