JavaScriptで配列に特定の値があるか調べる

JavaScriptで配列に特定の値が含まれるか調べる方法（includes）を実行して学べます。 下のコードはブラウザ内でそのまま実行できます。「実行エディタで開く」を押すと、progoのオンラインJavaScript実行環境にコードが読み込まれ、その場で動作を確認できます。

サンプルコード

const fruits = ["apple", "banana"];
console.log(fruits.includes("banana")); // true
console.log(fruits.indexOf("cherry"));  // -1

ポイント解説

• includes()は真偽値（true / false）を返すので、そのままifで使えます。
• indexOf()は位置（無ければ-1）を返します。位置も知りたいときはこちら。
• includes()はNaNを正しく判定できますが、indexOf()はできません。

includes / indexOf / some / find の使い分け

const arr = [1, 2, 3];
arr.includes(2);              // true   … 値が入っているか
arr.indexOf(2);               // 1      … 位置も欲しい
arr.some(n => n > 2);          // true   … 条件に合う要素があるか
arr.find(n => n > 2);          // 3      … 条件に合う要素そのもの

オブジェクトの配列で存在確認する

includes()は参照が一致しないと使えないため、some()を使います。

const users = [{id:1,name:"A"}, {id:2,name:"B"}];
users.some(u => u.id === 2);   // true
users.find(u => u.id === 2);   // {id:2, name:"B"}

大文字・小文字を無視して調べる

const tags = ["Apple", "Banana"];
const q = "apple";
tags.some(t => t.toLowerCase() === q.toLowerCase()); // true

jQueryの $.inArray から移行する

$.inArray(x, arr) は arr.indexOf(x) と同じ（見つからなければ -1）。存在確認だけなら arr.includes(x) に置き換えます。

大量データはSetで高速化

ループの中で何度も存在確認するなら、配列よりSetの方が高速です。

const set = new Set(hugeArray);
set.has("target");            // 配列.includes より速い

よくある質問

includes と indexOf の違いは？

includesはtrue/false、indexOfは位置（無ければ-1）。存在確認だけならincludes、NaNの判定もincludesのみ可能です。

オブジェクトの配列で存在確認するには？

some()を使います（例: users.some(u => u.id === 3)）。要素自体が欲しいならfind()。

jQueryの $.inArray の代わりは？

arr.includes(x)（真偽値）またはarr.indexOf(x)（位置）。