はじめに

Vue.jsを使ったアプリケーションを作成していると、
filterメソッドを利用する場面に遭遇しました。

今回はそこで学んだことを自身の備忘録も兼ねて簡単に整理しておきます。

filterメソッドとは

filterメソッドは、JavaScriptの配列に用意されているメソッドです。
既存の配列から条件に合致した要素だけを抽出して新しい配列を作成するために使用します。

アロー関数を用いた基本形は以下の通りです。

絞り込み対象の配列.filter( 引数 => 条件式 );

// 条件式がtrueであればデータは残され、falseの場合は除去される

実際に6以上の値のみを抽出するfilterメソッドを書いてみました。

var dataList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var result = dataList.filter(data => data >= 6);

console.log(result);

// 出力結果
// [6, 7, 8, 9, 10]

今回の記事は本質的な部分を削ぎ落とし、超簡略化した内容になっています。
filterメソッドは3つの引数を受け取ることができ...というように
まだまだ整理すべきことはあるのですが、それはまた別の機会に譲ります。