[JavaScript][Instance Methods] filterメソッドとは (配列→条件抽出)

まとめ

filterメソッドとは

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

つまり、filterメソッドは、配列の各要素に対して指定した条件を満たすかどうかをチェックし、条件を満たす要素のみを含む新しい配列を返します。

目次

• 基本構文
• 活用例1
• 活用例2

基本構文

配列numbersの値をnumberとしてコールバック関数に渡し、条件を満たす要素だけを取り出して新たな配列luckyとして返している。

JavaScript

const numbers = [1, 3, 6, 8, 11];
const lucky = numbers.filter(number => number > 7);   // 7より大きい数だけを抽出

console.log(lucky);

// 出力結果: [ 8, 11 ]

活用例1

filterメソッド内に、if文を書いてさらに細かく絞り込んでいます。
以下のコードは、値が偶数のものは除外し、その中で2以上の値だけを抽出しています。

JavaScript

const array = [1, 2, 3, 4, 5];
const newArray = array.filter(value => {
  if (value % 2 === 0) {
    return false;
  }
  return value >= 2;
});

console.log(newArray);

// 出力結果 [3, 5]

活用例2

これはindexOfを使用し配列に格納されている値のインデックス番号を取得しています。実行結果の左側はindexOfメソッドが取得したインデックス番号であり、user2など同じ値がある場合インデックス番号は同じものとなります。
また実行結果の右側はfilterメソッドが参照しているインデックス番号であり、重複したデータ(user2やuser5)だけfilterメソッドが参照しているインデックス番号と同じではありません。そのためこのコードでは被っている値を見つけることができます。

JavaScript

const items = ["user1","user2","user2","user3","user4","user5","user5","user5","user5"];

const result = items.filter((value, index, array) => {
  console.log(array.indexOf(value) + ' : ' + index);
});


// 出力結果
// 0 : 0
// 1 : 1
// 1 : 2
// 3 : 3
// 4 : 4
// 5 : 5
// 5 : 6
// 5 : 7
// 5 : 8

解説

• array.indexOf(value)は、現在のvalueが配列array内で最初に出現するインデックスを返します。
• indexは、現在のvalueがfilterメソッド内で処理されているインデックスを示します。

処理の流れ

1. valueが"user1"のとき:

   • array.indexOf("user1")は0を返します。
   • 現在のindexは0です。
   • 出力: 0 : 0

2. valueが"user2"のとき（最初の"user2"）:

   • array.indexOf("user2")は1を返します。
   • 現在のindexは1です。
   • 出力: 1 : 1

3. valueが"user2"のとき（2回目の"user2"）:

   • array.indexOf("user2")は最初の"user2"のインデックスである1を返します。
   • 現在のindexは2です。
   • 出力: 1 : 2

4. valueが"user3"のとき:

   • array.indexOf("user3")は3を返します。
   • 現在のindexは3です。
   • 出力: 3 : 3

参考リンク

• mdn web docs
• JavaScriptにおける配列のfilter()メソッド
• JavaScriptの配列操作～filterメソッド～