JavaScript

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

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

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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

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アクセスランキング にほんブログ村