【初心者向け】JavaScriptで配列の特定の値が存在するかどうかを調べる3つの方法

2024-06-30

JavaScript で配列の特定のインデックスに値が存在するかどうかを確認する方法

indexOf() メソッドを使う

最も一般的でシンプルな方法は、indexOf() メソッドを使うことです。このメソッドは、配列内で指定した値と一致する最初の要素のインデックスを返します。存在しない場合は -1 を返します。

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const valueExists = numbers.indexOf(targetValue) !== -1;

console.log(valueExists); // true

includes() メソッドは、配列に特定の値が存在するかどうかを真偽値で返します。インデックスを返すわけではないので、indexOf() メソッドよりもシンプルに記述できます。

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
const valueExists = numbers.includes(targetValue);

console.log(valueExists); // true

自分でループを使って調べる

上記の方法以外にも、自分でループを使って調べることもできます。ただし、コードが冗長になり、可読性が低くなるため、あまりおすすめの方法ではありません。

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
let valueExists = false;

for (let i = 0; i < numbers.length; i++) {
  if (i === targetIndex && numbers[i] === targetValue) {
    valueExists = true;
    break;
  }
}

console.log(valueExists); // true

上記のうち、indexOf() メソッドを使うのが最も一般的でおすすめです。 シンプルで分かりやすく、パフォーマンスも優れています。

ただし、インデックスではなく、存在するかどうかだけを確認したい場合は、includes() メソッドを使うのも良いでしょう。

自分でループを使って調べる方法は、コードが複雑になりやすく、あまりおすすめではありません。

補足

上記の例では、数値の配列を例としていますが、文字列やその他の型の配列にも同様に適用できます。
複数の要素を持つオブジェクトの場合は、indexOf() メソッドや includes() メソッドは使えません。その場合は、自分でループを使って調べる必要があります。
ECMAScript 6 以降であれば、findIndex() メソッドを使うこともできます。これは indexOf() メソッドと似ていますが、条件に一致する最初の要素のインデックスを返す点に違いがあります。

以上、JavaScript で配列の特定のインデックスに値が存在するかどうかを確認する方法について説明しました。

indexOf() メソッドを使う

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
const valueExists = numbers.indexOf(targetValue) !== -1;

console.log(valueExists); // true

解説:

numbers は、数値の配列です。
targetIndex は、確認したいインデックスです。この例では、2 です。
targetValue は、そのインデックスにあるはずの値です。この例では、3 です。
indexOf() メソッドは、numbers 配列内で targetValue と一致する最初の要素のインデックスを返します。存在しない場合は -1 を返します。
valueExists は、indexOf() メソッドの返値が -1 ではないかどうかを確認します。つまり、targetValue が numbers 配列内に存在するかどうかを確認します。

includes() メソッドを使う

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
const valueExists = numbers.includes(targetValue);

console.log(valueExists); // true

このコードは、indexOf() メソッドを使ったコードとほぼ同じです。
唯一の違いは、indexOf() メソッドではなく includes() メソッドを使っていることです。
includes() メソッドは、numbers 配列内に targetValue が存在するかどうかを真偽値で返します。

自分でループを使って調べる

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
let valueExists = false;

for (let i = 0; i < numbers.length; i++) {
  if (i === targetIndex && numbers[i] === targetValue) {
    valueExists = true;
    break;
  }
}

console.log(valueExists); // true

このコードは、indexOf() メソッドや includes() メソッドよりも冗長で、可読性が低くなります。
ループを使って numbers 配列内の各要素を順に調べ、targetIndex と一致し、かつ targetValue と一致する要素があるかどうかを確認します。
一致する要素が見つかったら、valueExists を true に設定してループを抜けます。

これらのサンプルコードは、JavaScript で配列の特定のインデックスに値が存在するかどうかを確認する方法を理解するのに役立ちます。状況に応じて、適切な方法を選択してください。

JavaScriptで配列の特定のインデックスに値が存在するかどうかを確認するその他の方法

ES7のArray.prototype.at()を使う

ES7で導入されたArray.prototype.at()メソッドは、指定したインデックスの要素にアクセスしたり、その要素に値を設定したりすることができます。このメソッドを使用して、存在チェックを行うこともできます。

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
const valueExists = numbers.at(targetIndex) === targetValue;

console.log(valueExists); // true

論理演算子を使って、より簡潔に記述することもできます。

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
const valueExists = targetIndex < numbers.length && numbers[targetIndex] === targetValue;

console.log(valueExists); // true

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
const valueExists = numbers[targetIndex] === targetValue || typeof numbers[targetIndex] === 'undefined';

console.log(valueExists); // true

const numbers = [1, 2, 3, 4, 5];
const targetIndex = 2;
const targetValue = 3;
const valueExists = numbers[targetIndex] === targetValue && numbers[targetIndex] !== undefined;

console.log(valueExists); // true