Array.prototype.filter() - JavaScriptで必要な要素抽出！filter()メソッド入門
JavaScriptの`Array.prototype.filter()`メソッドは、配列の要素をフィルタリングして新しい配列を作成するための強力なツールです。このメソッドを使うことで、特定の条件に一致する要素だけを抽出することができます。この記事では、`filter()`メソッドの基本的な使い方から応用例までを詳しく解説します。
filter()メソッドの基本
`filter()`メソッドは、元の配列を変更せずに新しい配列を返します。新しい配列には、指定した条件を満たす要素だけが含まれます。以下は基本的な構文です。
const newArray = array.filter(callback(element[, index[, array]])[, thisArg]);- `callback`：各要素に対して実行される関数。この関数は、条件を満たすかどうかを判定します。
- `element`：現在の要素。
- `index`（オプション）：現在の要素のインデックス。
- `array`（オプション）：`filter()`が呼び出された配列。
- `thisArg`（オプション）：`callback`関数内で`this`として使用される値。
基本的な例
以下は、配列から偶数の要素だけを抽出する例です。
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]この例では、`number % 2 === 0`という条件を満たす要素だけが新しい配列に含まれます。
複数の条件を使用する
`filter()`メソッドは、複数の条件を組み合わせて使用することもできます。以下は、配列から偶数かつ3以上の要素を抽出する例です。
const numbers = [1, 2, 3, 4, 5, 6];
const filteredNumbers = numbers.filter(number => number % 2 === 0 && number >= 3);
console.log(filteredNumbers); // [4, 6]オブジェクトの配列をフィルタリングする
`filter()`メソッドは、オブジェクトの配列をフィルタリングする際にも非常に便利です。以下は、特定のプロパティ値を持つオブジェクトだけを抽出する例です。
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const usersOver30 = users.filter(user => user.age > 30);
console.log(usersOver30); // [{ name: 'Charlie', age: 35 }]thisArgの使用
`filter()`メソッドの第2引数として`thisArg`を指定することで、`callback`関数内で`this`を特定の値に設定することができます。
const numbers = [1, 2, 3, 4, 5, 6];
const context = { threshold: 3 };
const filteredNumbers = numbers.filter(function(number) {
return number > this.threshold;
}, context);
console.log(filteredNumbers); // [4, 5, 6]まとめ
`Array.prototype.filter()`メソッドは、配列の要素をフィルタリングして新しい配列を作成するための非常に便利なツールです。基本的な使い方から応用例までを理解することで、より効率的にデータを操作することができます。ぜひ、この記事を参考にして`filter()`メソッドを活用してみてください。