JavaScriptでfilterを使う方法！【使用例3選】

2021.08.20

JavaScriptでfilterの機能を使ったので、使い方やサンプルなどを記載しています。

MDNでfilterについて説明しているドキュメントはこちらです。

Array.prototype.filter() - JavaScript | MDN
filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。
developer.mozilla.org

JavaScriptのfilter機能とは？

JavaScriptのfilterは配列に対して使うことができます。
配列に対してfilterメソッドを使用することで、不要な要素を取り除いて必要なものだけの配列を作成することができます。

また、foreach文のように要素をループさせるといった目的でも使用可能です。

配列についてはこちらを確認してみてください。

[JavaScript入門]配列を使ってみよう
前回はJavaScriptの算術演算子について書きました。今回はJavaScriptでの配列の使い方について、見ていきましょう。最初にJavaScriptで、配列の宣言と使用する方法を確認します。その後に配列を使用したプログラムを書いて、ブ...
codelikes.com
2021.05.24

filterを使ったサンプルと解説

実際にfilterメソッドを使って、配列を取り出したりするサンプルと解説を記載します。

文字列の配列に対してfilterする

果物リストを作成して、それに対してfilterでリンゴだけ取り除く処理を書きました。

let fruits = ["apple", "banana", "grape"];
console.log(fruits); // "apple", "banana", "grape"

let notAppleFruits = fruits.filter((fruit) => {
  return fruit != 'apple'
});

console.log(notAppleFruits); // ["banana","grape"]

解説

このように配列に対して、filterメソッドを使うことができます。

fruits.filter((fruit) => { /* ...何かの処理... */ });

今回はアロー演算子を使用して書いていますが、下記のように書くことも可能です。

fruits.filter(function (fruit) { /* ...何かの処理... */ });

無名関数の引数に書いているfruitには配列の要素がひとつずつ入ってきます。
その要素に対して、関数内の処理が実行されます。関数内の処理は配列の要素数分、実行されます。(ここでは3回です）

関数内の処理にはreturn fruit != 'apple'と書いています。
これでapple以外の要素が返ります。

notAppleFruitsという変数で返ってきた要素を受け取っています。
appleが除外されたので、notAppleFruits出力すると["banana","grape"]の2つになります。

オブジェクト配列に対してfilterする

同じようにして、オブジェクトの配列に対しても処理することができます。

let users = [{ id:1, name:"taro" }, { id:2, name:"hanako" }, { id:3, name:"jiro" }];
console.log(users); // [{ id:1, name:"taro" }, { id:2, name:"hanako" }, { id:3, name:"jiro" }]

let mens = users.filter((user) => {
  return user.id != 2
});
console.log(mens); // [{ id:1, name:"taro" }, { id:3, name:"jiro" }]

解説

users配列には、ユーザーのidと名前のオブジェクトが配列として3つ入っています。

先ほどと同じように、usersに対して、filterメソッドを使用しています。
ユーザーデータがひとつづつ渡されて、関数の中でidが２じゃない場合のものを返すようにしました。

これでmensには[{ id:1, name:"taro" }, { id:3, name:"jiro" }]のみになります。

filterをループとして使う

果物の名前と色のプロパティを持った果物リストを用意しました。
filterを使用して、赤い果物の個数を数えてみました。

let fruits = [
            {name:"apple", color:"red"},
            {name:"banana", color:"yellow"},
            {name:"grape", color:"blue"},
            {name:"cherry", color:"red"}
         ];

let redFruitCount = 0;
fruits.filter((fruit) => {
  if (fruit.color == 'red') {
    redFruitCount += 1;
  }
});
console.log(redFruitCount);　// 2

解説

fruitsに果物のオブジェクトを配列で格納しています。

赤い果物をカウントした結果を格納するredFruitCountという変数を用意しました。
filterメソッドで果物をひとつつづ取り出して、下記のように色が赤だった場合はredFruitCountのカウントをあげていっています。

if (fruit.color == 'red') {
  redFruitCount += 1;
}

色がredのオブジェクトは２つあるので、２がカウントされて出力されます。

おわりに

filterメソッドを使った例を３つあげましたが、いかがでしたか。
個人的には簡単に配列の操作ができるので、積極的に使っていきたいと思いました。

コメント