本記事では、JavaScriptで配列に特定の要素が入っているか確認・判定する方法について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
Contents
配列に特定の要素が入っているか確認する方法
includesメソッド
配列に特定の要素が入っているか確認するには、includesメソッドを使用します。基本的な使い方は以下のとおりです。
Array.includes(searchElement, [fromIndex])
- Array:対象の配列
- searchElement:検索したい要素
- fromIndex:検索開始位置を数値で指定(省略可能)
indexOfメソッド
indexOfメソッドは、文字列に対して使われることが多いですが、配列の要素を確認する時にも使うことが可能です。基本的な使い方は以下のとおりです。
Array.indexOf(searchElement [,number]);
- Array:対象の配列
- searchElement:検索したい要素
- number:検索開始位置を数値で指定(省略可能)
indexOfメソッドの詳しい使い方は別記事にて紹介してるので、興味のある方はご参照ください!
配列に特定の値が入っているか判定する方法
includesメソッド
includesメソッドは、検索したい要素(searchElement)が入っている場合「true」を返し、入っていない場合は「false」を返します。
let hobbyArr = ["basketball", "soccer"];
console.log(hobbyArr.includes("basketball")); // => true
console.log(hobbyArr.includes("soccer")); // => true
console.log(hobbyArr.includes("tennis")); // => false
if (hobbyArr.includes("basketball"))
console.log("配列にbasketballが見つかったよ!");
if (hobbyArr.includes("soccer")) console.log("配列にsoccerが見つかったよ!");
if (hobbyArr.includes("tennis")) {
console.log("配列にtennisが見つかったよ!");
} else {
console.log("配列にtennisが見つかりませんでした。。");
}
/* コンソールログ *
* 配列にbasketballが見つかったよ!
* 配列にsoccerが見つかったよ!
* 配列にtennisが見つかりませんでした。。
*/
indexOfメソッド
indexOfメソッドは、検索したい要素(searchElement)が入っていない場合「-1」を返すため、この戻り値を基準に配列に特定の要素が入っているか判定します。
let hobbyArr = ["basketball", "soccer"];
console.log(hobbyArr.indexOf("basketball")); // => 0
console.log(hobbyArr.indexOf("soccer")); // => 1
console.log(hobbyArr.indexOf("tennis")); // => -1
if (hobbyArr.indexOf("basketball") !== -1)
console.log("配列にbasketballが見つかったよ!");
if (hobbyArr.indexOf("soccer") !== -1)
console.log("配列にsoccerが見つかったよ!");
if (hobbyArr.indexOf("tennis") !== -1) {
console.log("配列にtennisが見つかったよ!");
} else {
console.log("配列にtennisが見つかりませんでした。。");
}
/* コンソールログ *
* 配列にbasketballが見つかったよ!
* 配列にsoccerが見つかったよ!
* 配列にtennisが見つかりませんでした。。
*/
否定演算子(厳密不等価)を表しています。(hobbyArr.indexOf(searchString))の戻り値が-1以外であればtrueとみなし、-1であればfalseとみなします。
includesメソッドとindexOfメソッドどちらを使うべき?
配列に特定の要素があるか確認するだけの場合は、戻り値にtrue/falseを返すincludesメソッドを使う方が良いです。もし、配列の何番目にあったかの情報も知りたい時は戻り値にインデックス番号を渡してくれるindexOfメソッドを使う方が良いです。