【JavaScript】配列にある特定の要素のみを取得するfilterメソッドについて解説

今回は配列にある特定の要素のみを取得できるfilterメソッドについて簡単に解説したいと思います。配列の特定の要素だけを処理として使う機会は多いため、ぜひこの機会におさらいしておきましょう。

filter(=ろ過する)という意味を考えればどんなメソッドか大体想像がつきますね！

この記事の内容

filterメソッドとは
filterメソッドをコードで見てみる
filterメソッドの引数
filterメソッドの第2引数
まとめ
参考

filterメソッドとは

filterメソッドとは配列にある特定の要素のみを取得できるメソッドです。

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

参照：Array.prototype.filter()

filterメソッドの構文は以下のようになります。

typedarray.filter(callback[, thisArg])

callback：このコールバック関数で条件を指定しテストを実行
thisArg：コールバックを実行する際にthisとして使用する値

filterメソッドをコードで見てみる

では実際にfilterメソッドを使用したコードを見てみましょう。

1から10まで入った配列の中から、5以上の要素のみを抽出するコードは以下のようになります。このようにfilterメソッドを使用することで、配列の中の要素を抽出することができるようになります。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
array.filter(function(value) {
  return value >= 5;
})
=> [5, 6, 7, 8, 9, 10]

filterメソッドの引数

filterメソッドのコールバック関数には引数を3つ取ることができます。

items.filter( function( value, index, array ) {})

value：配列の値
index：インデックス番号
array：現在の配列

ではもう少し具体的に見てみましょう。

const array = [1, 2, 3, 4, 5];

const test1 = array.filter( function( value, index, array ) {
  return value;
})
console.log(test1)
=> [1, 2, 3, 4, 5]

const test2 = array.filter( function( value, index, array ) {
  return index;
})
console.log(test2)
=> [2, 3, 4, 5]

const test3 = array.filter( function( value, index, array ) {
  return array;
})
console.log(test3)
=> [1, 2, 3, 4, 5]

filterメソッドの第2引数

最後にfilterメソッドの第2引数について見ていきましょう。

実はfilterメソッドには第2引数にオブジェクトを指定することができます。オブジェクトを指定することで、コールバック関数内の「this」がオブジェクトを参照するようになります。

具体例を見ていきましょう。

const weight = {"tanaka": 60, "yamada": 70, "takahashi": 80, "sato": 90};
const members = ["tanaka", "chiba", "saito", "yamaguchi"];

const selectMembers = members.filter(function(value){
  for( var member in this ) {
  if( member === value ) return value;
  }
}, weight);
console.log(selectMembers)
=> ["tanaka"]

このように第二引数にオブジェクトを記述することで、配列以外の処理も組み込むことが可能になります。