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

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

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

前回、indexOf() と lastIndexOf() の違いについて解説しました。

興味がある方は、ぜひこちらもCheckしてみてください！

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

【 indexOf() と lastIndexOf() の違い】

1 indexOf() と findIndexOf() の違いと使い分け方
2 Array.prototype.indexOf() の解説
3 Array.prototype.findIndex() の解説
4 まとめ
5 JavaScript書籍 Ver. 中級-上級者向け
6 JavaScript書籍 Ver. 初級者向け
7 参考・引用
8 最近の投稿

indexOf() と findIndexOf() の違いと使い分け方

まずはindexOfメソッドとfindIndexOf()の違いについてみて行きましょう。

主な違いはこれらの関数のパラメータです。
Array.prototype.indexOf() は最初のパラメータとして値を期待します。
これは、プリミティブ型（string、number、またはbooleanなど）の配列でインデックスを見つけるのに適しています。
Array.prototype.findIndex() は最初のパラメータとしてコールバックを期待します。
非プリミティブ型（オブジェクトなど）の配列のインデックスが必要な場合、
または検索条件が単なる値よりも複雑な場合は、これを使用してください。
引用元： indexOfと配列のfindIndex関数の違い

上記の引用にある通り、2つのよく似たメソッドの違いは、「引数」(Parameter)でした。

Array.prototype.indexOf() のParameter(引数)はプリミティブ型(Primitive-Type)の値であるのに対して、

Array.prototype.findIndex() のParameter(引数)はCallBackFunction(コールバック関数)になります。

また、この引用元にはこの2つの関数の使い分けのポイントも示してくれています。

単純なPrimitive型のデータではなく「Objectの配列」や「多次元配列」などの構造になっている配列である場合は、CallBackFunction内で条件文を作成して検索処理ができるfindIndexメソッドの方が適しています。

それでは、次にそれぞれのメソッドを細かくみて行きましょう。

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.findIndex() の解説

findIndexは、引数のCallBackFunction(コールバック関数)内の条件文でtrueになる「最初」の要素のindex番号を返してくれるメソッドです。

findIndex() メソッドは、配列内の指定されたテスト関数に合格する最初の要素の位置を返します。
テスト関数に合格する要素がない場合を含め、それ以外の場合は -1 を返します。
引用元： MDN: Array.prototype.findIndex()

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

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

構文: array.findIndex( (element, index, array)=> { 条件文 } );

引数: element, index(省略可), array(省略可)
1. element: 配列内で現在処理されている要素
2. index: 配列内で現在処理されている要素の位置
3. array: findIndex() を呼び出した元の配列

実行結果(返り値): 最初にテストに合格した配列の要素の位置を返す。それ以外の場合は -1 を返す。

ポイントは、CallBackFunction(コールバック関数)内のテスト(条件文)に「最初」の合格したTargetのindex番号を返してくれる点です。

// < findIndex Sample-Code >

const robotamaData = [
    {name:'ロボ玉試作0号機', power:1000,defense:1000,speed:1000, special:'ロボ玉ダガー'},
    {name:'ロボ玉試作1号機', power:2000,defense:2000,speed:3000, special:'ロボ玉ビーム'},
    {name:'ロボ玉試作2号機', power:3000,defense:3000,speed:1000, special:'ロボ玉バズーカー'},
    {name:'ロボ玉試作3号機', power:3000,defense:3000,speed:3000, special:'ロボ玉ジャスティス！！'}
];

// 1. findIndex() の引数は「 CallBackFunc 」
// => CallBackFunc内で、条件文を記述して検索をする！
const findIndex = robotamaData.findIndex( robotama => robotama.name === 'ロボ玉試作1号機');

console.log({findIndex});
// {findIndex: 1}

robotamaData.splice(findIndex, 1);

console.log({robotamaData});

// [ 出力結果 ]
// robotamaData: Array(3)
    // 0: {name: 'ロボ玉試作0号機', power: 1000, defense: 1000, speed: 1000, special: 'ロボ玉ダガー'}
    // 1: {name: 'ロボ玉試作2号機', power: 3000, defense: 3000, speed: 1000, special: 'ロボ玉バズーカー'}
    // 2: {name: 'ロボ玉試作3号機', power: 3000, defense: 3000, speed: 3000, special: 'ロボ玉ジャスティス！！'}
    // length: 3