【javascript】forEachを使って繰り返し処理をしたい場合

繰り返し処理をしたい場合にjavascriptだとfor文かforEachを使うケースが多いと思います。

今回はforEachの基本的な書き方とfor文との違いについて紹介していきたいと思います。

forEach文

まずforEachとは何か？

forEachはおもに配列データを繰り返し処理をするのに便利なメソッドになります。

forEachは先頭から末尾までを繰り返す処理になります。

この部分はfor文も同じになります。

for文との違いとしては下記になります。

breakやcontinueが使えない

for文と違うところとして繰り返し処理を中断させるbreakやcontinueが使えないという点があります。

forEachの特徴

コールバック関数

array.forEach( function(value, index, array) {
  //繰り返しの処理
});

forEachでは下記の3つの引数を取得することができます。

value	配列データの要素
index	配列のインデックス番号
array	現在処理している配列そのもの

forEachで配列データから名前を取得する

javascript

let fruits = [
        {name: 'りんご', subname: 'apple'},
        {name: 'いちご', subname: 'strawberry'},
        {name: 'ばなな', subname: 'banana'},
        {name: 'ぶどう', subname: 'grape'}
];

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

上記はまずfruitsという変数のなかにデータを格納します。

そのデータをforEachで繰り返し処理させてコンソールログでfruitsのなかにあるnameを順番に取得して表示していきます。

上記をfor文に書き直した場合

forEachをfor文に書き直してみると下記のようになります。

ソースはforEachの方がシンプルではあります。

for( var i=0; i<fruits.length; i++) {
  console.log(fruits[i].name);
}

forEachで配列データを画面に出力

html

<div id="result_forEach"></div>

javascript

let fruits = [
        {name: 'りんご', subname: 'apple'},
        {name: 'いちご', subname: 'strawberry'},
        {name: 'ばなな', subname: 'banana'},
        {name: 'ぶどう', subname: 'grape'}
];

var result1 = document.getElementById('result_forEach');

fruits.forEach(function(data){
        var r = '<p>' + data.name + '</p>';
	result1.insertAdjacentHTML('afterbegin', r);
});

上記の例だとクラスresult_forEachの中にfruitsのnameの値を出力していきます。

結果

りんご
いちご
ばなな
ぶどう