JavaScript 配列でオブジェクトのインデックスを検索する

1. JavaScript で findIndex() メソッドを使用して配列内のオブジェクトのインデックスを検索する
2. lodash ライブラリを使用して、JavaScript 配列内のオブジェクトのインデックスを検索する

この記事では、findIndex() メソッドと lodash を使用して JavaScript 配列内のオブジェクトのインデックスを検索する方法について説明します。

JavaScript で findIndex() メソッドを使用して配列内のオブジェクトのインデックスを検索する

ES6 は、findIndex() と呼ばれる新しいメソッドを Array.prototype に追加しました。このメソッドは、提供されたテストに合格した配列の最初の要素を返します。findIndex() メソッドは、テスト関数を満たす要素のインデックスを返します。テストに合格した要素がない場合は、-1 を返します。findIndex() は、非プリミティブ型（オブジェクトなど）の配列でアイテムのインデックスを検索するのに最適です。

Array.prototype.findIndex() の最初のパラメーターとしてコールバックを提供します。この方法は、配列のインデックスが非プリミティブである場合に役立ちます。配列インデックスが単なる値以上の場合は、このメソッドを使用できます。指定された条件に一致する最初の要素を返した後、findIndex() は配列内の残りの項目について配列のチェックを停止します。

findIndex() の構文を以下に示します。

array.findIndex(function(currentValue, index, arr))

オプションで、index と arr をコールバック関数に渡すことができます。index オプションは配列内の現在の要素のインデックスを指しますが、arr は現在の要素が属する配列オブジェクトです。配列で指定された条件が一致しない場合、findIndex() は -1 を返します。

プリミティブ型の次の配列があり、18 歳を超えるアイテムのインデックスを検索するとします。次に、findIndex() を使用して、指定した条件に一致する最初のアイテムのインデックスを検索できます。

サンプルコード：

const ages = [3, 10, 17, 23, 52, 20];
let index = ages.findIndex(age => age > 18);
console.log(index);

出力：

3

指定された条件に一致する最初のアイテムは 18 を超えているため、インデックスは 3 であるため、インデックスの値は 3 になります。

これで、同じロジックを使用して、findIndex() メソッドで指定した条件に一致するオブジェクトのインデックスを見つけることができます。findIndex() を使用して、B グレードを取得した人のインデックスを見つけることができます。

サンプルコード：

const Result =
    [
      {
        name: 'John',
        grade: 'A',
      },
      {
        name: 'Ben',
        grade: 'C',
      },
      {
        name: 'Anthony',
        grade: 'B',
      },
      {
        name: 'Tim',
        grade: 'B-',
      },
    ]

    const index = Result.findIndex((element) => element.grade === 'B');
console.log(index)

出力：

2

ここで、findIndex() は、JavaScript オブジェクトの形式でデータを保持する Result 配列とともに使用されます。findIndex() メソッドを使用したコールバック関数として ES6 でも導入された arrow 関数を実装しました。element をコールバック関数に渡しました。この関数は、ループする配列内のオブジェクトの現在の値を保持します。

lodash ライブラリを使用して、JavaScript 配列内のオブジェクトのインデックスを検索する

軽量ライブラリ lodash を使用すると、配列、数値、オブジェクト、文字列などを操作する手間が省け、JavaScript が簡単になります。以下に示すように、公式 Web サイトから lodash.js ファイルをダウンロードして、Web サイトの上にロードできます。

<script src="lodash.js"> </script>

npm i --save lodash または yarn add lodash としてローカルにインストールできます。すべての設定が完了したら、_.findIndex() メソッドを使用できます。構文を以下に示します。

_.findIndex(array, [predicate = _.identity], [fromIndex = 0])

ここで、引数 array は、処理する必要のある配列を示します。オプション [predicate=_.identity] は、反復ごとに呼び出される関数です。3 番目のオプション [fromIndex=0] はオプションであり、反復を開始する開始点を設定するために使用できます。

lodash メソッドのデモンストレーションには、上記のメソッドで作成された配列を使用します。

コード例：

var index = _.findIndex(Result, {grade: 'B'})
console.log(index);

出力：

2