【JavaScript】filter()で配列や連想配列から条件を満たす新たな配列を作成する!

(この記事は2022年10月28日に投稿されました。)

JavaScriptで配列から条件を満たす新たな配列を作成する方法としてfilter()があります。

filter()とは、配列から条件を満たすデータ(値)を抽出し、新しい配列を作成するメソッドになります。

条件を満たすデータを抽出することから、「条件を満たす値が格納された新たな配列」を返り値として返すようになります。

そしてfilter()は、条件に合わせてデータを抽出するだけでなく、他のオブジェクトと比較をとってフィルターをかけるということもできます。

また、filter()でパラメータとして使用するコールバック関数の引数を変更することができるため、利便性がとても高いです。

そのため、配列の中からこの条件を満たす値だけを取り出したいと思った場合はfilter()を使用しましょう。

今回はJavaScriptのfilter()で配列や連想配列から条件を満たす新たな配列を作成する方法について紹介していきます。

この記事はこんな方におすすめ
・配列から条件の合う値のみを取得して別の配列に格納したい場合




filter()とは

filter()とは、配列から条件を満たす値を取りだして新しい配列を作成するメソッドになります。

配列の中から条件に合う値を厳選し、厳選した値を新たな配列に格納するイメージになります。

filter()の処理イメージ

filter()の書き方

filter()の書き方は下記のようになります。

対象の配列の後ろにfilter()と追記し、必須パラメータを1つ指定します。

また、任意なパラメータを1つ指定することができます。

filter()のパラメータ

filter()のパラメータは下記のようになります。

  1. コールバック関数(必須):
    指定した配列に対して行いたい処理を関数で指定する
  2. オブジェクト(任意):
    コールバック関数で使用するためのオブジェクト(文字列や配列など)を指定する

filter()は必須なパラメータとして「コールバック関数」を指定します。

そして任意なパラメータとして「オブジェクト」を指定することができます。

filter()の返り値

filter()の返り値は「条件を満たす値が格納された新たな配列」となります。

filter()で配列から条件を満たす新たな配列を作成するサンプルコード

filter()で配列から条件を満たす新たな配列を作成するサンプルコードをご紹介します。

ここでは、下記の2つのパターンでreduce()を使用します。

  1. 配列に値が存在する場合
  2. 配列に値が存在しない場合

配列に値が存在する場合

配列の値が存在する場合にfilter()を使用します。

⚫︎ Main.js

実行結果

配列に値が存在する場合にfilter()を使用した結果

filter()によって配列から条件を満たす値を格納した新たな配列が作成されています。

そのため、数値が格納されている配列には偶数の値を、格納している配列が表示されています。

そして、文字列が格納されている配列には、「100」以外の値を格納している配列が表示されています。

配列に値が存在しない場合

続いて、配列に値が存在しない場合にfilter()を使用します。

⚫︎ Main.js

実行結果

配列に値が存在しない場合にfilter()を使用した結果

配列に値が存在しないため、filter()条件を満たす新しい配列を作成することができません。

そのため、空の配列が表示されています。

filter()で連想配列から条件を満たす新たな配列を作成するサンプルコード

filter()で連想配列から条件を満たす新たな配列を作成するサンプルコードをご紹介します。

filter()は連想配列には直接使用することはできません。

そのため、キーと値を別々の配列に分けて使用する必要があります。

キーから条件を満たす新たな配列を作成する場合

filter()で連想配列のキーから条件を満たす別の配列を作成してみます。

連想配列のキーを取り出す場合はObject.keys()を使用します。

⚫︎ Main.js

実行結果

filter()で連想配列のキーから条件を満たす新たな配列を作成した結果

filter()によってObject.keys()で取り出した連想配列のキーから条件を満たす新たな配列を作成しています。

そのため、「un」の文字列以外のキーを格納した配列が表示されています。

値から条件を満たす新たな配列を作成する場合

filter()で連想配列の値から条件を満たす新たな配列を作成してみます。

連想配列の値を取り出す場合はObject.values()を使用します。

⚫︎ Main.js

実行結果

filter()で連想配列の値から条件を満たす新たな配列を作成した結果

filter()によってObject.values()で取りした連想配列の値から条件を満たす新しい配列を作成しています。

そのため、「3以上」の値を格納した配列が表示されています。

filter()で多次元配列から条件を満たす新たな配列を作成する場合

filter()で多次元配列から条件を満たす新たな配列を作成してみます。

2次元配列の場合

2次元配列に対してfilter()を使用してみます。

⚫︎ Main.js

実行結果

filter()で2次元配列から条件を満たす新たな配列を作成した結果

filter()によって2次元配列から条件を満たす新たな配列を作成しています。

また、map()の中にfilter()を使用すると、2次元配列に格納されている全ての値から条件を満たす新たな2次元配列を作成することができます。

3次元配列の場合

3次元配列に対してfilter()を使用してみます。

⚫︎ Main.js

実行結果

filter()で3次元配列から条件を満たす新たな配列を作成した結果

filter()によって3次元配列から条件を満たす新たな配列を作成しています。

また、こちらもmap()の中にfilter()を使用すると、3次元配列に格納されている全ての値から条件を満たす新たな3次元配列を作成することができます。

filter()でオブジェクトと比較して条件を満たす新たな配列を作成する場合

filter()でオブジェクトと比較して条件を満たす新たな配列を作成する場合は、パラメータに「オブジェクト」を指定します。

オブジェクトを指定することで、他の配列やデータを条件に使用することができます。

オブジェクトとして指定したデータはコールバック関数内で「this」として使用します。

