JavaScript配列でのindexOfの活用法: 4つの実例
1. indexOfとは？
JavaScriptにおけるindexOfメソッドは、配列の中から指定した要素を探し、そのインデックスを返す機能を提供します。
要素が見つからなかった場合、このメソッドは-1を返します。このメソッドが使えるのは配列だけではなく、文字列でも使用することが可能です。
1-1. indexOfの基本的な使い方
ソースコード例
|
1 2 3 |
let fruits = ["apple", "banana", "mango", "grape", "peach"]; let index = fruits.indexOf("mango"); console.log(index); |
出力結果
2
上記のソースコードでは、"mango"の位置を探しています。
配列は0から数え始めるので、"mango"は2番目に位置しています。
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
2. 要素が配列内に存在するかどうかを確認する
indexOfは要素が配列に存在するかどうかを確認するのにも使えます。存在する場合はそのインデックスを、存在しない場合は-1を返します。
これを利用して、配列内に特定の要素があるかどうかを確認することができます。
ソースコード例
|
1 2 3 4 5 6 |
let fruits = ["apple", "banana", "mango", "grape", "peach"]; if (fruits.indexOf("mango") !== -1) { console.log("mango is in the array!"); } else { console.log("mango is not in the array!"); } |
出力結果
mango is in the array!
"mango"が配列fruitsの中に存在するか確認するコードです。
存在する場合は"mango is in the array!"、存在しない場合は"mango is not in the array!"と出力します。
3. 配列内の特定の要素を取り出す
indexOfメソッドを使えば、配列内の特定の要素のインデックスを取得できます。
取得したインデックスを使って、その要素を配列から取り出すことも可能です。
ソースコード例
|
1 2 3 4 5 |
let fruits = ["apple", "banana", "mango", "grape", "peach"]; let index = fruits.indexOf("mango"); if (index !== -1) { console.log(fruits[index]); } |
出力結果
mango
このソースコードでは、"mango"のインデックスを取得し、そのインデックスを使って"mango"を配列から取り出しています。
もし"mango"が配列に存在しなければ、console.logは実行されません。
4. 複数の同じ要素がある場合のindexOf
複数の同じ要素が配列内に存在する場合、indexOfメソッドは最初に見つけた要素のインデックスを返します。
次の同じ要素を見つけるには、indexOfメソッドの第二引数で検索開始位置を指定することができます。
ソースコード例
|
1 2 3 4 5 |
let numbers = [1, 2, 3, 2, 1]; let index = numbers.indexOf(2); console.log(index); index = numbers.indexOf(2, index + 1); console.log(index); |
出力結果
1
3
このソースコード1.jpg" alt="" width="920" height="615" class="alignnone size-large wp-image-12371" />
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
