【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【JavaScript】配列に特定の要素が入っているか確認・判定する方法

本記事では、JavaScriptで配列に特定の要素が入っているか確認・判定する方法について解説しています。

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/10/06 13:34時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著: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メソッドの詳しい使い方は別記事にて紹介してるので、興味のある方はご参照ください!

配列に特定の値が入っているか判定する方法

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とみなします。

indexOfメソッドは、要素を見つけた時にどこで見つけたか分かるように戻り値にインデックス番号を渡します。

includesメソッドとindexOfメソッドどちらを使うべき?

配列に特定の要素があるか確認するだけの場合は、戻り値にtrue/falseを返すincludesメソッドを使う方が良いです。もし、配列の何番目にあったかの情報も知りたい時は戻り値にインデックス番号を渡してくれるindexOfメソッドを使う方が良いです。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次