【JavaScript】includes()で特定の要素が配列の中に含まれているかを調べる!

(この記事は2023年01月16日に投稿されました。)

Javascriptで特定の要素が配列の中に含まれているかを調べる方法としてincludes()があります。

includes()とは指定した値が対象の文字列に含まれているかどうかを調べることができるメソッドであり、検索対象はオブジェクトとなります。

そのため、includes()は変数内の文字列検索だけでなく、配列内の要素検索も可能になります。

そして、includes()にパラメータを追加指定して使用することができるので、文字列検索と同様に配列内の検索範囲を制限することができます。

また、2次元や3次元のような多次元配列にも使用することができるので、配列内で特定の要素があるかどうかを調べたい場合はincludes()使用しましょう。

今回はJavaScriptのincludes()で特定の要素が配列の中に含まれているかを調べる方法について紹介していきます。

この記事はこんな方におすすめ
・配列の中に指定した値が存在するかどうか調べたい場合




includes()とは

includes()とは指定した値が対象の文字列に含まれているかどうかを調べることができるメソッドになります。

ここでは詳しくしませんが、もしincludes()について詳しく知りたい場合は下記の記事をご参考ください。

includes()で特定の要素が配列の中に含まれているか調べるサンプルコード

includes()で特定の要素が配列の中に含まれているか調べるサンプルコードをご紹介します。

ここでは、下記の2つのパターンでincludes()を使用します。

  1. 検索する値が要素に存在する場合
  2. 検索する値が要素に存在しない場合

検索する値が要素に存在する場合

検索する値が要素に存在する場合にincludes()を使用します。

● main.js

実行結果

検索する値が要素に存在する場合にincludes()で特定の要素が配列の中に含まれているか調べた結果

includes()よって配列の中の要素から検索する値を検索しています。

「愛知」の値が配列の要素に存在することから、「true」が画面に表示されています。

検索する値が要素に存在しない場合

検索する値が要素に存在しない場合にincludes()を使用します。

● main.js

実行結果

検索する値が要素に存在しない場合にincludes()で特定の要素が配列の中に含まれているか調べた結果

「北海道」の値が配列の要素に存在しないため、includes()で検索することができません。

そのため、「false」が画面に表示されています。

検索開始位置を指定してincludes()で特定の要素が配列の中に含まれているかを調べる場合

検索開始位置を指定して特定の要素が配列の中に含まれているかを調べる場合にはincludes()のパラメータに検索開始位置を指定します。

検索開始位置を指定することで、検索を開始する配列の範囲を設定することができます。

そのため、ここでは下記の4つのパターンでincludes()を使用します。

  1. 検索開始位置が正の数である場合
  2. 検索開始位置が0である場合
  3. 検索開始位置が負の数である場合
  4. 検索開始位置が非数である場合

検索開始位置が正の数である場合

検索開始位置が正の数である場合にincludes()を使用します。

検索開始位置に正の数を指定すると、配列の「n番目」から「末尾」までの要素を対象として検索することができます。

検索開始位置に正の数指定した場合のincludes()の処理イメージ

● main.js

実行結果

検索開始位置が正の数である場合にincludes()を使用した結果

includes()によって検索範囲を制限して、配列の中に含まれているかを調べています。

そのため、「愛知」が配列内に存在しますが、検索開始位置が2番目であることから「true」が画面に表示されています。

また、「大阪」は配列内に存在しますが、検索開始位置が3番目であることから「false」が画面に表示されています。

そして「東京」は配列内に存在しますが、検索開始位置が10番目であることから「false」が画面に表示されています。

検索開始位置が0である場合

検索開始位置が0である場合にincludes()を使用します。

検索開始位置に0を指定すると、検索範囲を制限することなく全ての要素を対象として検索することができます。

● main.js

実行結果

検索開始位置が0である場合にincludes()を使用した結果

includes()によって検索範囲を制限することなく、配列の中に含まれているかを調べています。

そのため、「福岡」は配列内に存在していることから「true」が画面に表示されています。

また、「沖縄」は配列内に存在していないことから「false」が画面に表示されています。

検索開始位置が負の数である場合

検索開始位置が負の数である場合にincludes()を使用します。

検索開始位置に負の数を指定すると、配列の「要素数-n」から「末尾」までの要素を対象として検索することができます。

検索開始位置に負の数指定した場合のincludes()の処理イメージ

● main.js

実行結果

検索開始位置が負の数である場合にincludes()を使用した結果

includes()によって検索範囲を制限して、配列の中に含まれているかを調べています。

そのため、「福岡」は配列内に存在しますが、検索開始位置が4番目であることから「true」が画面に表示されています。

また、「東京」は配列内に存在しますが、検索開始位置が5番目であることから「false」が画面に表示されています。

そして「大阪」は配列内に存在しますが、検索開始位置が1番目であることから「true」が画面に表示されています。

検索開始位置が非数である場合

検索開始位置が非数である場合にincludes()を使用します。

検索開始位置に非数を指定すると、検索範囲を制限することなく全ての要素を対象として検索することができます。

● main.js

実行結果

検索開始位置が非数である場合にincludes()を使用した結果

includes()によって検索範囲を制限することなく、配列の中に含まれているかを調べています。

そのため、「福岡」は配列内に存在していることから「true」が画面に表示されています。

また、「千葉」は配列内に存在していないことから「false」が画面に表示されています。

includes()で特定の要素が多次元配列の中に含まれているか調べるサンプルコード

includes()で特定の要素が多次元配列の中に含まれているか調べるサンプルコードをご紹介します。

2次元配列の場合

2次元配列に対して、includes()を使用します。

● main.js

実行結果

includes()で特定の要素が2次元配列の中に含まれているか調べた結果

