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

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

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

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（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ではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。