JavaScriptでfilterを使う方法【初心者向け】

初心者向けにJavaScriptでfilterを使う方法について解説しています。配列の中身から特定の条件に当てはまる要素を取り出すメソッドです。いくつかサンプルでプログラムを書いているので、参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでfilterを使う方法について解説しています。

配列の中身を条件に合うものだけ取り出せるメソッドで、頻繁に使うものでは無いかもしれませんが、知っておくといざという時便利でしょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

filterとは

filterとは配列の内容を特定の条件で絞り込むメソッドです。

コールバック関数で指定した条件で個々の要素を判定して、条件に合う要素だけを取り出すときに利用します。

 

filterの書き方

filterを利用するときは、配列に対してfilterメソッドを指定します。

array.filter(callback [,that]);

arrayには予め作成した配列オブジェクトを指定します。

callbackには、配列要素の値「value」、配列要素の数値インデックス「index」、配列要素を格納している配列オブジェクト「arrayObj」を指定出来ます。

各配列要素に対して、callbakが真を返した要素が新しい配列として生成されます。

callcakが真を返さなかった要素はスキップされ、新しい配列には含まれません。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

以下は実際にfilterメソッドを利用して配列から特定条件を取り出すサンプルです。

 

配列の中から奇数だけを取り出す

var data = [1, 4, 7, 12, 21];
var result = data.filter(function(value) {
  return value % 2 === 1;
});
console.log(result);

 

配列の中から5未満の数字を除外する

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
function isMinNum(value) {
  return (value >= 5);
}
var filterNum = numbers.filter(isMinNum);
console.log(filterNum);

 

文字列の中から条件に合った文字列を抽出する

var items = ["item1", "item2", "item3"];
var filterItems = items.filter(function(value) {
  return value === "item2";
});
console.log(filterItems);

 

まとめ

filterを利用すると、特定の条件に合致した配列要素だけを取り出すことが出来ます。

判定条件によっては有用に使えるシーンが多いメソッドなので、ぜひ覚えておきましょう。

Javascriptにおける配列についてもで詳しく解説しているので、合わせてご覧ください。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。