JavaScriptで配列の要素番号を検索する方法!(findIndexメソッド)

JavaScript

JavaScriptでfindIndexメソッドを使用して、配列の要素番号を探す方法について書いています。
findIndexは要素の位置番号を返してくれます。

簡単に解説した後に、サンプルコードを載せています。

findIndexメソッドの使い方

findIndexメソッドを使用すると、探した要素の配列番号を返してくれます。
例えば、下記のように使用します。

const scores = [10, 25, 30, 45, 77]
const result = scores.findIndex((score) => { return score > 26 })

console.log(result) // 2が出力される

scores配列を作成しました。
scores配列からfindIndexメソッドを使用しています。

引数として比較関数を作成することで、対象の要素番号を検索できます。
比較関数では配列要素を比較して、条件に合う場合にreturnで返すようにします。

今回は条件を「score > 26」としています。一番最初に条件にあった要素の要素番号が返ってきます。
上記の例では「26」よりも大きい数字なので、「30」になります。
「30」は要素番号で、0から始まって「2」なので、2が返ってきます。

オブジェクト配列の要素番号を取得する

オブジェクトの配列場合も同じように、比較関数を作成して、配列番号を取得することが可能です。
例えば、下記のように使用します。

const sweets = [
    { name: 'candy', price: 100 },
    { name: 'cookie', price: 120 },
    { name: 'chocolate', price: 150 },
]

const result = sweets.findIndex((sweet) => { return sweet.name === 'cookie' })

console.log(result) // 1が出力される

sweetsというオブジェクトの配列を作成しました。
sweets配列からfindIndexを呼び出しています。

findIndexの引数の比較関数では、オブジェクトの要素のnameが’cookie’だったらtrueになります。
cookieのオブジェクトは2番目なので結果として、result変数には「1」が返ってきます。(配列の番号は0から)

要素が見つからない場合は?

要素が見つからない場合は、-1が返ってきます。

const scores = [10, 25, 30, 45, 77]
const result = scores.findIndex((score) => { return score > 99 })

console.log(result) // -1が出力される

上記では、条件の箇所を99より大きい数字にしたので、resultには-1が返ってきます。

他の引数について

findIndexメソッドに渡せる他の引数は、下記のようになっています。(findメソッドを使用した時と同じです)

・第1引数は配列の要素
・第2引数は配列の要素番号
・第3引数は検索元配列
const sweets = [
    { name: 'candy', price: 100 },
    { name: 'cookie', price: 120 },
    { name: 'chocolate', price: 150 },
]

sweets.findIndex((fruit, index, elements) => {
   console.log(fruit, index, elements)
})

上記を試してみると、3回(要素分)出力されます。
sweetsには配列の要素、indexには配列番号、elementsはsweetsの配列がそのまま入ります。

コメント

タイトルとURLをコピーしました