【JavaScript入門】indexOf()とlastIndexOf()の違いは？ | 配列のindex検索

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptの配列-MethodであるindexOf()とlastIndexOf()の違いについて解説して行きます。

1 Array.prototype.indexOf()
2 Array.prototype.lastIndexOf()
3 Sample-Code & 要点まとめ
4 まとめ
5 JavaScript書籍 Ver. 中級-上級者向け
6 JavaScript書籍 Ver. 初級者向け
7 参考・引用
8 最近の投稿

Array.prototype.indexOf()

indexOfは、引数の値で配列内を検索して「最初」に発見した要素のindex番号を返してくれるメソッドです。

indexOf() メソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。
存在しない場合は -1 を返します。
引用元： MDN: Array.prototype.indexOf()

MDNを元に、indexOfメソッドの基本的な機能をまとめると次のようなものになります。

Array.prototype.indexOf() – 基本的な使い方

構文: array.indexOf(searchElement, fromIndex);

引数: searchElement, fromIndex(省略可)
1. searchElement: 検索する配列要素
2. fromIndex: 検索を始める位置 => 「どの位置から検索するのか？」 = 「Start-Index」の指定

実行結果(返り値): 見つかった「最初」の配列要素のindex番号を返却する。見つからなかった場合は -1 を返却する。

ポイントは、検索して見つかった「最初」のTargetのindex番号を返してくれる点と、

第二引数のindexは「どの位置から検索するのか？」と言う「検索を始める位置」(Start-Index)であるという点の2点です。

それでは、実際にCodeで確認して行きましょう。

// < indexOf Sample-Code >

// 1. ロボ玉が、3匹います。
const robotamaArray = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉', 'ロボ玉試作2号機', 'ロボ玉', 'ロボ玉試作3号機'];

// 2. indexOfは、引数の値で配列内を検索して「最初」に発見した要素のindex番号を返す！
const foundFirstIndex = robotamaArray.indexOf('ロボ玉');
console.log({foundFirstIndex});
// {foundFirstIndex: 0}

// 3. 第二引数にindex番号を指定すると「その位置から検索」して「最初」に見つけた要素のindex番号を返す！
const foundFirstIndexFrom1 = robotamaArray.indexOf('ロボ玉', 1);
console.log({foundFirstIndexFrom1});
// {foundFirstIndexFrom1: 2}

Array.prototype.lastIndexOf()

lastIndexOfは、引数の値で配列内を検索して「最後」に発見した要素のindex番号を返してくれるメソッドです。

lastIndexOf() メソッドは、配列中で与えられた要素が見つかった最後の添字を返します。
もし存在しなければ -1 を返します。
配列は fromIndex から逆向きに検索されます。
引用元： MDN: Array.prototype.lastIndexOf()

MDNを元に、lastIndexOfメソッドの基本的な機能をまとめると次のようなものになります。

Array.prototype.lastIndexOf() – 基本的な使い方

構文: array.lastIndexOf(searchElement, fromIndex);

引数: searchElement, fromIndex(省略可)
1. searchElement: 検索する配列要素
2. fromIndex: 検索の終了させる位置 => 「どの位置まで検索をするのか？」 = 「Finish-Index」の指定

実行結果(返り値): 見つかった「最後」の配列要素のindex番号を返却する。見つからなかった場合は -1 を返却する。

ポイントは、検索して見つかった「最後」のTargetのindex番号を返してくれる点と、

第二引数のindexは「どの位置まで検索をするのか？」と言う「検索を終了させる位置」(Finish-Index)であるという点の2点です。

それでは、実際にCodeで確認して行きましょう。

// < lastIndexOf Sample-Code >

// 1. ロボ玉が、3匹います。
const robotamaArray = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉', 'ロボ玉試作2号機', 'ロボ玉', 'ロボ玉試作3号機'];

// 2. lastIndexOfは、引数の値で配列内を検索して「最後」に発見した要素のindex番号を返す！
const foundLastIndex = robotamaArray.lastIndexOf('ロボ玉');
console.log({foundLastIndex});
// {foundLastIndex: 4}

// 3. 第二引数にindex番号を指定すると「その位置まで検索」して「最後」に見つけた要素のindex番号を返す！
const foundLastIndexFrom1 = robotamaArray.lastIndexOf('ロボ玉', 3);
console.log({foundLastIndexFrom1});
// {foundLastIndexFrom1: 2}

Sample-Code & 要点まとめ

要点をまとめたSample-Codeを用意しました。ぜひConsoleで試してみてください！

// < indexOf と lastIndexOf の違い Sample-Code >

// 1. ロボ玉が、3匹います。
const robotamaArray = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉', 'ロボ玉試作2号機', 'ロボ玉', 'ロボ玉試作3号機'];

// 2. 配列同士の比較のために、CopyのArrayを作っておきます！
// => この後実行する「 splice() 」は破壊的メソッドで、indexの位置がずれるため。
const copyRobotamaArray = [...robotamaArray];

// 3. indexOfは、引数の値で配列内を検索して「最初」に発見した要素のindex番号を返す！
const foundFirstIndex = robotamaArray.indexOf('ロボ玉');
console.log({foundFirstIndex});
// {foundFirstIndex: 0}

// 4. lastIndexOfは、引数の値で配列内を検索して「最後」に発見した要素のindex番号を返す！
const foundLastIndex = robotamaArray.lastIndexOf('ロボ玉');
console.log({foundLastIndex});
// {foundLastIndex: 4}

// 5. indexOfで「最初」に見つけた「ロボ玉」を消す！
robotamaArray.splice(foundFirstIndex, 1);

console.log(JSON.stringify(robotamaArray));
// ["ロボ玉試作1号機","ロボ玉","ロボ玉試作2号機","ロボ玉","ロボ玉試作3号機"]

// 6. lastIndexOfで「最後」に見つけた「ロボ玉」を消す！
copyRobotamaArray.splice(foundLastIndex, 1);

console.log(JSON.stringify(copyRobotamaArray));
// ["ロボ玉","ロボ玉試作1号機","ロボ玉","ロボ玉試作2号機","ロボ玉試作3号機"]