JavaScriptのArray.forEachメソッドの使い方!(配列要素で繰り返し処理)

JavaScript

今回はJavaScriptの配列でforEachメソッドを使う方法について、書いています。
配列からforEachメソッドを呼び出すことで、ひとつずつ要素を取り出して繰り返し処理を行うことができます。

使い方を解説した後に、forEachを使用した簡単なプログラムを作成します。

forEachの使い方は?

forEachを使用することで、配列の要素をひとつずつ取り出して処理することが可能です。
for文との違いは、for文は変数やカウンタの更新値が必要でしたが、forEachでは配列からforEachメソッドを使用するだけでループさせることが可能です。

単純に配列の要素を全て取り出して、処理を繰り返してくれます。
カウンタ変数や更新値を書く必要がないので、バグが発生しづらくなると思うので、単純な要素数分のループはこちらの構文を使用した方が良さそうです。

実際に使う場合は下記のように使用します。

const fruits = ['apple', 'orange', 'banana'];

fruits.forEach((data, index) => {
  console.log(data, index);
});

配列に「.」(ドット)をつけて、そこからforEachメソッドを呼びます。
forEachの引数にはコールバック関数を書きます。

今回は「(data, index) => {}」を書いています。
dataには配列の値がひとつずつ取り出されて、indexには配列のキーが取り出されて処理されます。
第2引数のindexは省略可能です。

配列分ループして、ブラウザのコンソールに出力しています。
結果下記のように出力されます。

apple 0
orange 1
banana 2

第3引数を指定する

第3引数を指定すると、指定した第3引数では配列の内容が、そのまま取得できます。
例えば、先ほどの関数の第3引数に下記のように指定します。

const fruits = ['apple', 'orange', 'banana'];

fruits.forEach((data, index, array) => {
  console.log(array);
});

この場合、arrayには配列の要素がそのまま入っています。(['apple', 'orange', 'banana']);

無名関数で使用する

今回アロー演算子を使用して、コールバック関数を書きましたが、下記のように関数を書いても動きます。

const fruits = ['apple', 'orange', 'banana'];

fruits.forEach(function (data, index) {
  console.log(data, index);
});

まとめ

使用方法を簡潔にまとめると、下記のような形になります。

[Arrayオブジェクト].forEach(([配列の要素], [配列のキー(0から) - 省略可能], [配列そのもの - 省略可能]) => {
  // ループで行いたい処理
});

コールバック関数に渡す内容の第1引数以外は省略可能です。

forEachを書いてみよう

実際にforEachメソッドを使用した処理を書いて、動作を確かめてみます。
forEachTest.htmlという名前で、下記のファイルを作成してみます。

<html>
  <head>
    <meta charset="UTF-8" />
    <title>forEachのテスト</title>
    <script>
      function forEachTest() {
        const fruits = [
          {name: 'リンゴ', price: 120},
          {name: 'ぶどう', price: 180},
          {name: 'バナナ', price: 110},
        ];

        let tableTag = '<table>';
        tableTag += '<tr><th>名前</th><th>価格</th></tr>';
        fruits.forEach((data) => {
          tableTag += '<tr>';
          tableTag += `<td>${data.name}</td><td>${data.price}</td>`;
          tableTag += '</tr>';
        });
        tableTag += '</table>';

        document.querySelector('#fruits_table').innerHTML = tableTag;
      }
    </script>
    <style>
      table {
        border-collapse: collapse;
        margin: 10px;
      }
      table tr td {
        border: 1px solid #000;
        padding: 5px;
      }
      table tr th {
        border: 1px solid #000;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <button onclick="forEachTest()">forEachのテスト</button>
    <div id="fruits_table"></div>
  </body>
</html>

ボタンをひとつ配置しました。
「forEachテスト」ボタンを押すと、forEachTest関数が実行されます。

forEachTest関数の処理の説明をします。
全体の流れとして、関数の中では配列に入っている要素をテーブルタグにして、id='fruits_tables'divタグに展開するようにしています。

最初に配列を作成しています。果物と値段が入っています。
これをテーブルにして出力します。

const fruits = [
  {name: 'リンゴ', price: 120},
  {name: 'ぶどう', price: 180},
  {name: 'バナナ', price: 110},
];

実際にタグを作成している箇所が下記です。
タグを作成するときに要素分ループさせて、テーブルの行を作成しています。

let tableTag = '<table>';
tableTag += '<tr><th>名前</th><th>価格</th></tr>';
fruits.forEach((data) => {
  tableTag += '<tr>';
  tableTag += `<td>${data.name}</td><td>${data.price}</td>`;
  tableTag += '</tr>';
});
tableTag += '</table>';

最初にtableTag変数を用意して、tableタグの開始を書いています。

次にfruits.forEachと書いて、配列からforEachを呼び出しています。
配列に入れたオブジェクト分ループして、処理されます。

dataに配列のひとつの要素が入ってくるので、果物名(data.name)や価格(data.price)の値を取り出してtdタグを作っています。
要素分(3回)ループして、果物名と価格の入ったタグを作成します。

最後にtableタグの終了を書いています。
処理が終わったら、下記のようにdocument.querySelectorを使用して、id='fruits_tables'divタグに作ったテーブルを展開しています。

document.querySelector('#fruits_table').innerHTML = tableTag;

動作確認をする

実際に動作を確認してみます。
作成したforEachTest.htmlファイルを開くと、下記のようにボタンが表示されました。
JavaScriptでforEach関数の検証

ボタンをクリックすると、このようにテーブルが展開されたことが確認できました。
JavaScriptでforEach関数の検証結果

コメント

タイトルとURLをコピーしました