【JavaScript】some()で配列や連想配列のいずれかの要素が条件を満たすか調べる!

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

JavaScriptで配列や連想配列から条件を満たす要素を調べる方法として、some()があります。

some()とは配列のいずれかの要素が条件を満たしているかどうかを確認するメソッドになります。

満たしているかどうかを確認するため、some()は「true」や「false」の「真偽値」を返り値として返すようになります。

そして、条件は直接指定することもできますが、他のオブジェクトのデータを条件の材料として利用することができます。

また、連想配列や多次元配列にも使用することができるので、条件を満たしているかどうか確認したい場合はsome()を使用しましょう。

今回はJavaScriptの some()で配列や連想配列のいずれかの要素が条件を満たすか調べる方法について紹介していきます。

この記事はこんな方におすすめ
・配列のいずれかの要素が条件を満たすかどうか調べたい場合




some()とは

some()とは配列のいずれかの要素が条件を満たしているかどうかを確認するメソッドになります。

いずれかの要素であるため、どれか1つでも条件を満たせば「true」が返されるようになります。

some()の使い方

some()の使い方は下記のようになります。

配列の後ろにsome()と追記し、必須パラメータを1つ指定します。

また、任意なパラメータを1つ追加して指定することができます。

some()のパラメータ

some()のパラメータは下記のようになります。

  1. コールバック関数(必須):
    指定した配列に対して行いたい処理を関数で指定する
  2. オブジェクト(任意):
    コールバック関数で使用するためのオブジェクト(文字列や配列など)を指定する

some()は必須なパラメータとして「コールバック関数」を指定します。

そして任意なパラメータとして「オブジェクト」を指定することができます。

some()の返り値

soome()の返り値は「true」か「false」の「真偽値」となります。

some()で配列のいずれかの要素が条件を満たすか調べるサンプルコード

some()で配列のいずれかの要素が条件を満たすか調べるサンプルコードをご紹介します。

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

  1. 条件を満たす要素が存在する場合
  2. 条件を満たす要素が存在しない場合

条件を満たす要素が存在する場合

条件を満たす要素が存在する場合にsome()を使用します。

● main.js

実行結果

条件を満たす要素が存在する場合にsome()を使用した結果

some()によって配列のいずれかの要素が条件を満たすか調べています。

今回は、100以下の要素が1つでも存在しているため、「true」が表示されています。

条件を満たす要素が存在しない場合

条件を満たす要素が存在しない場合にsome()を使用します。

● main.js

実行結果

条件を満たす要素が存在しない場合にsome()を使用した結果

some()によってこちらも配列のいずれかの要素が条件を満たすか調べています。

今回は、10以下の要素が1つも存在しないため、「false」が表示されています。

some()で連想配列のいずれかの要素が条件を満たすか調べるサンプルコード

some()で連想配列のいずれかの要素が条件を満たすか調べるサンプルコードをご紹介します。

some()は連想配列には直接使用することはできません。

そのため、キーと値を別々の配列に分けて使用する必要があります。

いずれかのキーが条件を満たすか調べる場合

some()で連想配列のいずれかのキーが条件を満たすか調べていきます。

連想配列のキーを取り出す場合はObject.keys()を使用します。

● main.js

実行結果

some()で連想配列のいずれかのキーが条件を満たすかどうかを調べた結果

some()によって連想配列のいずれかのキーが条件を満たすか調べています。

5文字より多いキーが存在するため、「true」が表示されています。

また、20文字より多いキーが1つも存在しないため、「false」が表示されています。

いずれかの値が条件を満たすか調べる場合

some()で連想配列のいずれかの値が条件を満たすか調べていきます。

連想配列の値を取り出す場合はObject.values()を使用します。

● main.js

実行結果

some()で連想配列のいずれかの値が条件を満たすかどうかを調べた結果

some()によって連想配列のいずれかの値が条件を満たすか調べています。

2で割り切れる数値が存在するため、「true」が表示されています。

また、3で割り切れる数値が存在しないため、「false」が表示されています。

some()で多次元配列のいずれかの要素が条件を満たすか調べる場合

some()で多次元配列のいずれかの要素が条件を満たすか調べます。

2次元配列の場合

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

● main.js

実行結果

some()で2次元配列のいずれかの要素が条件を満たすかどうかを調べた結果

some()によって2次元配列のいずれかの要素が条件を満たすか調べています。

配列名の後ろにインデックスを1つ指定することで、2次元配列内にある1次元配列の要素に対して条件を満たすか調べています。

また、forEachを使用することで、2次元配列全体の要素に対して条件を満たすか調べています。

3次元配列の場合

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

● main.js

実行結果

some()で3次元配列のいずれかの要素が条件を満たすかどうかを調べた結果

some()によって3次元配列のいずれかの要素が条件を満たすか調べています。

配列名の後ろにインデックスを2つ指定することで、3次元配列内にある1次元配列の要素に対して条件を満たすか調べています。

そして、配列名の後ろにインデックスを1つ指定し、flat()を使用することで、3次元配列内にある指定した2次元配列の要素に対して条件を満たすか調べています。

また、flat()のみを使用することで、3次元配列全体の要素に対して条件を満たすか調べています。

