雑学

どーも!

たかpんです!

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

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

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形にしか使えないんです...

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

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の動作環境も用意しておくので、是非お手元で触ってみてください。

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)
}

まとめ

さて、今回はJavascriptでのforeachについてざっくりみてみました!

連想配列の仕組みとかはあんまりがっつり意識したことなかったなぁ...と。

javascriptは他のメソッド(filter, map, reduceなど)が便利なので、あまり出番はない気がしますが、基本にはなるのでしっかり把握しておきたいですね...!

それでわ!

おすすめの記事