JavaScript - 配列の要素を検索する

Array.prototype.indexOf()

indexOf() メソッドは引数に与えられた内容と同じ内容を持つ配列要素の内、最初のものの添字を返します。存在しない場合は -1 を返します。indexOf の構文は以下のとおりです。

arr.indexOf(searchElement[, fromIndex])
indexOf() メソッド
searchElement
検索する配列要素です。
fromIndex
検索を始める添字です。もしこの添字が配列の長さ以上の場合は -1 が返され、配列は検索されません。負の数の場合、これは配列の末尾からのオフセットとみなされます。なお、この添字が負の数であっても、配列は前から後ろに検索されることに注意してください。指定された添字が 0 であれば、配列全体が検索されます。既定値は 0 (配列全体を検索) です。このパラメータは、オプションであるため省略可能です。

indexOf の返り値は、見つかった配列要素の最初の添字です。見つからなかった場合は -1 です。

var array = [2, 9, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
indexOf() メソッド

indexOf は、ある要素が見つかった時点で検索を中止するため、注意が必要です。

var array = [2, 9, 9];
array.indexOf(9);     // 1
indexOf() メソッド

ある要素の存在をすべて見つけるためには、以下のように記述します。

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices); // [0, 2, 4]
indexOf() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
9121.5137
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

String.prototype.lastIndexOf()

lastIndexOf() メソッドは、呼び出す String オブジェクト中で fromIndex から逆方向に検索し、指定された値が最後に現れるインデックスを返します。値が見つけられない場合 -1 を返します。lastIndexOf の構文は以下のとおりです。

str.lastIndexOf(searchValue[, fromIndex])
lastIndexOf() メソッド
searchValue
検索する値を表す文字列です。searchValue が空文字列だった場合、fromIndex が返されます。
fromIndex
文字列内で検索を始める位置です。デフォルト値は +Infinity です。fromIndex >= str.length の場合、文字列全体が検索対象になります。fromIndex < 0 の場合 0 の場合と同じ動作をします。このパラメータは、オプションであるため省略可能です。

lastIndexOf の返り値は、指定された値が最後に現れるインデックスを返します。見つからなかった場合は -1 です。

'canal'.lastIndexOf('a');     // 3
'canal'.lastIndexOf('a', 2);  // 1
'canal'.lastIndexOf('a', 0);  // -1
'canal'.lastIndexOf('x');     // -1
'canal'.lastIndexOf('c', -5); // 0
'canal'.lastIndexOf('c', 0);  // 0
'canal'.lastIndexOf('');      // 5
'canal'.lastIndexOf('', 2);   // 2
lastIndexOf() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
612111
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

Array.prototype.find()

find() メソッドは、提供されたテスト関数を満たす配列内の最初の要素の値を返します。find の構文は以下のとおりです。

arr.find(callback(element[, index[, array]])[, thisArg])
find() メソッド
callback
配列内の各要素に対して実行する関数で、次の 3 つの引数を取ります。
  • element: 配列内で現在処理されている要素です。
  • index: 配列内で現在処理されている要素の添字 (位置) です。(オプション)
  • array: find を呼び出した元の配列です。(オプション)
thisArg
callback 内で this として使われるオブジェクトです。このパラメータは、オプションであるため省略可能です。

find の返り値は、配列の中で提供されたテスト関数を満足する最初の要素の値です。見つからなかった場合は undefined を返します。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found); // 12
find() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
1225458328
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

Array.prototype.findIndex()

findIndex() メソッドは、配列内の要素が指定されたテスト関数を満たす場合、配列内のインデックスを返します。そうでない場合は -1 を返します。findIndex の構文は以下のとおりです。

arr.findIndex(callback[, thisArg])
findIndex() メソッド
callback
配列内の各要素に対して実行する関数で、次の 3 つの引数を取ります。
  • element: 配列内で現在処理されている要素です。
  • index: 配列内で現在処理されている要素の添字 (位置) です。(オプション)
  • array: findIndex を呼び出した元の配列です。(オプション)
thisArg
callback 内で this として使われるオブジェクトです。このパラメータは、オプションであるため省略可能です。

find の返り値は、テストを満たした配列の要素のインデックスを返します。満たさなければ -1を返します。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber)); // 3
findIndex() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
1225458328
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

関連記事