JavaScriptである値が配列に含まれるか調べる方法とコード例

配列にある値が含まれるか調べたい場合、JavaScriptでは色々方法があります。

例えばそのやり方の例をいくつか挙げるなら次の通り

配列をループで回して値チェック
includesメソッドを使う
indexOfメソッドを使う

１番目のループで回して探すのはムダ処理が多すぎて論外ですね。

単純に「含まれるかどうか」を知りたいならincludesメソッド、値が含まれる「インデックス位置まで知りたい」ならindexOfメソッドを使うのが最適だと思います。

ここではこの２つのメソッドの使い方とコード例をまとめました。

このページの目次

１．includesメソッドの使い方とコード例
２．indexOfメソッドの使い方とコード例
ここまでのまとめ

１．includesメソッドの使い方とコード例

単純に値が含まれるか調べたいならincludesメソッドを使えばOK。これは配列にある値が含まれているかを true または　 false の真偽値で返してくれるメソッドです。

次のようにある配列 arr に対して呼び出し、第１引数に探したい値 searchValue を、第２引数（任意）に検索を開始する位置 fromIndex を渡して使います。

arr.includes(searchValue[, fromIndex])

1	arr.includes(searchValue[, fromIndex])

ちなみに２つめの引数については任意（オプショナル）なので渡さなくてもOK。単純に探したい値を渡せば含まれるかどうかがすぐに分かります。

例えば次が includes で値を検索して結果をコンソール表示しているコード例

var arr = ['A', 'B', 'C'];
console.log(arr.includes('A'));
  /// => true

var arr = [2, 3, 5, 7, 11, 13];
console.log(arr.includes(5));
  /// => true

var arr = ['A', 'B', 'C'];

console.log(arr.includes('A'));

/// => true

var arr = [2, 3, 5, 7, 11, 13];

console.log(arr.includes(5));

/// => true

もう基本的な使い方については説明するまでもないくらい簡単です。

ちなみに includes は先ほど書いたように２番目に検索を始めるインデックス位置も指定できます。

例えば次が開始位置も指定して値が含まれるか調べてコンソール表示しているコード例

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];
console.log(arr.includes('C', 0));
  /// => true
console.log(arr.includes('C', 2));
  /// => true
console.log(arr.includes('C', 5));
  /// => false

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];

console.log(arr.includes('C', 0));

/// => true

console.log(arr.includes('C', 2));

/// => true

console.log(arr.includes('C', 5));

/// => false

インデックス位置なので0から始まることに注意してください。

ちなみにこのインデックス位置、マイナスの値も渡せます。

例えば配列 array に対してマイナスのインデックス位置 index を指定した場合だと、探索位置は配列の要素数 - インデックス位置の絶対値（ arr.length - Math.abs(index) ）になるという訳です。

そしてそのインデックス位置から末尾に向かって値の検索が開始されます。

上の説明だと分かりにくいと思うので、どういう動作をするかは次のコード例を見てください。

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];
console.log(arr.includes('C', -3));
  /// => false
console.log(arr.includes('C', -4));
  /// => true
console.log(arr.includes('C', -6));
  /// => true

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];

console.log(arr.includes('C', -3));

/// => false

console.log(arr.includes('C', -4));

/// => true

console.log(arr.includes('C', -6));

/// => true

上コードだと配列の要素数は 6 です。

なのでincludesメソッドの２番目の引数に -3 を渡すと開始インデックスは 3 （ = 6 - 3 ）から、２番目に -4 を渡すと開始インデックスは 2 （ = 6 - 4 ）から始まるということ

もしマイナスの値を渡す場合は少し複雑な計算をしないといけないことに注意です。

以上がincludesメソッドを使った値が含まれるかのチェック方法

単純に「含まれているか」だけ調べたいなら処理速度的にも速いかもしれません。

２．indexOfメソッドの使い方とコード例

配列に値が含まれるか調べる方法の２つめはindexOfメソッドを使うこと

次のように配列 arr に対して呼び出し、第１引数には検索したい値 searchValue 、第２引数（オプショナル）には検索インデックス位置 fromIndex を渡して使います。

arr.indexOf(searchValue[, fromIndex])

1	arr.indexOf(searchValue[, fromIndex])

このメソッドの返り値は値が見つかれば最初に見つかったインデックスの位置を、もし見つからなければ -1 を返してきます。

なので -1 以外が返ってくれば値が含まれるということです。あと含まれるかだけでなく、最初に出てくる位置を調べるのにも役立ちますね。

例えば次が indexOf で値の位置を調べてコンソール表示しているコード例

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];

console.log(arr.indexOf('A'));
  /// => 0
console.log(arr.indexOf('C'));
  /// => 2
console.log(arr.indexOf('F'));
  /// => 5
console.log(arr.indexOf('X'));
  /// => -1

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];

console.log(arr.indexOf('A'));

/// => 0

console.log(arr.indexOf('C'));

/// => 2

console.log(arr.indexOf('F'));

/// => 5

console.log(arr.indexOf('X'));

/// => -1

コードを見ればわかるように値が含まれるインデックス位置を返しているだけです。

ただし同じ値がある場合は最初の値の位置が返される点には注意

以上がindexOfメソッドで値が含まれるかチェックする方法

先ほど紹介したincludesメソッドと比べて値まで分かるというのが便利なところです。

ここまでのまとめ

紹介したメソッドをもう一度まとめると次の通り

includesメソッド
探したい値と検索開始位置（任意）を渡して使う。返り値はその値が含まれていれば true 、含まれていなければ false を返す
indexOfメソッド
探したい値と検索開始位置（任意）を渡して使う。返り値は値が含まれる最初のインデックス位置、もし含まれていなければ -1 を返す

純粋に「含まれているか」調べたいときはincludesメソッド、「位置まで知りたい」というときはindexOfメソッドという風に使い分けすればいいと思います。

以上JavaScriptで配列に値が含まれるか調べる方法についてでした。

JavaScriptである値が配列に含まれるか調べる方法とコード例

１．includesメソッドの使い方とコード例

２．indexOfメソッドの使い方とコード例

ここまでのまとめ

関連記事

プロフィール

人気記事

検索してみる