【中学生でもわかる】JavaScriptの「.indexOf()」を理解しよう！

programming
学習コースキャンペーンバナー

こんにちは、フローです。

プログラミング言語JavaScriptには、様々なメソッドがありますが、

今日はその中でも非常に便利な「.indexOf()」について深堀りしていきます。

.indexOf()とは？

JavaScriptにおける配列や文字列のメソッドの一つです。

その主な機能は、

ある特定の要素が配列や文字列内に存在する位置（インデックス）を見つけ出すことです。

もし要素が存在しない場合、このメソッドは-1を返します。

パターン1：配列に特定の要素が存在するか確認する

配列内に特定の要素が存在するかどうかを確認するために「.indexOf()」を使用します。

このメソッドは、要素が存在する場合、その位置（インデックス）を返します。

存在しない場合は、「-1」を返します。

let fruits = ["apple", "banana", "cherry"];
if(fruits.indexOf("mango") !== -1) {
    console.log("マンゴーがあります！");
} else {
    console.log("マンゴーがありません！");
}

この例では、「mango」がfruits配列に存在するかどうかを確認しています。

結果として「マンゴーがありません！」と表示されます。

パターン2：特定の要素の位置を見つける

配列内の特定の要素の位置を見つけるために

「.indexOf()」を使用します。

この使い方はパターン1と似ていますが、

ここでは特定の要素の位置を正確に特定することに注目します。

let fruits = ["apple", "banana", "cherry"];
let index = fruits.indexOf("banana");
console.log(index); // 結果: 1

パターン3：同じ要素が複数存在する場合の最初の位置を見つける

配列内に同じ要素が複数存在する場合、

その最初の位置を見つけるために「.indexOf()」を使用します。

let numbers = [1, 2, 3, 2, 4];
let firstIndex = numbers.indexOf(2);
console.log(firstIndex); // 結果: 1

この例では、最初に「2」が出てくる位置を調べています。

“2”は2番目の位置（インデックスが1）にあります。

.indexOf()の注意点

ただし、「.indexOf()」を使うときには一つ注意が必要です。

それは、「.indexOf()」が厳密な等価性（===）を使用して要素を比較するということです。

これは、数値と文字列などの異なる型の値を比較するときに問題を引き起こす可能性があります。

let numbers = [1, 2, 3, 4, 5];
let badIndex = numbers.indexOf('2');
console.log(badIndex); // 結果: -1

この例では、数値の2を探していますが、

文字列の’2’で検索をかけているため、

存在しないと判定され、-1が出力されます。

型の違いに注意しながら使用する必要があります。

まとめ

以上、JavaScriptの「.indexOf()」について見てきました。

その存在を確認するためのツール、特定の要素の位置を特定する手段、

また最初の重複要素を見つける方法として、

「.indexOf()」はコード内で大活躍します。

しかし、その使用には注意が必要で、特に型の違いによる問題に気をつけて使用することが重要です。

これからもJavaScriptの旅を続ける中で、

「.indexOf()」がどのように役立つかを見つけていきましょう。

今日も学習お疲れさまでした。

レッツチャレンジ！