本記事では、JavaScriptで配列に特定の要素が入っているか確認・判定する方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
配列に特定の要素が入っているか確認する方法
includesメソッド
配列に特定の要素が入っているか確認するには、includesメソッドを使用します。基本的な使い方は以下のとおりです。
Array.includes(searchElement, [fromIndex])基本構文
- Array：対象の配列
- searchElement：検索したい要素
- fromIndex：検索開始位置を数値で指定(省略可能)
indexOfメソッド
indexOfメソッドは、文字列に対して使われることが多いですが、配列の要素を確認する時にも使うことが可能です。基本的な使い方は以下のとおりです。
Array.indexOf(searchElement [,number]);基本構文
- Array：対象の配列
- searchElement：検索したい要素
- number：検索開始位置を数値で指定(省略可能)
先輩くんindexOfメソッドの詳しい使い方は別記事にて紹介してるので、興味のある方はご参照ください！
あわせて読みたい
【JavaScript】indexOfとlastIndexOfの使い方と違いについて
本記事では、文字列の中に特定の文字列が含まれているか確認する時などに使用されるindexOfメソッドとlastIndexOfメソッドの使い方と違いについて、サンプルコードを用…
配列に特定の値が入っているか判定する方法
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が見つかりませんでした。。
*/!== -1とは？
否定演算子(厳密不等価)を表しています。(hobbyArr.indexOf(searchString))の戻り値が-1以外であればtrueとみなし、-1であればfalseとみなします。
includesメソッドとindexOfメソッドどちらを使うべき？
配列に特定の要素があるか確認するだけの場合は、戻り値にtrue/falseを返すincludesメソッドを使う方が良いです。もし、配列の何番目にあったかの情報も知りたい時は戻り値にインデックス番号を渡してくれるindexOfメソッドを使う方が良いです。
