実行環境 Node.js 15.2.1

公開日 November 27, 2020, GMT+9

更新日 January 12, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

こちらはArrayオブジェクト(配列)のindexOfメソッドのページです。
Stringオブジェクト(文字列)のindexOfメソッドはStringオブジェクトのindexOfの使用方法 を参照してください。

indexOf(Array、配列)

このページでは豊富な例を用いてJavaScript(js)のArrayオブジェクト(配列)のindexOfの使い方を学ぶことができます。

JavaScript(js)のindexOfはArrayオブジェクト(配列)のメソッドの1つです。
indexOfは呼び出し元の配列に対して、第1引数で指定された値を検索し、最初に検索にマッチした要素のインデックスを返り値として返します。

第2引数に数値を指定し、検索を始めるインデックス位置を指定することもできます。

TL;DR

基本

// 配列を検索し、最初にマッチした要素のインデックス番号を返す
const array1 = ['js', 'ts', 'py', 'go', 'js'];
const targetIndex1 = array1.indexOf('js');
// 最初の要素のインデックスが得られる
console.log(targetIndex1);
==> 0

// for文で同様の検索処理をしようとする場合の一例
let targetIndex2;
for (let i = 0; i < array1.length; i++) {
  if (array1[i] === 'js') {
    targetIndex2 = i;
    break;
  }
}
console.log(targetIndex2);
==> 0



// 配列の要素が数値の場合
const array2 = [1, 2, 3, 4, 5];
const targetIndex3 = array2.indexOf(2);
console.log(targetIndex3);
==> 1



// 引数で与えた値が見つからなかった場合
const array3 = [1, 2, 3, 4, 5];
const targetIndex4 = array3.indexOf(0);
// -1が結果として得られる
console.log(targetIndex4);
==> -1



// 配列の要素と引数は厳密な一致(===を用いた比較、strict equality)が行われる
const array4 = [100, 200, 300, 400, 500];
const targetIndex5 = array4.indexOf('300');
// '300'(文字列の300)は配列の要素に存在しない
console.log(targetIndex5);
==> -1
const targetIndex6 = array4.indexOf(300);
console.log(targetIndex6);
==> 2



// オブジェクト同士の比較の場合、同一構造でもオブジェクト自体が異なるので検索にマッチしない
const array5 = [{ id: 1, name: 'Joshua' }, { id: 2, name: 'Ben' }];
const targetIndex7 = array5.indexOf({ id: 1, name: 'Joshua' });
console.log(targetIndex7);
==> -1

検索を始めるインデックス位置の指定

// 第2引数に数値を指定することで検索を始めるインデックス位置を指定できる
const array1 = ['JavaScript', 'Python', 'Golang', 'Java', 'JavaScript'];
const targetIndex1 = array1.indexOf('JavaScript', 1);
// 末尾の'JavaScript'のインデックスが得られる
console.log(targetIndex1);
==> 4
// 0を指定した場合は実質的にすべての配列の要素を検索する
const targetIndex2 = array1.indexOf('JavaScript', 0);
console.log(targetIndex2);
==> 0



// 負の値を第2引数に指定すると末尾からのインデックス位置から検索を始める
const array2 = [100, 200, 300, 400, 100, 500];
const targetIndex3 = array2.indexOf(100, -2);
console.log(targetIndex3);
==> 4

解説

基本

Arrayオブジェクト(配列)のindexOfメソッドは第1引数に与えた値を呼び出し元の配列に対して検索し、 一番初めに一致した要素のインデックスを返り値として返します。
第1引数の値が配列の要素に存在しない場合は-1を返り値として返します。

また、第1引数にはどんな型のオブジェクトも指定することができますが、 検索する際の配列の要素との比較には厳密な一致(===、strict equality)が用いられ、 ゆるい一致(==、loose equality)の要素にはマッチしません。

const array1 = [1, 2, 3, 1, 2, 3];
const targetIndex1 = array1.indexOf(3);
console.log(targetIndex1);
==> 2



const array2 = ['javascript', 'python', 'kotlin', 'smalltalk'];
const targetIndex2 = array2.indexOf('js');
console.log(targetIndex2);
==> -1



const array3 = [1.41, 1.73, 2, 2.23];
const targetIndex3 = array3.indexOf('1.73');
console.log(targetIndex3);
==> -1
const targetIndex4 = array3.indexOf(1.73);
console.log(targetIndex4);
==> 1

検索を始めるインデックス位置の指定

indexOfメソッドの第2引数には、呼び出し元の配列のどのインデックスから検索を始めるかの数値を指定することができます。
第2引数で指定したインデックスから末尾まで検索が行われ、それ以前のインデックスに対しては検索が行われません。

また、値が0の場合は第2引数を指定しなかった際と挙動が同じになり、 負の値を指定した場合は配列末尾からのインデックスを指定することになります。

const array1 = [1, 2, 3, 1, 2, 3];
const targetIndex1 = array1.indexOf(1, 2);
console.log(targetIndex1);
==> 3
const targetIndex2 = array1.indexOf(1, 4);
console.log(targetIndex2);
==> -1



const array2 = [1, 2, 3, 1, 2, 3];
const targetIndex3 = array2.indexOf(2, -2);
console.log(targetIndex3);
==> 4

1次情報

Array.prototype.indexOf() - MDN web docs

Equality comparisons and sameness - MDN web docs