【JavaScript】 filterメソッドについて徹底解説！

filterメソッドは、配列の各要素に対して条件を適用し、条件を満たす要素のみを含む新しい配列を作成するメソッドです。

1
2
3
配列.filter(function(配列内の各要素) {
  特定の条件
});

filterメソッドの基礎情報

リンクをコピーしました

この章では、filterメソッドの基礎情報について解説します。

filterメソッドの基本的な使い方

リンクをコピーしました

filterメソッドは配列に対して使用するメソッドで、配列内の要素をフィルタリングするときに使われます。このメソッドを使うことで、条件に合致する要素だけを取り出すことができます。

以下が基本的な書き方です。

1
配列.filter(コールバック関数);

わかりやすく書くと以下のようになります。

1
2
3
配列.filter(function(配列内の各要素) {
  特定の条件
});

もしくは以下のようにも書くことができます。

1
配列.filter(配列内の各要素 => 特定の条件); 

これだけではわかりにくいので、基本的な例を見てみましょう。

1
2
3
4
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

このようにfilterは配列の各要素に対して特定の処理を実行し、その結果が真となる要素のみを含む新しい配列を生成します。この例では、数値の配列から2で割った時のあまりが0、つまり偶数のみを抽出するためfilterメソッドを使っています。

また、以下のような使い方もできます。

1
2
3
4
5
6
7
8
9
const people = [
  { name: '田中', age: 25 },
  { name: '佐藤', age: 30 },
  { name: '山本', age: 35 }
];

const youngPeople = people.filter(person => person.age < 30);

console.log(youngPeople); // [{ name: '田中', age: 25 }]

この例では、特定の条件に基づいてオブジェクトの配列をフィルタリングしています。

filterメソッドの応用的な使い方

リンクをコピーしました

この章では、filterメソッドの応用的な使い方について解説します。

オプションで使えるコールバック関数の引数

リンクをコピーしました

コールバック関数の引数には、オプションとして2つの引数を使うことができます。

1
2
3
配列.filter(function(各要素, インデックス, 使用した配列) {
  特定の条件
});

使わない場合は省略します。
以下の例ではオプションとしてインデックスを引数として渡しています。

1
2
3
4
const numbers = [10, 20, 30, 40, 50];
const filteredNumbers = numbers.filter((number, index) => index % 2 === 0);

console.log(filteredNumbers); // [10, 30, 50]

この例ではインデックスが偶数の要素のみを抽出しています。

filterメソッドでは、第3引数にfilterを使用している配列、つまり元の配列が代入されます。以下のようにして、配列の中から重複している値を排除するといったようなことができます。

1
2
3
4
5
6
7
8
const fruits = ['りんご', 'バナナ', 'りんご', 'オレンジ', 'バナナ', 'ブドウ'];

// 重複を取り除いた新しい配列を作成
const uniqueFruits = fruits.filter((fruit, index, array) => {
  return array.indexOf(fruit) === index;
});

console.log(uniqueFruits); // ['りんご', 'バナナ', 'オレンジ', 'ブドウ']

このコードではindexOfメソッドを使って各要素が元の配列（fruits）内で最初に出現するインデックスを返し、そのインデックスが現在のインデックスと一致する場合にのみその要素を新しい配列に追加しています。
今回の例では下の表のようになり、判定結果がtrueのもののみ、新たな配列に追加されます。

このようにfilterメソッドのarray引数を活用することで、配列内の重複を簡単に取り除くことができます。この方法を使用すると、元の配列の順序を保持しながら、一意の要素のみを含む新しい配列を作成することができます。重複を除去する以外にも、array引数を使って様々な条件に基づくフィルタリングができます。

filterの第2引数

リンクをコピーしました

filterメソッドの第2引数として別のオブジェクトを指定することで、コールバック関数内でのthisの参照先を変更することができます。

1
2
3
4
5
6
7
8
9
10
const threshold = {
  value: 30
};

const numbers = [10, 20, 30, 40, 50];
const filteredNumbers = numbers.filter(function(number) {
  return number > this.value;
}, threshold); // thresholdがthisに置き換わる（filterメソッドの第二引数に渡しているため）

console.log(filteredNumbers); // [40, 50]

この例では、特定のしきい値（threshold）を基準にして配列の要素をフィルタリングし、しきい値より大きい値のみを含む新しい配列を作成しています。コールバック関数の中でthis.valueを使用して、しきい値の値を取得しています。この場合のthisはコールバック関数の第2引数で渡したthresholdのことを指します。そのためthis.valueは30になります。ですのでnumbersという配列の中から30より大きい要素のみをフィルタリングし、新たな配列を作成します。

このようにthisを使うことで、より柔軟なプログラミングが可能となります。thisについて詳しく知りたい方はこちらの記事を参考にしてみてください。

使う際の注意点

リンクをコピーしました

この章ではfilterメソッドを使う際の注意点を紹介します。

元の配列は変更されない

リンクをコピーしました

filterメソッドは新しい配列を作成するため、元の配列には影響を与えません。ですので、新たな変数を作成し、代入するのを忘れないようにしましょう。

元の配列を変更したい場合は、引数のオプションを渡すと覚えておきましょう。

1
2
3
4
5
6
7
8
9
10
11
let fruits = ['りんご', 'バナナ', 'りんご', 'オレンジ', 'バナナ', 'ブドウ'];

// filter メソッドを使用して元の配列を直接変更
fruits.filter((fruit, index, array) => {
  if (array.indexOf(fruit) !== index) {
    array.splice(index, 1);
  }
  return array.indexOf(fruit) === index;
});

console.log(fruits); // ['りんご', 'バナナ', 'オレンジ', 'ブドウ']

コールバック関数の条件

リンクをコピーしました

filterメソッドは、配列の各要素に対して指定されたコールバック関数を実行し、その結果がtrueとなる要素だけを新しい配列に含めます。コールバック関数内で適切な条件を設定しないと、期待通りの結果が得られないので注意しましょう。

メモリ消費が大きい

リンクをコピーしました

filterメソッドは新しい配列を生成して返すため、元の配列と新しい配列の両方がメモリ上に存在します。そのため、大きな配列に対して使用するとメモリ消費量が増える可能性があるので注意が必要です。

結果が空配列になる可能性

リンクをコピーしました

全ての要素が条件を満たさない場合、filterメソッドは空の配列を返します。そのため、これを考慮してコードを書く必要があるので注意しましょう。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