JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの配列some()メソッドの使い方をわかりやすく解説

JavaScriptのArray.some()メソッドは、配列の要素の中に、指定されたテスト(条件)を満たすものが「1つでも存在するかどうか」を判定するためのメソッドです。ここでいうテストとは、配列の各要素に対して順番に実行されるコールバック関数のことを指します。

コールバック関数が1つでもtrueを返した時点でsome()はtrueを返し、すべての要素が条件を満たさなかった場合はfalseを返します。なお、空の配列に対して呼び出した場合は常にfalseを返すという仕様になっている点にも注意しましょう。

some()メソッドのサンプルコード

以下は、配列のsome()メソッドを使った具体的な実装例です。この例では、配列の中に11の倍数が含まれているかどうかを判定しています。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript Array some()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to see if some multiples of 11 are present in
array or not
</h3>
<script>
   function checkMultiple(ele) {
      if (ele % 11 == 0) return true;
   }
   let fillEle = document.querySelector(".sample");
   let arr = [22, 19, 55, 12, 14];
   fillEle.innerHTML = arr;
   document.querySelector(".Btn").addEventListener("click", () => {
      fillEle.innerHTML = "Multiples of 11 present: " + arr.some(checkMultiple);
   });
</script>
</body>
</html>

実行結果

ページを表示すると、まず配列の内容が出力エリアに表示されます。

JavaScriptの配列some()メソッドの使い方をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、次のように11の倍数が配列に含まれているかどうかの判定結果が表示されます。

JavaScriptの配列some()メソッドの使い方をわかりやすく解説

この例では、配列 [22, 19, 55, 12, 14] の中に11の倍数(22と55)が存在するため、some()メソッドはtrueを返します。

このように、some()メソッドを活用すれば、「配列の中に条件を満たす要素が存在するか?」という判定をシンプルなコードで実現できます。入力値のバリデーションやデータの存在チェックなど、さまざまな場面で役立つので、ぜひ使いこなしてみてください。

  1. JavaScriptの配列findIndex()関数の使い方をわかりやすく解説

    JavaScriptのfindIndex()関数は、配列の中から指定した条件を満たす最初の要素を見つけ、そのインデックス番号を返すメソッドです。条件に合う要素が見つかった場合、その要素のインデックスが返されます。もし条件を満たす要素がひとつも存在しない場合は、-1が返されるという特徴があります。findIndex()の基本的な使い方以下は、findIndex()関数を使ったサンプルコードです。ボタンをクリックすると、配列内の「lion」という要素のインデックスを取得して表示します。サンプルコード<!DOCTYPE html> <html lang="ja"

  2. 【JavaScript】関数から返された配列にアクセスする方法

    JavaScriptでは、関数の戻り値として配列を返し、呼び出し元でその配列を受け取って自由に操作することができます。本記事では、関数から返された配列へアクセスする具体的な方法を、実際に動作するサンプルコードとともに解説します。 実装例:関数から配列を返してアクセスする 以下のサンプルでは、引数に渡された数値の1倍〜10倍の値を要素とする配列を生成して返すretTable()関数を定義しています。ボタンをクリックすると、この関数が返した配列を変数で受け取り、画面に表示します。 <!DOCTYPE html> <html lang=ja> <head> &l