公開日:
【JavaScript】 filterメソッドについて徹底解説!
![ぴっかちゃん](/packs/media/images/chara-right-e7bf4fa3096d5c964215b40162534f2f.png)
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
のもののみ、新たな配列に追加されます。
fruit | index | array.indexOf(fruit) | 判定結果 |
---|---|---|---|
りんご | 0 | 0 | true |
バナナ | 1 | 1 | true |
りんご | 2 | 0 | false |
オレンジ | 3 | 3 | true |
バナナ | 4 | 1 | false |
ブドウ | 5 | 5 | 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
メソッドは空の配列を返します。そのため、これを考慮してコードを書く必要があるので注意しましょう。
この記事のまとめ
- filterメソッドは配列に対して使い、条件を満たす要素のみを含む新しい配列を作成するメソッド
- 元の配列には影響を与えない
- データのフィルタリングや重複の除去など幅広い用途で使える
![ぴっかちゃん](/packs/media/images/chara-general-3dd00c379ab4c2fc7a7bfe5f2d667314.png)