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

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

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

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

 

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

 

filterとは

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

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

 

filterの書き方

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

array.filter(callback [,that]);

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

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

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

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

以下は実際に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サイトの表現の幅を広げたいという方はぜひご覧ください。