Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

  1. トップページ
  2. JavaScript辞典
  3. 配列.filter() / find() / findIndex()

配列.filter() / find() / findIndex()対応: ES5(ECMAScript 2009)

配列の中から条件に一致する要素を抽出・検索するメソッドです。『filter()』は条件を満たすすべての要素を、『find()』は最初の1つだけを返します。

構文
// 条件に一致するすべての要素を抽出します。
var result = 配列.filter(function(要素, インデックス, 配列) {
	return 条件式;
});

// 条件に一致する最初の要素を返します。
var item = 配列.find(function(要素, インデックス, 配列) {
	return 条件式;
});

// 条件に一致する最初の要素のインデックスを返します。
var index = 配列.findIndex(function(要素, インデックス, 配列) {
	return 条件式;
});
メソッド一覧
メソッド概要
filter(関数)条件に一致するすべての要素を含む新しい配列を返します。一致する要素がない場合は空の配列を返します。
find(関数)条件に一致する最初の要素を返します。見つからない場合は『undefined』を返します。
findIndex(関数)条件に一致する最初の要素のインデックスを返します。見つからない場合は『-1』を返します。
サンプルコード
var scores = [45, 82, 70, 95, 60, 38];

// 70点以上のスコアをすべて抽出します。
var passed = scores.filter(function(score) {
	return score >= 70;
});
console.log(passed); // 『82,70,95』と出力されます。

// 最初に見つかった80点以上のスコアを返します。
var first = scores.find(function(score) {
	return score >= 80;
});
console.log(first); // 『82』と出力されます。

// 最初に見つかった80点以上のスコアの位置を返します。
var index = scores.findIndex(function(score) {
	return score >= 80;
});
console.log(index); // 『1』と出力されます。

// オブジェクトの配列から検索します。
var users = [
	{ name: "太郎", age: 25 },
	{ name: "花子", age: 30 },
	{ name: "次郎", age: 20 }
];
var user = users.find(function(u) {
	return u.name === "花子";
});
console.log(user.age); // 『30』と出力されます。
実行結果
[82, 70, 95]   // filter: 70点以上のすべてのスコア
82             // find: 最初の80点以上のスコア
1              // findIndex: 82のインデックス
30             // 花子のage
概要

『配列.filter()』は配列の各要素に対してコールバック関数を実行し、『true』を返した要素だけを集めた新しい配列を作成します。元の配列は変更されません。条件に一致する要素がひとつもない場合は空の配列が返されるため、結果の配列に対して安全にループ処理を行うことができます。

『配列.find()』は条件に一致する最初の1つの要素だけを返すメソッドで、オブジェクトの配列から特定の項目を探すときに便利です。見つからなかった場合は『undefined』が返されるため、存在しない可能性がある場合は必ずチェックしてから使用してください。『配列.findIndex()』は要素そのものではなくインデックスを返す点が異なります。

単純に値が含まれているかどうかだけを調べたい場合は『配列.includes()』、すべての要素や一部の要素が条件を満たすかを判定したい場合は『配列.some() / 配列.every()』を使用してください。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。