【Javascript】foreach文の使い方！

2021年5月10日 2021年5月10日

どーも！

たかpんです！

今回はJavascriptでのforeach文の使い方をみていこうと思います！

PHPでも色々確認したのですが、思っていたより自分の整理にいいなぁと思ったのでjavascriptでもやってみようと思います...!

1 foreach文の使い方！
2 今回試したコード
3 まとめ

foreach文の使い方！

さて、ではJavascriptでのforeach文の使い方をみていこうと思います！

配列の中身から一件づつ取得...といった場合によく使われますね...!

まずは基本的なところから見ていきましょう！

基本的なforeach

let articles = ['article1', 'article2', 'article3', 'article4']
articles.forEach(article => console.log(article));

// 出力結果
article1
article2
article3
article4

さて、こんな感じで配列の中身を一件づつ取り出すことができます。

最も簡単で、基本的な使い方ですね！

では次に連想配列を見てみましょう！

連想配列の場合

さて、JavaScriptではArray形で連想配列は存在しません...

というのも、連想配列的なデータを使いたい場合はObjectで定義してあげる必要があります。

例えば以下のような形です。

articles =　{ 
    article1: 'title1', 
    article2: 'title2', 
    article3: 'title3', 
    article4: 'title4' 
}

console.log(typeof(articles)) // object

最後に念の為型の確認もしています。

連想配列はkey, valueと言う値の対を持つものですが、それを実現するために上記のオブジェクトを用います。

そして、以下のMDNの公式ページをみてもわかりますが、forEachメソッドはarray形にしか使えないんです...

MDN Array.prototype.forEach()

そのため、以下のような形でぱっと見いい感じにできそうですが、うまくいきません。

articles.forEach((article, title) => console.log(`${article}: ${title}`));

// 出力結果
/workspace/Main.js:23
articles.forEach((article, title) => console.log(article));
         ^

TypeError: articles.forEach is not a function
    at Object.<anonymous> (/workspace/Main.js:23:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    ...
    ...

forEachが関数ではないですよ〜って怒られています。

正しく行うためには一手間加える必要があります。

一例として、keyを配列として取得し、その値を使ってforEachを回し、わかっているkeyで配列の要素を取得してそのkeyのvalueを取得する...

といった形がベストかと思います。

articles =　{ 
    article1: 'title1', 
    article2: 'title2', 
    article3: 'title3', 
    article4: 'title4' 
}
console.log(typeof(articles))
Object.keys(articles).forEach((key) => {
  console.log(`${key} => ${articles[key]}`)
});

// 出力結果
object
article1 => title1
article2 => title2
article3 => title3
article4 => title4

普通の配列でindex(現在の処理位置)を取得する方法

さて、今度は現在のforeachのループで扱っている配列のindexを取得する方法をみてみます。

方法は至って簡単です。

articles = ['article1', 'article2', 'article3', 'article4']
articles.forEach((article, index)  => console.log(`${index}: ${article}`));

// 出力結果
0: article1
1: article2
2: article3
3: article4

配列の要素に加えてindexを指定してあげればその値を扱うことが可能なんですね！

また、このindexは0始まりなので、1始まりからにしたい場合は1を足して扱うようにしてください。

連想配列でindex(現在の処理位置)を取得する方法

さて、次は連想配列の場合もみておきます！

こちらも似たような形です。

先程の連想配列パターンに対してindexを加えるだけでOKです。

articles =　{ 
    article1: 'title1', 
    article2: 'title2', 
    article3: 'title3', 
    article4: 'title4' 
}
Object.keys(articles).forEach((key, index) => {
  console.log(`${index}: ${key} => ${articles[key]}`)
});


// 出力結果
0: article1 => title1
1: article2 => title2
2: article3 => title3
3: article4 => title4

keyの配列に対してindexがフラれるのでそれをそのまま使う形ですね。

今回試したコード

最後に今回筆者が手元で使っていたコードを以下に貼っておきます。

Paizaの動作環境も用意しておくので、是非お手元で触ってみてください。

Paizaで試してみる！

let title = '基本的な使い方'
separate(title)
let articles = ['article1', 'article2', 'article3', 'article4']
articles.forEach(article => console.log(article));


title = '連想配列の場合'
separate(title)
articles =　{ 
    article1: 'title1', 
    article2: 'title2', 
    article3: 'title3', 
    article4: 'title4' 
}
console.log(typeof(articles))
Object.keys(articles).forEach((key) => {
  console.log(`${key} => ${articles[key]}`)
});


title = '通常配列のkeyを出したい場合'
separate(title)
articles = ['article1', 'article2', 'article3', 'article4']
articles.forEach((article, index)  => console.log(`${index}: ${article}`));


title = '連想配列のkeyを出したい場合'
separate(title)
articles =　{ 
    article1: 'title1', 
    article2: 'title2', 
    article3: 'title3', 
    article4: 'title4' 
}
Object.keys(articles).forEach((key, index) => {
  console.log(`${index}: ${key} => ${articles[key]}`)
});


function separate(title) {
    console.log('-------------------------------' + title)
}