【JavaScript】indexOf()で配列の中の要素の位置を簡単に探す方法

JavaScriptのindexOf()メソッドは、特定の要素の位置を配列内で探すための便利なツールです。要素が存在すれば位置を返し、存在しなければ-1を返します。これを使えば、要素の存在チェックや位置の取得が簡単に行えます。indexOf()は配列内に要素が存在しない場合に-1を返すことに注意しましょう。

3行で要約すると:

indexOf()は配列の中から特定の要素の位置を探すメソッドです。
要素が存在する場合はその位置（インデックス）を、存在しない場合は-1を返します。
indexOf()と似たメソッドにはincludes()やfindIndex()があります。

「indexOf()」の基本的な使い方

「indexOf()」とは？

indexOf()は配列の中から指定した要素が初めて登場する位置を返すメソッドです。存在しない場合は-1を返します。これを使うと、要素が配列に含まれているかどうか、またその場所がどこなのかを一発で知ることができます。

例:

const fruits = ["apple", "orange", "banana", "grape"];
const index = fruits.indexOf("banana");
console.log(index); // 2

「indexOf()」の使用例3パターン

要素が配列に存在するかチェック

const numbers = [1, 3, 5, 7, 9];
console.log(numbers.indexOf(5) !== -1); // true

要素の位置を取得

const colors = ["red", "blue", "green"];
console.log(colors.indexOf("blue")); // 1

複数の同じ要素の中から初めて出てくる位置を取得

const pets = ["cat", "dog", "cat", "bird"];
console.log(pets.indexOf("cat")); // 0

「indexOf()」と「includes()」

「includes()」とは？

includes()メソッドは、配列が特定の要素を持っているかどうかをチェックし、真偽値を返します。要素が存在すればtrue、存在しなければfalseを返します。

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape'));  // false

「indexOf()」と「includes()」の違い

indexOf()は特定の要素の位置を返すのに対し、includes()はその要素が配列に存在するかどうかの真偽値を返します。indexOf()では要素が存在しない場合、-1を返します。

console.log(fruits.indexOf('banana'));   // 1
console.log(fruits.indexOf('grape'));    // -1

「indexOf()」と「findIndex()」

「findIndex()」とは？

findIndex()メソッドは、配列内の要素が指定したテスト関数を満たすかどうかをチェックし、最初に満たした要素のインデックスを返します。どの要素もテスト関数を満たさなければ、-1を返します。

const numbers = [2, 4, 6, 8, 10];
const isOdd = (num) => num % 2 !== 0;
console.log(numbers.findIndex(isOdd)); // -1

「indexOf()」と「findIndex()」の違い

indexOf()は配列の中から特定の要素の位置を探します。一方、findIndex()はテスト関数を満たす要素の位置を探します。具体的には、indexOf()は値の比較、findIndex()は関数に基づく評価を行います。

console.log(numbers.indexOf(8));       // 3

「indexOf()」を使用する際の注意点

配列内に要素が存在しない場合

indexOf()は要素が存在しない場合-1を返しますので、チェックする際はこの値に注意が必要です。

例:

const books = ["novel", "comics", "biography"];
if (books.indexOf("history") === -1) {
    console.log("The book type is not available.");
}
// "The book type is not available."