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

JavaScript

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

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

PR

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の配列がそのまま入ります。

コメント

Ads Blocker Image Powered by Code Help Pro

広告ブロッカーが検出されました。

ブラウザの拡張機能を使用して広告ブロックをしていることが確認できました。 ブラウザの広告ブロッカー機能を無効にしていただくか、codelikes.comをホワイトリストに追加し、更新をクリックしてください。 お手数ですが、よろしくお願いします🙇‍♂️
タイトルとURLをコピーしました