JavaScript filter の使い方

株式会社リュディアです。JavaScript でサポートしている高階関数の1つである finlterメソッド（以下、filter ） についてまとめてみます。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

filter という名前からもわかるように何らかのフィルタリング（選択）を行うメソッドです。さっそく以下の例をみてみましょう。いつものようにコールバック関数の引数は使う、使わないにかかわらずすべてを記載しています。また今回からアロー関数版も同時に記載していきます。

function myFilter() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 const returnArray = inputArray.filter( function( currentValue, index, array ) {
                                          if ( currentValue > 10 )
                                            return currentValue ;
                                        } ) ;
 console.log( returnArray ) ;
}

function myFilterArrow() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 const returnArray = inputArray.filter( currentValue => currentValue > 10 );
 console.log( returnArray ) ;
}

// 実行結果
// [ 17, 20, 31 ]

コールバック関数 fuction で currentValue > 10 であれば currentValue を戻り値としています。実行結果を見てみると元配列の要素のうち > 10 を満たす 17, 20, 31 を要素とする新しい配列ができています。 filter はコールバック関数で定義された条件を満たす要素のみでできた配列を返します。

もう1つ例を見てみましょう。今度は偶数のみでできた配列を生成します。今回もアロー関数版も同時に記載します。

function myFilter2() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 const returnArray = inputArray.filter( function( currentValue, index, array ) {
                                          if ( currentValue % 2 === 0 )
                                            return currentValue ;
                                        } ) ;
 console.log( returnArray ) ;
}

function myFilterArrow2() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 const returnArray = inputArray.filter( currentValue => currentValue % 2 === 0 );
 console.log( returnArray ) ;
}

// 実行結果
// [ 10, 20 ]

もう内容はわかりますね。剰余演算子を使って偶数かどうかを判断しています。

今回は filter についてまとめてみました。ここに記載した例は基本的な例だけです。しかし filter は他の演算子と組み合わせることで複雑な処理を簡潔に記載することができます。複雑な例については、また別の機会にまとめてみます。

では、ごきげんよう。