本文實例講述了JavaScript中filter的用法。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比應(yīng)縣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式應(yīng)縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋應(yīng)縣地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

filter

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

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

例如，在一個Array中，刪掉偶數(shù)，只保留奇數(shù)，可以這么寫：

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

把一個Array中的空字符串刪掉，可以這么寫：

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

可見用filter()這個高階函數(shù)，關(guān)鍵在于正確實現(xiàn)一個“篩選”函數(shù)。

回調(diào)函數(shù)

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

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
  console.log(element); // 依次打印'A', 'B', 'C'
  console.log(index); // 依次打印0, 1, 2
  console.log(self); // self就是變量arr
  return true;
});

利用filter，可以巧妙地去除Array的重復(fù)元素：

'use strict';
var
  r,
  arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
  return self.indexOf(element) === index;
});
console.log(r.toString());

運行結(jié)果：

apple,strawberry,banana,pear,orange

去除重復(fù)元素依靠的是indexOf總是返回第一個元素的位置，后續(xù)的重復(fù)元素位置與indexOf返回的位置不相等，因此被filter濾掉了。

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

'use strict';
function get_primes(arr) {
  var i;
  return arr.filter(function (element) {
      var flag=true;
      if(element<2){
      flag=false;
    }else {
      for(var i=2;i

運行結(jié)果：

測試通過!

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

PS：這里再為大家推薦一款JS數(shù)組遍歷方式分析對比工具供大家參考：

在線JS常見遍歷方式性能分析比較工具：http://tools.jb51.net/aideddesign/js_bianli

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《javascript面向?qū)ο笕腴T教程》、《JavaScript數(shù)學(xué)運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。