JavaScript中如何對(duì)大量數(shù)據(jù)的多重過濾

本篇文章為大家展示了JavaScript中如何對(duì)大量數(shù)據(jù)的多重過濾，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

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

問題提出

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

class Filter {     filterA(s) {         let data = this.filterData || this.data;         this.filterData = data.filter(m => m.a === s);     }          filterB(s) {         let data = this.filterData || this.data;         this.filterData = data.filter(m => m.b === s);     } }

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

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

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

f.filterA("a1"); f.filterB("b1"); f.filterA("a2");

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

解決問題

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

記錄過濾條件

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

class Filter {     constructor() {         this.filters = {};     }      set(key, filter) {         this.filters[key] = filter;     }      getFilters() {         return Object.keys(this.filters).map(key => this.filters[key]);     } }

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

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

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

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

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

過濾

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

class Filter {     filter() {         let data = this.data;         for (let f of this.getFilters()) {             data = data.filter(f);         }         return data;     } }

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

利用 lodash 的延遲處理

filter() {     let chain = _(this.data);     for (let f of this.getFilters()) {         chain = chain.filter(f);     }     return chain.value(); }

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

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

不過說(shuō)實(shí)在的，我不太喜歡為了一點(diǎn)小事多加載一個(gè)庫(kù)，所以干脆自己做個(gè)簡(jiǎn)單的實(shí)現(xiàn)

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

filter() {     const filters = this.getFilters();     return data.filter(m => {         for (let f of filters) {             // 如果某個(gè) filter 已經(jīng)把它過濾掉了，也不用再用后面的 filter 來(lái)判斷了             if (!f(m)) {                 return false;             }         }         return true;     }); }

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

filter() {     const filters = this.getFilters();     return data.filter(m => {         return filters.every(f => f(m));     }); }

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

上述內(nèi)容就是JavaScript中如何對(duì)大量數(shù)據(jù)的多重過濾，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。