JavaScriptで指定した要素が配列に存在するかチェックする方法を現役エンジニアが解説【初心者向け】

JavaScriptで指定した要素が配列に存在するかチェックする方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

指定した要素が配列に存在するかチェックする方法

JavaScriptで配列で、ある要素が存在するかをチェックする場合、以下の方法が使えます。

• indexOfメソッドを使う
• someメソッドを使う(ES 2015以降)
• includesメソッドを使う(ES 2017以降)

ES2015やES2017というのはJavaScriptの仕様のことです。
お使いの環境によって下の２つのメソッドは、使えない場合もあります。

indexOfメソッドは、引数に渡した値が含まれる場合はインデックス番号を、含まれない場合は-1を返すメソッドです。
 

array = [1,2,3]
array.indexOf(2) // => 1

 
someメソッドは、引数に関数を渡しその関数の処理に引っかかる値があればtrueを、なければfalseを返します。
 

array = [1,2,3]
array.some( num => num === 2) // => true

 
ちなみにnum => num === 2というのはアロー関数というもので、functionで書いていた関数を短くしたものです。
 

function(num){
 return num === 2
}

 
と意味は一緒です。

includesメソッドは、引数の要素が含まれていればtrue、含まれていなければfalseを返します。
 

array = [1,2,3]
array.includes(2) // => true

 

実際に書いてみよう

それでは実際に書いてみましょう。
 

alphabet = ['a','b','c','d','e']

// indexOfメソッドを使う場合
alphabet.indexOf('c') // => 2
alphabet.indexOf('z') // => -1

// someメソッドを使う場合
alphabet.some( target => target === 'c') // => true
alphabet.some( target => target === 'z') // => false

// includesメソッドを使う場合
alphabet.includes('c') // => true
alphabet.includes('z') // => false

 

以上で解説を終わります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

この記事を監修してくれた方 メンター金成さん。 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。 現在も、開発案件に携わりながら、日々勉強中。

 

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。