astris.design

［JS］配列の検索メソッド indexOf, find, filter, includes, some, every

JavaScriptのArrayオブジェクトの検索メソッドには、indexOf、lastIndexOf、find、findIndex、filter、includes、some、everyがあります。それぞれの違いと使い分けについて、解説します（サンプルあり）。

【目次・配列の検索メソッド】

indexOf, lastIndexOf：値で検索

indexOfメソッドは、配列の先頭から要素を検索し、指定した値を持つ最初の要素のインデックスを返します。
lastIndexOfメソッドは、配列の末尾から検索します。
値が等しい要素がない場合は、-1を返します。
第2引数には、検索を開始するインデックスを指定します（省略可）。負数を指定すると、末尾からのオフセットとなります。
値の比較は、厳密な等価演算子（===）と同等です。
配列の要素がオブジェクトの場合は、引数と要素の参照先が同じかどうかで判定します。
オブジェクトのプロパティの値で検索する場合は、次に紹介するfindメソッドを使用します。

構文
配列.indexOf( 検索する値, 開始インデックス );

サンプル

indexof.js
const array = [0, 3, 1, 2, 3, 5];
console.log(array.indexOf(3));
//「1」
console.log(array.indexOf(3, 2));
//「4」
console.log(array.indexOf(3, -1));
//「-1」
console.log(array.lastIndexOf(3));
//「4」

find, findIndex：条件式で検索

findメソッドは、配列の先頭から要素を検索し、条件式に合致する最初の要素の値を返します。
条件式に合致する要素がない場合は、undefinedを返します。
条件式に合致する全ての要素を抽出する場合は、次に紹介するfilterメソッドを使用します。

findIndexメソッドは、条件式に合致する最初の要素のインデックスを返します。
条件式に合致する要素がない場合は、-1を返します。

条件式は、真偽値を返すコールバック関数として記述します。
第1引数で要素の値、第2引数でインデックス、第3引数で配列そのものを受け取ります。

構文
配列.find(( 値, インデックス, 元の配列 ) => {
  return 条件式;
});

サンプル

find.js
const members = [
  { name: '佐藤', position: 'SE' },
  { name: '江藤', position: 'PM' },
  { name: '須藤', position: 'PG' },
  { name: '伊藤', position: 'PG' },
  { name: '加藤', position: 'SE' },
];
console.log(members.find(member => member.position === 'PG'));
//「{ name: '須藤', position: 'PG' }」
console.log(members.find(member => member.position === 'Chief'));
//「undefined」
console.log(members.findIndex(member => member.position === 'PG'));
//「2」

filter：条件式で抽出

filterメソッドは、条件式に合致する全ての要素を抽出し、配列の形で返します。
条件式に合致する要素がない場合は、空配列を返します。
filterメソッドは、呼び出した配列そのものには、影響を与えません。
条件式は、真偽値を返すコールバック関数として記述します。
第1引数で要素の値、第2引数でインデックス、第3引数で配列そのものを受け取ります。

構文
配列.filter(( 値, インデックス, 元の配列 ) => {
  return 条件式;
});

サンプル

filter.js
const members = [
  { name: '佐藤', position: 'SE' },
  { name: '江藤', position: 'PM' },
  { name: '須藤', position: 'PG' },
  { name: '伊藤', position: 'PG' },
  { name: '加藤', position: 'SE' },
];
console.log(members.filter(member => member.position === 'PG'));
//「[ { name: '須藤', position: 'PG' }, { name: '伊藤', position: 'PG' } ]」
console.log(members.filter(member => member.position === 'Chief'));
//「[]」

includes：値で存在チェック

includesメソッドは、指定した値が、配列に含まれているかどうかを調べます。
引数の値が配列に含まれている場合はtrueを、含まれていない場合はfalseを返します。
値の比較は、厳密な等価演算子（===）とほぼ同等ですが、NaN値はNaN値と等しいと判定します。
indexOfメソッドではNaN値同士が等しいと判定されないため、NaN値の存在チェックはincludesメソッドを使用します。
includesメソッドは、ES2016で既定されました。

includes.js
const array = [0, NaN, 2, 3, 5];
console.log(array.includes(NaN));
//「true」
console.log(array[1] === NaN);
//「false」
console.log(array.indexOf(NaN));
//「-1」

some, every：条件式で存在チェック

someメソッドは、条件式に合致する要素が、配列に含まれているかどうかを調べます。
条件式に合致する要素が含まれている場合はtrueを、含まれていない場合はfalseを返します。

everyメソッドは、配列の全ての要素が、条件式に合致するかどうかを調べます。
全ての要素が条件式に合致している場合はtrueを、一つでも合致しない要素があればfalseを返します。

条件式は、真偽値を返すコールバック関数として記述します。
第1引数で要素の値、第2引数でインデックス、第3引数で配列そのものを受け取ります。

構文
配列.some(( 値, インデックス, 元の配列 ) => {
  return 条件式;
});

サンプル

some_every.js
const members = [
  { name: '佐藤', position: 'SE' },
  { name: '江藤', position: 'PM' },
  { name: '須藤', position: 'PG' },
  { name: '伊藤', position: 'PG' },
  { name: '加藤', position: 'SE' },
];
console.log(members.some(member => member.position === 'SE'));
//「true」
console.log(members.every(member => member.position === 'SE'));
//「false」

まとめ

JavaScriptの配列の検索メソッドについて、解説しました。
それぞれの用途は、以下のようになります。

  • indexOf：値で検索（先頭から）
  • lastIndexOf：値で検索（末尾から）
  • find：条件式で検索（値を返す）
  • findIndex：条件式で検索（インデックスを返す）
  • filter：条件式で抽出
  • includes：値で存在チェック
  • some：条件式で存在チェック（いずれかが合致）
  • every：条件式で存在チェック（全て合致）