some()でオブジェクトと比較して配列のいずれかの要素が条件を満たすか調べる場合

オブジェクトと比較して、some()でいずれかの要素が条件を満たすかどうか調べる場合にはパラメータに「オブジェクト」を指定します。

オブジェクトを指定することで、他の配列やデータを条件に使用することができます。

オブジェクトとして指定したデータはコールバック関数内で「this」として使用することができます。

● main.js

実行結果

some()でオブジェクトと比較して配列のいずれかの要素が条件を満たすかどうか調べた結果

some()にオブジェクトを指定することで、他の配列やデータと比較して配列のいずれかの要素が条件を満たすか調べています。

オブジェクトの3番目の要素(20)以上の数値が存在するため、「true」が表示されています。

some()でコールバック関数で指定する引数を変更する場合

これまでコールバック関数の引数は1つ指定していましたが、実は3つまで引数を取得することができます。

引数が多くなると、値以外にも指定できる部分が増えてくるため、some()の利便性がとても高くなります。

そのため、ここではコールバック関数を下記の2つのパターンでご紹介していきます。

  1. コールバック関数の引数を2つ指定する場合
  2. コールバック関数の引数を3つ指定する場合

コールバック関数の引数を2つ指定する場合

コールバック関数の引数を2つ指定する場合にsome()を使用します。

2つ目の引数は「インデックス」を指定することができます。

インデックスを指定することで、配列に格納されている値のインデックスを指定して処理を行うことが可能になります。

● main.js

実行結果

コールバック関数の引数を2つ指定してsome()を使用した結果

some()のコールバック関数の引数を2つ指定することで、インデックスを指定して配列のいずれかの要素が条件を満たすか調べています。

「配列のn番目の要素 ≧ オブジェクトのn番目の要素」の数値が存在するため、「true」が表示されています。

コールバック関数の引数を3つ指定する場合

コールバック関数の引数を3つ指定する場合にsome()を使用します。

3つ目の引数は「配列」を指定することができます。

配列を指定することで、指定した配列の値を操作することが可能になります。

● main.js

実行結果

コールバック関数の引数を3つ指定してsome()を使用した結果

some()のコールバック関数の引数を3つ指定することで、元の配列を操作して配列のいずれかの要素が条件を満たすか調べています。

配列に99以上の要素が存在するため「true」が表示されています。

また、配列の1番目から4番目までの要素が「10000」に変更されています。

some()を使用した実際のケース

some()を使用した実際のケースについてご紹介します。

ここでは、簡易な暗号ロック解除のアプリを作成してみます。

● index.html

● style.css

● main.js

実行結果

some()で簡易な暗号ロック解除のアプリを作成した結果

some()を使用して、簡易な暗号ロック解除のアプリを作成しています。

そのためボタンを押すと、ランダムにセットされた暗証番号が解除され、解除アラートが表示されています。

また、some()は暗証番号のステータスに「NG」がないかどうかを確認するために使用しています。

配列の全ての要素が条件を満たすか調べる場合

配列内の全ての要素が条件を満たすか調べる場合は、every()を使用します。

every()とは配列の全ての要素が条件を満たすかどうかを調べるメソッドになります。

全ての要素が条件を満たす場合は「true」を、満たさない場合は「false」を返すようになります。

● main.js

実行結果

every()で配列の全ての要素が条件を満たすか調べた結果

every()によって配列の全ての要素が条件を満たすか調べています。

全ての要素が15以上の数値でないため「false」が表示されています。

また、全ての要素が10以上の数値であるため「true」が表示されています。

配列から条件を満たす要素のみを取り出す場合

配列から条件を満たす要素のみを取り出す場合は、filter()を使用します。

filter()とは配列から条件を満たす値を取りだして新しい配列を作成するメソッドになります。

● main.js

実行結果

filter()で配列から条件を満たす要素のみを取り出した結果

filter()によって配列から条件を満たす値を格納した新たな配列が作成されています。

そのため、指定した配列から偶数のみ取り出された新たな配列が表示されています。

もし、filter()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ some()とは配列のいずれかの要素が条件を満たしているかどうかを確認するメソッドである

⚫︎ some()は下記のようなパラメータを指定して使用する
・コールバック関数(必須)
・オブジェクト(任意)

⚫︎ 条件を満たす要素が存在する場合にsome()を使用すると「true」を返す

⚫︎ 条件を満たす要素が存在しない場合にsome()を使用すると「false」を返す

⚫︎ some()は連想配列にも使用することができる
(直接使用できないため、キーと値を別々にする必要がある)

⚫︎ some()は1次元配列だけでなく、2次元配列や3次元配列のような多次元配列にも使用することができる

⚫︎ some()のパラメータにオブジェクトを指定すると、他のオブジェクトと比較して条件を満たしているか確認ることができる

⚫︎ some()のコールバック関数の引数を2つ指定すると、インデックスを指定しながら条件を満たす新たな配列を作成できる

⚫︎ some()のコールバック関数の引数を3つ指定すると、条件を満たす新たな配列を作成しながら、元の配列の値を操作できる

⚫︎ 配列の全ての要素が条件を満たしているか確認するにはsome()を使用する

⚫︎ 配列から条件を満たす要素のみを取り出すにはfilter()を使用する

コメントを残す

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