配列を取り扱うプログラムを書いていくと、データの中に特定の文字列や数値が含まれているかどうか確認したい場面が出てきます。
そのような場合に検索メソッドを使うことで、とても簡単に配列のデータを検索することができる、非常に便利です。

そこで今回は、検索に使えるindexOf、find、filterメソッドの使い方を解説していきます。

indexOfメソッド

indexOfメソッドは、配列の要素から検索したい指定の要素を探し、要素が存在する場所を検索してくれます。
この時、インデックスで存在する場所を教えてくれます。

const arr = ['Good morning', 'Good afternoon', 'Good evening'];

console.log(arr.indexOf('Good morning')); // 0
console.log(arr.indexOf('Good afternoon')); // 1
console.log(arr.indexOf('Good evening')); // 2

上記すべての要素を検索すると、それぞれの要素が位置するインデックスが返っているのが分かります。

配列の要素の数が多い場合、検索する範囲を指定することも可能です。

const arr = [
  'Good morning',
  'Good afternoon',
  'Good evening',
  'おはよう',
  'こんにちは',
  'こんばんは',
  'Good morning',
  'Good afternoon',
  'Good evening'
];

const result = arr.indexOf('Good afternoon', 5);

console.log(result);  // 7

indexOf('Good afternoon', 5)では、第1引数に検索したい文字列と、第2引数に検索を開始したいインデックスを記述しています。この場合は、6番目の要素から検索するという意味です。

その結果、'Good afternoon‘は配列の中に2つ存在しますが、7番目にある要素だけが検索範囲に当てはまるため、7が出力されます。

次に、配列に存在しない要素を検索するとどうなるのか見てみましょう。

const arr = [
  'Good morning',
  'Good afternoon',
  'Good evening',
];

const result = arr.indexOf('Hello');

console.log(result);  // -1

配列に存在しない要素を検索すると、-1が戻り値として返ってきます。

findメソッド

findメソッドは、条件に一致する要素、つまりtrueを返す要素を配列の先頭から検索します。
条件に一致したはじめの配列要素を戻り値として返します。

const arr = [10, 28, 30, 40, 50];

const result = arr.find(value => {
  return value % 7 === 0;
});

console.log(result);  // 28

value % 7 === 0は、7で割り切れる値の計算です。
findメソッドで7で割り切れる値を配列の中から順番に探します。そのため、28という出力結果になります。

findメソッドはtrueを返すと検索が止まり、要素が見つからなければundefinedを返します。

const arr = [10, 28, 30, 40, 50];

const devideArr = arr.find(value => value % 10 === 0);
console.log(devideArr);  // 10

const findArr = arr.find(value => value > 100);
console.log(findArr); // undefined

変数devideArrでは、10で割り切れる値を探しています。
10で割り切れる値が見つかればその時点で検索を止めるため、条件に一致するはじめの要素10のみが出力されています。

変数findArrでは、100より大きい値を探しています。
配列には一致するものが含まれないため、undefinedと出力されます。

filterメソッド

filterメソッドは、条件に一致する要素を検索し、一致したすべての要素の配列を返します。

const arr = [10, 28, 30, 40, 50];

const result = arr.filter(value => {
  return value % 10 === 0
});

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

10で割り切れる値をすべて検索し、配列として返しています。

findメソッドが条件に一致するはじめの要素を返すのに対し、filterメソッドは条件に一致する要素すべてを配列に入れて返すという違いがあります。

filterメソッドでは、条件に一致する要素が見つからない場合、空の配列を返します。

const arr = [10, 28, 30, 40, 50];

const result = arr.filter(value => value < 10);

console.log(result);  // []

また、オブジェクトの配列をfilterメソッドで検索することもできます。

const disneyCharacters = [ 
  {name: 'Mickey Mouse', type: 'mouse'},
  {name: 'Cinderella', type: 'princess'},
  {name: 'Donald Duck', type: 'duck'},
  {name: 'Dumbo', type: 'elephant'},
  {name: 'Jasmine', type: 'princess'}
];

const findPrincesses = disneyCharacters.filter(princess => {
  return princess.type === 'princess';
});

console.log(findPrincesses);
// [{name: 'Cinderella', type: 'princess'}, {name: 'Jasmine', type: 'princess'}]

filterメソッドの実用的な使用例として、プロパティで管理するオブジェクトの配列を操作する場面があります。一見複雑そうにも見えますが、オブジェクトの配列をfilterメソッドで検索しているというシンプルな構造です。

上記は、filterメソッドで'princess'というtypeの値を持っている要素をフィルタリングした結果です。
このように、filterメソッドを活用すると、データの中から効率良く条件に合うものを探すことができます。

まとめ

今回は、検索に役立つメソッドを解説しました。

// ポイント
* indexOfメソッドは、指定の要素を検索し、その要素のインデックスを返す
* findメソッドは、条件に一致するはじめの要素を返す
* filterメソッドは、条件に一致するすべての要素を配列で返す

ポイントをおさえて、実践の場で使用してみてください。

配列メソッドの関連記事

・配列メソッド -追加・削除・抜き取り・分割・結合
・配列メソッド -検索（当記事）
・配列メソッド -並び替え
・配列メソッド -繰り返し
・配列メソッド -新しい配列
・配列メソッド -forEach・map・filterの違い