1. indexOfとは？
JavaScriptで配列や文字列の中から特定の要素を探したいときに便利なのがindexOfメソッドです。
indexOfは、配列や文字列の中から検索したい要素を探し、その位置（インデックス番号）を返すメソッドです。
- 要素が見つかった場合：最初に一致した位置（0から始まる番号）を返す
- 要素が見つからなかった場合：
-1を返す
2. 基本的な使い方（配列編）
配列の中から数値を探す
const numbers = [10, 20, 30, 40, 50];
console.log(numbers.indexOf(30)); // 出力: 2
console.log(numbers.indexOf(100)); // 出力: -1（見つからない）
30は配列の3番目の位置にあるため、インデックス番号2が返ります。
存在しない要素100は-1が返ります。
配列の中から文字列を探す
const fruits = ['apple', 'banana', 'orange', 'grape'];
console.log(fruits.indexOf('orange')); // 出力: 2
console.log(fruits.indexOf('melon')); // 出力: -1
3. 文字列でも使える
indexOfは文字列にも使えます。
文字列の中で、特定の文字や単語が最初に出てくる位置を返します。
const text = 'Hello JavaScript';
console.log(text.indexOf('Hello')); // 出力: 0（先頭から始まる）
console.log(text.indexOf('Java')); // 出力: 6
console.log(text.indexOf('Python')); // 出力: -1（見つからない）
4. 検索開始位置を指定する
indexOfには第2引数を指定することで、検索を始める位置を決めることができます。
const numbers = [1, 2, 3, 2, 4, 2, 5];
console.log(numbers.indexOf(2)); // 出力: 1（最初の2）
console.log(numbers.indexOf(2, 2)); // 出力: 3（インデックス2から検索開始）
5. 要素が存在するかどうかの判定
indexOfを使えば、特定の要素が配列に含まれているか簡単にチェックできます。
const colors = ['red', 'blue', 'green'];
if (colors.indexOf('blue') !== -1) {
console.log('blueは配列に含まれています');
} else {
console.log('blueは配列に含まれていません');
}
6. 応用：存在チェックを関数化
存在チェックを関数にして使い回すことも可能です。
function contains(array, value) {
return array.indexOf(value) !== -1;
}
const animals = ['dog', 'cat', 'bird'];
console.log(contains(animals, 'cat')); // 出力: true
console.log(contains(animals, 'lion')); // 出力: false
7. indexOfとincludesの違い
ES6以降はincludesメソッドも使えます。
違いは以下の通りです。
| メソッド | 返り値 | 使いやすさ |
|---|---|---|
| indexOf | インデックス番号 or -1 | 少し複雑 |
| includes | true or false | シンプル |
includesの使用例。配列の中に特定の文字が含まれてるかどうかを判定するときに便利です。
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // 出力: true
console.log(fruits.includes('melon')); // 出力: false
まとめ
-
indexOfは、配列や文字列の中から要素を検索し、その位置を返すメソッド - 見つからない場合は
-1を返す - 検索開始位置を指定することもできる
- 存在チェックだけなら
includesのほうがシンプル
これらを理解しておけば、配列操作や検索処理がグッと楽になります！