JavaScript中Filter的使用

標籤：elf   else   map   返回   class   return   技術分享   filter   range   

filter

filter也是一個常用的操作，它用於把Array的某些元素過濾掉，然後返回剩下的元素。

和map()類似，Array的filter()也接收一個函數。和map()不同的是，filter()把傳入的函數依次作用於每個元素，然後根據傳回值是true還是false決定保留還是丟棄該元素。

例如，在一個Array中，刪掉偶數，只保留奇數，可以這麼寫：

1 var arr = [1, 2, 4, 5, 6, 9, 10, 15];2 var r = arr.filter(function (x) {3     return x % 2 !== 0;4 });5 r; // [1, 5, 9, 15]

把一個Array中的Null 字元串刪掉，可以這麼寫：

1 var arr = [‘A‘, ‘‘, ‘B‘, null, undefined, ‘C‘, ‘  ‘];2 var r = arr.filter(function (s) {3     return s && s.trim(); // 注意：IE9以下的版本沒有trim()方法4 });5 r; // [‘A‘, ‘B‘, ‘C‘]

可見用filter()這個高階函數，關鍵在於正確實現一個“篩選”函數。

回呼函數

filter()接收的回呼函數，其實可以有多個參數。通常我們僅使用第一個參數，表示Array的某個元素。回呼函數還可以接收另外兩個參數，表示元素的位置和數組本身：

1 var arr = [‘A‘, ‘B‘, ‘C‘];2 var r = arr.filter(function (element, index, self) {3     console.log(element); // 依次列印‘A‘, ‘B‘, ‘C‘4     console.log(index); // 依次列印0, 1, 25     console.log(self); // self就是變數arr6     return true;7 });

利用filter，可以巧妙地去除Array的重複元素：

1 ‘use strict‘;2 3 var4     r,5     arr = [‘apple‘, ‘strawberry‘, ‘banana‘, ‘pear‘, ‘apple‘, ‘orange‘, ‘orange‘, ‘strawberry‘];6 r = arr.filter(function (element, index, self) {7     return self.indexOf(element) === index;8 });9 console.log(r.toString());

運行結果：

apple,strawberry,banana,pear,orange

去除重複元素依靠的是indexOf總是返回第一個元素的位置，後續的重複元素位置與indexOf返回的位置不相等，因此被filter濾掉了。

 

嘗試用filter()篩選出素數：

 1 ‘use strict‘; 2  3 function get_primes(arr) { 4     var i; 5     return arr.filter(function (element) {   6             var flag=true;   7             if(element<2){   8             flag=false;   9         }else {  10             for(var i=2;i<element;i++){  11                 if (element%i==0){  12                     flag=false;  13                     break;  14                 }  15             }  16         }  17         return flag;  18     });19 }20 21 // 測試:22 var23     x,24     r,25     arr = [];26 for (x = 1; x < 100; x++) {27     arr.push(x);28 }29 r = get_primes(arr);30 if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {31     console.log(‘測試通過!‘);32 } else {33     console.log(‘測試失敗: ‘ + r.toString());34 }

運行結果：

測試通過!

JavaScript中Filter的使用