We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

この翻訳は不完全です。英語から この記事を翻訳 してください。

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

ES6 version

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

let longWords = words.filter(word => word.length > 6);

// Filtered array longWords is ["exuberant", "destruction", "present"]

構文

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

引数

callback
配列の各要素に対して実行するテスト関数。この関数が true を返した要素は残され、false を返した要素は取り除かれます。この関数には三つの引数が与えられます。
element
The current element being processed in the array.
indexOptional
The index of the current element being processed in the array.
arrayOptional
The array filter was called upon.
thisArg Optional
省略出来ます。callback を実行するときに this として使用するオブジェクト。

Return value

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

説明

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

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

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

filterthisArg パラメータが与えられると、そのオブジェクトは callback 関数内の this として使用されます。thisArg が与えられないか undefinedの場合、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未満の配列要素が取り除かれている)

Filtering invalid entries from JSON

The following example uses filter() to create a filtered json of all elements with non-zero, numeric id.

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

Searching in array

Following example uses filter() to filter array content based on search criteria

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

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

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

ES2015 Implementation

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

/**
 * Array filters items based on search criteria (query)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

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

Polyfill

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

Specifications

Specification Status Comment
ECMAScript 5.1 (ECMA-262)
Array.prototype.filter の定義
標準 Initial definition. Implemented in JavaScript 1.6.
ECMAScript 2015 (6th Edition, ECMA-262)
Array.prototype.filter の定義
標準  
ECMAScript Latest Draft (ECMA-262)
Array.prototype.filter の定義
ドラフト  

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり1.59 あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

See also

ドキュメントのタグと貢献者

このページの貢献者: woodmix, athos0220, teoli, ethertank, Potappo, Shoot
最終更新者: woodmix,