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メソッドを使用した時と同じです)
・第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の配列がそのまま入ります。
コメント