JavaScript配列のindexOf()関数：配列内の要素の最初の出現位置を探す

定義と使い方

配列においてindexOf()関数は
引数として渡された配列の要素を検索し、その要素が最初に検索された（出現した）インデックスを返します。引数として渡された要素を見つけることができない場合は-1を返します。

この関数は、配列内で要素の位置を特定したり、存在しているかどうかを確認する際に便利です。

この関数は大文字と小文字を区別します。

基本例

JavaScript

const colors = ["red", "green", "blue", "red"];

/*
 * 注意してください！
 * 配列ではインデックスは0から始まります。
 * 最初の要素のインデックスは0で、2番目の要素のインデックスは1です。
*/

// 配列colorsから要素「red」を検索し、最初に検索された（出現した）要素のインデックスを返します。
const red = colors.indexOf("red");
console.log(red); // 出力：0

// 配列colorsから引数として渡された要素「yellow」を見つけることができないため、-1を返します。
const yellow = colors.indexOf("yellow");
console.log(yellow); // 出力：-1

const blue = colors.indexOf("blue", 1);
// 2番目の引数は検索を開始するインデックスです。
// この引数はオプションで、省略した場合は先頭（0）から検索します。
// 引数の値が1であるため、2番目の要素から検索した場合でも要素「blue」は検索対象となり、
// 配列の先頭（インデックス0）から数えた要素「blue」のインデックスは2になります。

console.log(blue); // 出力：2

参考にしてください！
文字列では文字列のindexOf() が同じ役割を果たします。

参考にしてください！
配列においてlastIndexOf()関数は、引数として渡された配列の要素を検索し、その要素が最後に出現した位置を返します。

構文

arrはindexOf()関数を適用する配列です。

引数

配列のindexOf()関数の引数の説明
`searchElement`	必須。配列内で検索する要素です。大文字と小文字を区別します。
`fromIndex`	オプション。検索を開始する`0`始まりのインデックスです。省略した場合、デフォルト値として`0`が使用されます。負の値を指定することもでき、その場合は配列の末尾から逆方向にカウントされます。ただし、検索自体は左から右へ行われます。配列の長さ（`arr.length`）以上の値を指定した場合は`-1`を返します。

戻り値

配列において引数として渡された要素を検索し、最初に検索された（出現した）要素のインデックスを返します。引数として渡された要素が見つからない場合は-1を返します。

引数と戻り値の例

JavaScript

/*
 * 引数として渡された要素が配列内に重複して存在する場合、
 * 最初に検索された（出現した）要素のインデックスを返します。
*/
const colors = ["red", "green", "green", "blue"];

// 配列colorsから要素「green」を検索し、最初に検索された（出現した）要素のインデックスを返します。
const green = colors.indexOf("green");

// 配列colorsには要素「green」が2つ存在します。
// インデックス1と2にあります。
// しかし、最初に検索された要素のインデックスである1を返します。
console.log(green); // 出力：1;


/*
 * arr.indexOf(searchElement[, fromIndex])
 *
 * オプション（任意）で指定するfromIndexが負の値の場合、
 * 配列の末尾から逆方向にカウントされます。
 * ただし、検索はあくまで左から右へ行われます。
*/
const fruits = ["apple", "bannana", "orange", "mango"];
const index = fruits.indexOf("mango", -2);

console.log(index); // 出力：3
// fromIndexの値は-2です。
// 配列の末尾から逆にカウントされるため、
// 末尾から2番目の要素である「orange」から検索を開始します。
// ただし、検索自体は左から右へ行われます。
// 探している要素「mango」は「orange」の右側に存在するため、
// fruits配列における「mango」のインデックスである3が出力されます。

注意点

配列のindexOf()関数ではNaNを検索することはできません。

配列のindexOf()関数で文字列を検索する場合は、大文字と小文字を区別します。

JavaScript

const colors = ["red", "green", "blue"];
const red = colors.indexOf("Red");

// 大文字の「R」と小文字の「r」は区別されます。
console.log(red); // 出力：-1

さまざまな活用例

配列におけるindexOf()関数に関するさまざまな活用例です。

配列内の要素の存在確認

配列に特定の要素が含まれているかを確認する際は、一般的にincludes()関数が使用されますが、indexOf()関数も配列内の要素の存在有無を確認する用途で有用です。引数として渡された要素が見つからない場合に-1を返すためです。

JavaScript

const arr = [1, 2, 3, 4, 5];
const element = 3;

if (arr.indexOf(element) !== -1) {
    console.log(`${element}は配列に存在します。`);
} else {
    console.log(`${element}は配列に存在しません。`);
}

// 出力：`3は配列に存在します。`

配列の重複要素を削除する

以下の例は、indexOf()関数とforEach()反復処理を使用して、配列から重複した要素を削除する方法を示しています。この例では、配列arrから重複要素を除外し、新しい配列uniqueArrを生成します。

JavaScript

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];

arr.forEach(element => {
    if (uniqueArr.indexOf(element) === -1) {
        uniqueArr.push(element);
    }
});

console.log(uniqueArr); // 出力： [1, 2, 3, 4, 5]

コード補足説明
forEach()関数は、配列を順に走査し、各要素をコールバック関数で処理するための関数です。

コード補足説明
push()関数は、配列の末尾に1つ以上の要素を追加（push、後ろから押し込む）します。

このコードはforEach()反復処理を使用して配列を走査し、要素をuniqueArrに追加する前にindexOf()関数で重複を確認し、重複していない場合のみ要素を追加します。このコードは配列の重複を削除する用途において問題なく動作します。

配列のサイズがそれほど大きくなく、コードも簡単な場合は上記のコードで十分ですが、配列が大きくなるとindexOf()関数が各要素を検索するため、パフォーマンス上の問題が発生する可能性があります。そのような場合は、Setオブジェクトを使用する方法を検討するとよいでしょう。Setオブジェクトは重複した値を許可せず、重複が自動的に除外されるため、パフォーマンス面での利点があります。

コード補足説明
Array.from()関数は、指定した配列風オブジェクトやイテラブルオブジェクトを新しい配列に変換して返す関数です。本例で使用しているSetはイテラブルオブジェクトです。

この方法はSetオブジェクトを使用して重複要素を自動的に除外し、再度配列に変換することで、重複が削除された新しい配列を返します。

特定の範囲内で要素の存在有無を確認

JavaScript

const arr = [1, 2, 3, 4, 5];
const element = 3;
const startIndex = 1;
const endIndex = 3;
const subArray = arr.slice(startIndex, endIndex + 1);

if (subArray.indexOf(element) !== -1) {
    console.log(`${element}は指定した範囲内で配列に存在します。`);
} else {
    console.log(`${element}は指定した範囲内で配列に存在しません。`);
}

// 出力：「3は指定した範囲内で配列に存在します。」

コード補足説明
配列のslice()関数は、配列の特定範囲の要素を切り出し（slice）、抽出した結果を新しい配列として返します。

上記のコードではslice()関数を使用して、指定されたstartIndexとendIndexを基準に配列の一部を抽出し、抽出した部分配列に対してindexOf()関数を用いて要素の存在有無を確認しています。