includes()で2次元配列の中に特定の要素が含まれているかを調べています。

そのため、「北海道」は指定した1次元配列に存在するため「true」が、「岡山」は指定した1次元配列の中に存在しないため、「false」が表示されています。

また、「静岡」は指定した2次元配列自体に存在しないため「false」が表示されています。

3次元配列の場合

3次元配列に対して、includes()を使用します。

● main.js

実行結果

includes()で特定の要素が3次元配列の中に含まれているか調べた結果

includes()で3次元配列の中に特定の要素が含まれているかを調べています。

そのため、「兵庫」は指定した1次元配列に存在するため「true」が、「愛知」は指定した1次元配列の中に存在しないため「false」が表示されています。

また、「岡山」は指定した2次元配列に存在しないため「false」が、「埼玉」は3次元配列自体に存在しないため「false」が表示されています。

includes()で多次元配列内にある要素すべてを対象として要素が含まれているか調べる方法

先ほど、多次元配列にincludes()を使用しましたが、多次元配列内の要素には使用できないため、配列にインデックスを指定していました。

しかし、includes()で多次元配列内にある要素すべてを対象として要素が含まれているかを調べる方法があります。

forEachを使用する

まず、1つ目はforEachを使用する方法です。

forEachとは、配列に格納されている要素に対して繰り返し処理を行う文法になります。

つまり、forEachで多次元配列に格納されている要素を取り出し、新しく格納した1次元配列に対してincludes()を使用することで、すべての要素を対象として特定の要素が含まれているかを調べることが可能になります。

● main.js

実行結果

forEachを使用してincludes()で多次元配列内にある要素すべてを対象として要素が含まれているか調べた結果

forEachによってincludes()で多次元配列内にある要素すべてを対象として要素が含まれているかを調べています。

そのため、「千葉」は配列内に存在することから「true」が、「岩手」は配列内に存在しないことから「false」が表示されています。

flat()を使用する

そして、2つ目はflat()を使用する方法です。

flat()とは、ネスト化された配列(多次元配列)をひとつの配列(1次元配列)にすることができるメソッドになります。

つまり、flat()で指定した多次元配列を1次元配列に変換し、そのに対してincludes()を使用することで、すべての要素を対象として特定の要素が含まれているかを調べることが可能になります。

● main.js

実行結果

flat()を使用してincludes()で多次元配列内にある要素すべてを対象として要素が含まれているか調べた結果

flat()によってincludes()で多次元配列内にある要素すべてを対象として要素が含まれているかを調べています。

そのため、「北海道」は配列内に存在することから「true」が、「福島」は配列内に存在しないことから「false」が表示されています。

配列にincludes()を使用する実際のケース

配列にincludes()を使用する実際のケースについてご紹介します。

例えば、includes()を使用してオブジェクトを全てクリックするような簡単なゲームを作成してみます。

● index.html

● style.css

● main.js

実行結果

includes()で簡単なゲームを作成した結果

includes()は終了のアラートを表示する際の条件として使用しており、オブジェクトのステータスである配列の要素に「on」が含まれていないかどうかの確認をしています。

そのため、オブジェクを全てクリックすると「終了」のアラートが表示されます。

特定の要素が配列の中に含まれているかを調べることができるメソッドの一覧

特定の要素が配列の中に含まれているかを調べることができるメソッドは実は、includes()以外にも存在します。

そのため、ここでは特定の要素が配列の中に含まれているかを調べることができるメソッドの一覧についてご紹介します。

every()

every()とは配列内の要素に対して条件が一致しているかどうかを確認するメソッドになります。

条件が配列内の全ての要素に該当すれば「true」が返し、そうでない場合は「false」を返すようになります。

● main.js

実行結果

every()で配列内の要素に対して条件が一致しているかどうかを確認した結果

every()によって、配列内の要素に対して条件が一致しているかどうかを確認しています。

そのため、配列内の全ての要素が偶数ではないことから「false」が、全ての要素が10より大きいことから「true」が表示されています。

some()

some()とは、配列内の要素に対して条件が一致しているかどうかを確認するメソッドになります。

しかし、配列の中で1つでも指定条件に該当するものがあれば「true」を返し、そうでなければ「false」を返すようになります。

● main.js

実行結果

some()で配列内の要素に対して条件が一致しているかどうかを確認した結果

some()によって、配列内の要素に対して条件が一致しているかどうかを確認しています。

そのため、配列内に偶数の要素がいくつか存在することから「true」が、10未満の要素は1つも存在しないことから「false」が表示されています。

まとめ

⚫︎ includes()とは指定した値が対象の文字列に含まれているかどうかを調べることができるメソッドである

⚫︎ 検索する値が要素に存在する場合にincludes()を使用するとtrueを返す

⚫︎ 検索する値が要素に存在しない場合にincludes()を使用するとfalseを返す

⚫︎ 検索開始位置が正の数である場合にincludes()を使用すると、配列「のn番目」から「末尾」までの要素を検索対象として調べる

⚫︎ 検索開始位置が0や非数である場合にincludes()を使用すると、配列の全ての要素を検索対象として調べる

⚫︎ 検索開始位置が負の数である場合にincludes()を使用すると、配列の「要素数-n番目」から「末尾」までの要素を検索対象として調べる

⚫︎ includes()は1次元配列だけでなく多次元配列にも使用することができる
(配列をインデックスで指定する必要がある)

⚫︎ 多次元配列内にある要素すべてを対象としてincludes()を使用するには下記のような方法がある
・forEach()を使用する
・flat()を使用する

⚫︎ 特定の要素が配列の中に含まれているかを調べるメソッドは、includes()以外にも下記のようなメソッドがある
・every()
・some()

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です