【JavaScriptの基本】配列での検索に使えるメソッド -indexOf・find・filter-

JavaScriptには、配列要素を探すために用意されているメソッドがいくつかあります。

配列を取り扱うプログラムを書いていくと、データの中に特定の文字列や数値が含まれているかどうか確認したい場面が出てきます。

そのような場合に検索メソッドを使うことで、とても簡単に配列のデータを検索することができる、非常に便利です。

そこで今回は、「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

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

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

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

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

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

console.log(result);  //-1

実行結果
indexOf

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

findメソッド

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

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

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

console.log(result);  //28

実行結果
find

「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

実行結果
find

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

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

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]

実行結果
filter

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