この記事ではJavaScriptの『filterメソッド』について、
filterメソッドとはfilterメソッドの構文filterメソッドの使い方filterメソッドの各引数(index、array、thisArg)の使い方filterメソッドの注意点
などをプログラム例を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。
filterメソッドとは
filterメソッドは、配列から指定した条件に一致する要素を取り出し、新しい配列として返すメソッドです。
filterメソッドの構文
filterメソッドの構文は以下のようになっています。
filterメソッドの構文
const oldArray = [配列データ];
const newArray = oldArray.filter(callback(element[, index[, array]]),[, thisArg]);filterメソッドは配列の各要素にコールバック関数を適用し、その結果がtrueとなる要素だけを取り出し、新しい配列として返しています。
filterメソッドの引数について詳しく説明します。
filterメソッドの引数
filterメソッドの引数には、callbackとthisArgがあります。
callbackfilterメソッドの第1引数にはcallbackを指定します。callback関数に使用する引数は以下のようになっています。element：現在処理中の配列の要素の値です。index(オプション)：現在処理中の配列の要素の位置です。省略可能です。array(オプション)：filterメソッドが呼び出された配列です。省略可能です。
thisArg(オプション)- コールバック関数内の
thisの参照先です。省略可能です。 - 省略した場合、
thisの値はundefinedになります。
- コールバック関数内の
filterメソッドの使い方
filterメソッドについて、以下に示す一般的な使い方のプログラム例をこれから順番に説明します。
- 文字列の配列から条件にあった文字列だけを抽出する
- 文字列の配列から文字数が5以上の文字列だけを抽出する
- 文字列の配列から特定の文字列を含む文字列だけを抽出する
- 数値の配列から偶数だけを抽出する
- 数値の配列から奇数だけを抽出する
- 数値の配列から50以上の値だけを抽出する
- 数値の配列から素数だけを抽出する
- オブジェクトの配列から特定の条件を満たすオブジェクトだけを抽出する
- 配列からnullやundefinedなどのfalsyな値を取り除く
文字列の配列から条件にあった文字列だけを抽出する
以下のプログラムは、文字列の配列からbananaだけを抽出しているサンプルコードです。
// filter対象の配列
const fruits = ['apple', 'orange', 'banana', 'grape'];
// 配列をfilterメソッドを用いてフィルタ
const result = fruits.filter((fruit) => fruit === 'banana');
// ログ出力
console.log(result); // [ 'banana' ]filterメソッドのコールバック関数では、配列の各要素をfruitとして受け取り、それがbananaかどうかをチェックしています。
文字列の配列から文字数が5以上の文字列だけを抽出する
以下のプログラムは、文字列の配列から文字数が5以上の文字列だけを抽出しているサンプルコードです。
// filter対象の配列
const words = ['apple', 'banana', 'cat', 'elephant'];
// 配列をfilterメソッドを用いてフィルタ
const result = words.filter((word) => word.length >= 5);
// ログ出力
console.log(result); // [ 'apple', 'banana', 'elephant' ]filterメソッドのコールバック関数では、配列の各要素の文字数(word.length)が5以上であるかどうかを判定しています。
文字列の配列から特定の文字列を含む文字列だけを抽出する
以下のプログラムは、文字列の配列から特定の文字列(ap)を含む文字列だけを抽出しているサンプルコードです。
// filter対象の配列
const words = ['apple', 'grape', 'orange', 'pineapple'];
// 配列をfilterメソッドを用いてフィルタ
const result = words.filter((word) => word.includes('ap'));
// ログ出力
console.log(result); // [ 'apple', 'grape', 'pineapple' ]includesメソッドを使用して、文字列がapを含むかどうかをチェックします。
以下のプログラムは、文字列の配列から特定の文字列(“田”)を含む文字列だけを抽出しているサンプルコードです。
// filter対象の配列
const names = ['田中', '山田', '佐藤', '鈴木', '中田'];
// 配列をfilterメソッドを用いてフィルタ
const containsTa = names.filter((name) => name.includes('田'));
// ログ出力
console.log(containsTa); // [ '田中', '山田', '中田' ]数値の配列から偶数だけを抽出する
以下のプログラムは、数値の配列から偶数だけを抽出しているサンプルコードです。
// filter対象の配列
const numbers = [1, 2, 3, 4, 5, 6];
// 配列をfilterメソッドを用いてフィルタ
const evens = numbers.filter((num) => num % 2 === 0);
// ログ出力
console.log(evens); // [2, 4, 6]数値を2で割った余りが0(num % 2 === 0)であるかどうかをチェックしています。
数値の配列から奇数だけを抽出する
以下のプログラムは、数値の配列から奇数だけを抽出しているサンプルコードです。
// filter対象の配列
const numbers = [1, 2, 3, 4, 5, 6];
// 配列をfilterメソッドを用いてフィルタ
const odds = numbers.filter((num) => num % 2 !== 0);
// ログ出力
console.log(odds); // [1, 3, 5]数値を2で割った余りが0(num % 2 !== 0)でないかどうかを判定しています。
数値の配列から50以上の値だけを抽出する
以下のプログラムは、数値の配列から50以上の値だけを抽出しているサンプルコードです。
// filter対象の配列
const numbers = [10, 20, 30, 40, 50, 60, 70];
// 配列をfilterメソッドを用いてフィルタ
const overFifty = numbers.filter((num) => num >= 50);
// ログ出力
console.log(overFifty); // [50, 60, 70]数値が50以上(num >= 50)であるかを判定しています。
数値の配列から素数だけを抽出する
以下のプログラムは、数値の配列から素数だけを抽出しているサンプルコードです。
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
function isPrime(num) {
for (let i = 2; num > i; i++) {
if (num % i === 0) {
return false;
}
}
return num > 1;
}
console.log(numbers.filter(isPrime)); // [ 2, 3, 5, 7, 11, 13 ]オブジェクトの配列から特定の条件を満たすオブジェクトだけを抽出する
以下のプログラムは、オブジェクトの配列から25歳以上のオブジェクトだけを抽出しているサンプルコードです。
// filter対象の配列
const people = [
{ name: 'John', age: 24 },
{ name: 'Ken', age: 30 },
{ name: 'Mike', age: 22 },
];
// 配列をfilterメソッドを用いてフィルタ
const olderThan25 = people.filter((person) => person.age >= 25);
// ログ出力
console.log(olderThan25); // [ { name: 'Ken', age: 30 } ]配列からnullやundefinedなどのfalsyな値を取り除く
以下のプログラムは、配列から配列からnullやundefinedなどのfalsyな値を取り除くサンプルコードです。
// filter対象の配列
const values = [1, null, 'apple', undefined, '', 0, 'orange'];
// 配列をfilterメソッドを用いてフィルタ
const truthyValues = values.filter(Boolean);
// ログ出力
console.log(truthyValues); // [ 1, 'apple', 'orange' ]filterメソッドの各引数(index、array、thisArg)の使い方
filterメソッドに用いる各引数の使い方をこれから説明します。
filterメソッドの引数(indexの使い方)
filterメソッドのコールバッグ関数の引数に指定できるindexは配列の現在の要素の位置を表します。これを利用して、特定の位置の要素だけを取り出すなどの操作ができます。
// filter対象の配列
const numbers = [10, 20, 30, 40, 50];
// 配列をfilterメソッドを用いてフィルタ
const everySecondItem = numbers.filter((num, index) => index % 2 === 0);
// ログ出力
console.log(everySecondItem); // [ 10, 30, 50 ]filterメソッドの引数(arrayの使い方)
filterメソッドのコールバッグ関数の引数に指定できるarrayはfilterメソッドが呼び出された元の配列を指します。これを利用して、他の要素との比較などの操作ができます。
// filter対象の配列
const numbers = [10, 20, 30, 40, 50];
// 配列をfilterメソッドを用いてフィルタ
const greaterThanFirst = numbers.filter((num, _, arr) => num > arr[0]);
// ログ出力
console.log(greaterThanFirst); // [20, 30, 40, 50]filterメソッドの引数(thisArgの使い方)
filterメソッドの引数に指定できるthisArgはコールバック関数内でthisとして利用されるオブジェクトを指定するものです。以下のプログラムでは、filterメソッドのコールバック関数内でthisはobjを指しているため、this.valueは 3となります。その結果、3より大きい数値だけがフィルタリングされて返されます。
const obj = {
value: 3,
};
const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(function (number) {
return number > this.value;
}, obj);
console.log(filteredNumbers); // [4, 5]filterメソッドなどの配列メソッドで第2引数にthisArg（ここではobj）を渡すと、コールバック関数内でそのobjがthisとして参照されます。
アロー関数は、自身のスコープ内でthisを持たない特性があります。そのため、filterメソッドの第2引数にthisArg(ここではobj) を渡しても、コールバック関数内でそのobjがthisとして正しく参照することができません。そのため、通常の関数(functionキーワードを使った関数)を使用しています。
filterメソッドの注意点
filterメソッドを使う上での注意点を以下に示します。
filterメソッドは新しい配列を返すので、元の配列は変更されません。- フィルタリング条件に一致する要素がない場合、空の配列を返します。
各注意点についてプログラム例を用いて説明します。
filterメソッドは新しい配列を返すので、元の配列は変更されません
以下に示すようにfilterメソッドを呼び出しても元の配列には影響を与えません。
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter((num) => num % 2 === 0);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(evens); // [2, 4]フィルタリング条件に一致する要素がない場合、空の配列を返します
numbers配列に偶数が含まれていないため、evensは空の配列として返されています。
const numbers = [1, 3, 5, 7, 9];
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // []本記事のまとめ
この記事ではJavaScriptの『filterメソッド』について、以下の内容を説明しました。
filterメソッドとはfilterメソッドの構文filterメソッドの使い方filterメソッドの各引数(index、array、thisArg)の使い方filterメソッドの注意点
お読み頂きありがとうございました。