⚫︎ Main.js

実行結果

filter()でオブジェクトと比較して条件を満たす新たな配列を作成した結果

filter()によってオブジェクトと比較して、条件を満たす新たな配列が作成しています。

そのため、objの「31」より大きい値を格納した新たな配列が表示されています。

filter()でコールバック関数で指定する引数を変更する場合

これまでコールバック関数の引数は1つ指定していましたが、実は3つまで引数を取得することができます。

引数が多くなると、値以外にも指定できる部分が増えてくるため、filter()の利便性がとても高くなります。

そのため、ここではコールバック関数を下記の2つのパターンでご紹介していきます。

  1. コールバック関数の引数を2つ指定する場合
  2. コールバック関数の引数を3つ指定する場合

コールバック関数の引数を2つ指定する場合

コールバック関数の引数を2つ指定する場合にfilter()を使用してみます。

2つ目の引数は「インデックス」を指定することができます。

インデックスを指定することで、配列に格納されている値のインデックスを指定して処理を行うことが可能になります。

⚫︎ Main.js

実行結果

コールバック関数の引数を2つ指定してfilter()を使用した結果

filter()のコールバック関数の引数を2つ指定することで、インデックスを指定しながら条件を満たす新しい配列を作成することができます。

そのため、元の配列の値(「オブジェクトの値 <= 元の配列の値」の場合)が格納された新たな配列が表示されています。

コールバック関数の引数を3つ指定する場合

コールバック関数の引数を3つ指定する場合にfilter()を使用してみます。

3つ目の引数は「配列」を指定することができます。

配列を指定することで、指定した配列の値を操作することが可能になります。

⚫︎ Main.js

実行結果

コールバック関数の引数を3つ指定してfilter()を使用した結果

filter()のコールバック関数の引数を3つ指定することで新しい配列を作成しつつ、元の配列も変更しています。

そのため、こちらも同様に配列の番号が偶数の場合は「1000倍」された値を、奇数の場合は「100倍」された値を格納した新たな配列が表示されています。

そして、元の配列の偶数番号の値には「1」を、奇数番号の値には「10000」が格納されています。

filter()を使用した実際のケース

filter()を使用した実際のケースについてご紹介します。

例えば、年齢のボタンを押すと、ボタンに書かれた年齢のリストを表示するような画面を作成してみます。

⚫︎ index.html

⚫︎ main.js

実行結果

filter()を使用して年齢のフィルター画面を作成した結果

filter()を利用して年齢のフィルター画面を作成しています。

そのため、年齢のボタンを押すと、各年齢層の名前と年齢がリストとして表示されるようになります。

コールバック関数を使用するメソッドの一覧

filter()以外にもコールバック関数を使用するメソッドが存在します。

そのため、ここではコールバック関数を使用するメソッドの一覧についてご紹介します。

map()

map()とは、指定した配列から新しい配列を作成するメソッドになります。

⚫︎ Main.js

実行結果

map()で指定した配列から新しい配列を作成した結果

map()によって指定した配列から新たな配列が作成されています。

そのため、指定した配列の値にそれぞれ2乗した値を格納した新しい配列が表示されています。

もし、map()について詳しく知りたい場合は下記の記事をご参考ください。

reduce()

reduce()とは、配列から単一の値を作成するメソッドになります。

⚫︎ Main.js

実行結果

reduce()で配列から単一の値を作成した結果

reduce()によって指定した配列から単一の値を作成しています。

今回のは値の引き算になるため、「-250」が表示されています。

もし、reduce()について詳しく知りたい場合は下記の記事をご参考ください。

sort()

sort()とは、配列の値を並び替えるメソッドになります。

⚫︎ Main.js

実行結果

sort()で配列の値を並び替えた結果

sort()メソッドによって、配列の値を並び替えています。

今回は、降順に設定しているため、配列が小さい順に並び替わっています。

もし、sort()について詳しく知りたい場合は下記の記事をご参考下さい。

find()

find()とは、配列から条件に合う要素を取り出すメソッドになります。

⚫︎ Main.js

実行結果

find()で配列から条件に合う要素を取り出した結果

find()メソッドによって、配列から条件に合う要素を取り出しています。

今回は、条件が「5」であるため、配列の要素に格納されている「5」が表示されています。

もし、find()について詳しく知りたい場合は下記の記事をご参考下さい。

まとめ

⚫︎ filter()とは配列から条件に合う値のみを抽出し、新たな配列を作成するメソッドである

⚫︎ filter()は下記のようなパラメータを指定して使用する
・コールバック関数(必須)
・オブジェクト(任意)

⚫︎ 配列に値が存在しない場合にfilter()を使用すると、空の配列を返す

⚫︎ filter()は連想配列には直接使用できないが、キーと値を別々にすると使用できる

⚫︎ filter()は多次元配列から条件に合う値を取り出し、新しい配列を作成することができる
(新しい多次元配列を返り値として返したい場合はmap()とfilter()を組み合わせて使用する)

⚫︎ filter()のコールバック関数の引数を2つ指定すると、インデックスを指定しながら条件を満たす新たな配列を作成できる

⚫︎ filter()のコールバック関数の引数を3つ指定すると、条件を満たす新たな配列を作成しながら、元の配列の値を操作できる

⚫︎ 配列に対して処理を行い、新たな配列を作成するにはmap()を使用する

⚫︎ 配列を単一の値にするにはreduce()を使用する

⚫︎ 配列の値を並び替えるにはsort()を使用する

⚫︎ 配列から条件に合う要素を取り出すにはfind()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です