Array.prototype.filter()

filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

構文

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

引数

callback
配列の各要素に対して実行するテスト関数です。この関数が true を返した要素は残され、false を返した要素は取り除かれます。この関数には 3 つの引数が与えられます。
element
配列内の現在の要素です。
indexOptional
配列内の現在の要素のインデックスです。
arrayOptional
filter メソッドを実行している配列です。
thisArgOptional
callback を実行するときに this として使う値です。

返り値

テスト関数をパスした要素からなる新しい配列です。1 つの要素もパスしなかった場合は、空の配列が返されます。

説明

filter() は、与えられた callback 関数を配列の各要素に対して一度ずつ呼び出し、callback真と評価される値を返したすべての要素からなる新しい配列を生成します。callback は値が代入されている配列のインデックスに対してのみ呼び出されます。つまり、すでに削除されたインデックスや、まだ値が代入されていないインデックスに対しては呼び出されません。callback によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです。

callback は 3 つの引数と共に呼び出されます:

  1. 要素の値
  2. 要素のインデックス
  3. 走査されている配列オブジェクト

filter に引数 thisArg が与えられた場合、そのオブジェクトは callback 関数内の this 値として使われます。そうでない場合、undefinedthis 値として使われます。callback 関数内の最終的な this 値は関数内の this を決定する一般的ルールに従って決められます。

filter() は呼び出された配列を変化させません。

filter() によって処理される配列要素の範囲は、callback が最初に呼び出される前に設定されます。filter() の呼び出しが開始された後に追加された配列要素に対しては、callback は実行されません。既存の配列要素が変更または削除された場合、callback に渡される値は filter() がそれらを参照した時点での値になります。削除された配列要素を参照することはありません。

小さい値をすべて取り除く

次の例では、filter() を使って 10 未満の値を持つ要素をすべて取り除いた配列を生成します。

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered は [12, 130, 44] となる(10未満の配列要素が取り除かれている)

JSON の不正な内容を取り除く

次の例では、filter() を使って id の数値が 0 以外の要素だけに絞った JSON を生成します。

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID); 
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries); 
// Number of Invalid Entries = 5

配列の検索

次の例では、filter() を使って検索条件で配列の絞り込みをしています。

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Filters array items based on search criteria (query)
 */
function filterItems(arr, query) {
  return arr.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  })
}

console.log(filterItems(fruits, 'ap')); // ['apple', 'grapes']
console.log(filterItems(fruits, 'an')); // ['banana', 'mango', 'orange']

ES2015 版の実装

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Filters array items based on search criteria (query)
 */
const filterItems = (arr, query) => {
  return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) !== -1);
};

console.log(filterItems(fruits, 'ap')); // ['apple', 'grapes']
console.log(filterItems(fruits, 'an')); // ['banana', 'mango', 'orange']

Polyfill

filter() は ECMA-262 標準に対する JavaScript の拡張であり、ECMA-262 標準の他の実装では存在しない場合があります。次のコードをスクリプトの先頭に挿入すると、filter() がネイティブでサポートされていない ECMA-262 実装でも filter() を使用できるようになります。このアルゴリズムは ECMA-262 第 5 版で指定されたアルゴリズムと全く同じものです。ObjectTypeError はそれぞれオリジナルの値を持ち、それらの fun.callFunction.prototype.call() のオリジナルの値として評価され、またそれらの Array.prototype.push() はオリジナルの値を持ちます。

if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();
   
    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
   
    res.length = c; // shrink down array to proper size
    return res;
  };
}

仕様

仕様 状況 コメント
ECMAScript 5.1 (ECMA-262)
Array.prototype.filter の定義
標準 初期定義です。JavaScript 1.6 で実装されました。
ECMAScript 2015 (6th Edition, ECMA-262)
Array.prototype.filter の定義
標準  
ECMAScript Latest Draft (ECMA-262)
Array.prototype.filter の定義
ドラフト  

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
filterChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 ありnodejs 完全対応 あり

凡例

完全対応  
完全対応

関連情報