JavaScriptのArray.filter()について記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。
JavaScriptの配列(Array)とは？
JavaScriptの配列は、異なる要素を格納するために使用される単一の変数です。
要素のリストを格納し、単一の変数でアクセスしたい場合によく使用されています。
配列が複数の変数への参照である他の多くのプログラミング言語とは異なり、JavaScriptでは、配列は複数の要素を格納する単一の変数です。
小難しい説明になりますが、JavaScriptでの配列処理は非常に多くの処理が出来るということです。そして、JavaScriptを使ってコード、システムを作っていくうえで配列処理の基本動作、JSが持っている関数を理解しておくことは非常に重要だと個人に考えています。
開発の現場でも配列処理を正しくそして深く理解していることが求められます。
JSの配列処理はES5,ES6などでアップデートが行われており、本来なら簡潔なコードで記載できるにもかかわらず、冗長なコードで記載してしまったがゆえにバグを発生してしまったり、予期せぬ動作を配列処理が起こしてしまうといったことが起こっていたりもします。
配列処理は頻繁に使用し、そして、もっともバグを生みやすい部分だとも思っているので個人的にJavaScriptで一番重要だと筆者は考えています。
次に本題の説明に移ります。
JavaScriptのArray.filter()概要
Array.filter()は、配列内の要素をテストし、条件に一致する要素だけを抽出して新しい配列を作成するJavaScript関数です。
構文、使い方
構文：
array.filter(callback[, thisArg])
使い方：
array.filter()メソッドは、配列内の各要素をテストするコールバック関数を実行し、テストを通過した要素からなる新しい配列を返します。
コールバック関数は、各要素を引数として受け取り、trueまたはfalseを返します。
trueを返した要素からなる新しい配列が返されます。
引数について
Array.filter()の引数は、配列の要素をテストするための関数です。
この関数は、要素がテストに合格した場合にtrueを返し、テストに失敗した場合にfalseを返します。
返り値について
Array.filter()は、配列内の要素をテストし、テストを満たす要素だけを含む新しい配列を返します。
このメソッドを利用した便利なテクニック
Array.filter()を使うと、配列の要素を絞り込んで新しい配列を作成することができます。
例えば、次のような配列があるとします。
次のように、偶数だけを取り出して新しい配列を作成することができます。
|
1 2 3 4 5 |
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const evenNumbers = numbers.filter(number => number % 2 === 0); // evenNumbers = [2, 4, 6, 8, 10] |
現場で実際にどのように使われているか
Array.filter()は、配列内の要素をテストし、条件に一致する要素のみを取得するために使用されます。
例えば、次のようなコードを使用して、配列内の偶数のみを取得することができます。
|
1 2 3 |
const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(number => number % 2 === 0); // evenNumbers = [2, 4] |
使用する上での注意点
– 配列内の各要素に対して、引数として渡された関数がtrueを返すかどうかを判定します。
– 返される新しい配列は、関数がtrueを返した要素だけからなります。
– 関数の引数として渡される要素は、参照渡しになります。
JavaScriptのArray.filter()と似た処理のJSメソッド、違い
Array.map()とよく似ていますが、下記違いがあります。
- Array.filter()は、配列内の要素をフィルタリングして新しい配列を作成します
- Array.map()は、配列内の要素を変換して新しい配列を作成します。
JavaScriptのArray.filter()を使ったサンプルコードの紹介
1. 数値の配列から偶数を抽出する
|
1 2 3 |
const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(number => number % 2 === 0); console.log(evenNumbers); |
2. 文字列の配列から文字数が3以上の文字列を抽出する
|
1 2 3 |
const words = ['apple', 'banana', 'cat', 'dog']; const longWords = words.filter(word => word.length >= 3); console.log(longWords); |
3. オブジェクトの配列から特定の条件を満たすオブジェクトを抽出する
|
1 2 3 4 5 6 7 |
const people = [ { name: 'John', age: 20 }, { name: 'Bob', age: 25 }, { name: 'Alice', age: 30 }, ]; const adultPeople = people.filter(person => person.age >= 25); console.log(adultPeople); |
JavaScriptの他のArrayメソッドについて
JavaScriptの配列のメソッドについては、下記記事にもまとめていますので参考にしてみてください
| メソッド名 | 機能 | リンク |
| Array.concat() | 既存の配列に新しい配列または値を連結するための関数 | JavaScriptの配列(Array)のconcatメソッドの使い方 |
|
Array.constructor
|
配列オブジェクトに定義されているプロパティ | JavaScriptの配列(Array)のconstructorプロパティの使い方 |
|
Array.copyWithin()
|
配列内の要素を、同じ配列内の別の位置にコピーする関数 | JavaScriptの配列(Array)のcopyWithinメソッドの使い方 |
| Array.entries() | 配列内の要素に対応するインデックスと要素のペアを含む新しいイテレータオブジェクトを生成する関数 | JavaScriptの配列(Array)のentriesメソッドの使い方 |
| Array.every() | 配列内のすべての要素がテスト関数を満たすかどうかを判定する関数 | JavaScriptの配列(Array)のeveryメソッドの使い方 |
| Array.fill() | 配列内の全てまたは一部の要素を指定の値で埋める関数 | JavaScriptの配列(Array)のfillメソッドの使い方 |
| Array.filter() | 配列内の要素をテスト関数に基づいてフィルタリングする関数 | JavaScriptの配列(Array)のfilterメソッドの使い方 |
| Array.find() | 配列内の要素から最初にテスト関数を満たす要素を検索する関数 | JavaScriptの配列(Array)のfindメソッドの使い方 |
| Array.findIndex() | 配列内の要素から最初にテスト関数を満たす要素のインデックスを検索する関数 | JavaScriptの配列(Array)のfindIndexメソッドの使い方 |
| Array.forEach() | 配列内のすべての要素に対して処理を実行する関数 | JavaScriptの配列(Array)のforEachメソッドの使い方 |
| Array.from() | 配列風オブジェクトや反復可能なオブジェクトから新しい配列を生成する関数 | JavaScriptの配列(Array)のfromメソッドの使い方 |
| Array.includes() | 配列内に特定の要素が含まれているかどうかを判定する関数 | JavaScriptの配列(Array)のincludesメソッドの使い方 |
| Array.indexOf() | 配列内の指定された要素の最初のインデックスを検索する関数 | JavaScriptの配列(Array)のindexOfメソッドの使い方 |
| Array.isArray() | 指定されたオブジェクトが配列であるかどうかを判定する関数 | JavaScriptの配列(Array)のisArrayメソッドの使い方 |
| Array.join() | 配列内の要素を文字列に連結する関数 | JavaScriptの配列(Array)のjoinメソッドの使い方 |
| Array.keys() | 配列内の要素に対応するインデックスを含む新しいイテレータオブジェクトを生成する関数 | JavaScriptの配列(Array)のkeysメソッドの使い方 |
|
Array.lastIndexOf()
|
配列内の指定された要素の最後のインデックスを検索する関数 | JavaScriptの配列(Array)のlastIndexOfメソッドの使い方 |
| Array.length | 配列内の要素数を表すプロパティ | JavaScriptの配列(Array)のlengthプロパティの使い方 |
| Array.map() | 配列内のすべての要素に対して関数を適用し、結果を含む新しい配列を生成する関数 | JavaScriptの配列(Array)のmapメソッドの使い方 |
| Array.pop() | 配列内の最後の要素を取り除き、その要素を返す関数 | JavaScriptの配列(Array)のpopメソッドの使い方 |
| Array.prototype | 配列オブジェクトのプロトタイプオブジェクト | JavaScriptの配列(Array)のprototypeプロパティの使い方 |
| Array.push() | 配列内の最後に要素を追加する関数 | JavaScriptの配列(Array)のpushメソッドの使い方 |
| Array.reduce() | 配列内の要素をシンプルな値（通常は数値）に結合する関数 | JavaScriptの配列(Array)のreduceメソッドの使い方 |
|
Array.reduceRight()
|
配列内の要素を右から左に向かって結合する関数 | JavaScriptの配列(Array)のreduceRightメソッドの使い方 |
| Array.reverse() | 配列内の要素の順番を反転する関数 | JavaScriptの配列(Array)のreverseメソッドの使い方 |
| Array.shift() | 配列内の最初の要素を取り除き、その要素を返す関数 | JavaScriptの配列(Array)のshiftメソッドの使い方 |
| Array.slice() | 配列内の一部を切り出して、新しい配列として返す関数 | JavaScriptの配列(Array)のsliceメソッドの使い方 |
| Array.some() | 配列内の要素のいずれかが特定の条件を満たすかどうかをテストする関数 | JavaScriptの配列(Array)のsomeメソッドの使い方 |
| Array.sort() | 配列内の要素をソートする関数 | JavaScriptの配列(Array)のsortメソッドの使い方 |
| Array.toString() | 配列を文字列に変換する関数 | JavaScriptの配列(Array)のtoStringメソッドの使い方 |
| Array.unshift() | 配列内の最初に要素を追加する関数 | JavaScriptの配列(Array)のunshiftメソッドの使い方 |
| Array.valueOf() | 配列のプリミティブ値を返却 | JavaScriptの配列(Array)のvalueOfメソッドの使い方 |
また、JavaScriptの公式ドキュメントであるMDNで記載されているfilterメソッドについても補足としてリンクを貼っておきます。参考にしてみてください。
