JavaScriptのforeach文について3分で語ってみた

この記事はだいぶ前に書かれたものなので情報が古いかもしれません
正直for-inやfor-ofはそんなに使ったことないです

この記事を三行にまとめると

foreach
for-in
for-of
この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。





基本的な書き方

colors = ['赤', '緑', '青']

colors.forEach(function(color, index){
  console.log(index + '番目は' + color)
})



引数を省略した書き方

colors = ['赤', '緑', '青']

// 引数1つだけ
colors.forEach(function(color){
  console.log('色は' + color)
})

// 引数がない
colors.forEach(function(){
  console.log('ループ中・・・')
})



ループの途中で処理を中断する

colors = ['赤', '緑', '青']

// indexが1のときはconsole.logを行わない
colors.forEach(function(color, index){
  if(index == 1) {
    return;
  }

  console.log(index + '番目は' + color)
})



連想配列をforeachで回す

colors = {'赤': '#foo', '緑': '#0f0', '青': '#00f'}
keys = Object.keys(colors)

keys.forEach(function(key){
  console.log(key + 'は' + colors[key])
})



for-inで配列を回す

// 通常の配列を回す
colors = ['赤', '緑', '青']

for(index in colors){
  console.log(index + '番目は' + colors[index])
}

// 連想配列を回す
colors = {'赤': '#foo', '緑': '#0f0', '青': '#00f'}

for(key in colors){
  console.log(key + 'は' + colors[key])
}



for-ofで配列を回す


// 通常の配列を回す
colors = ['赤', '緑', '青']

for(color of colors){
  console.log('色は' + color)
}

// 連想配列を回す
colors = {'赤': '#foo', '緑': '#0f0', '青': '#00f'}
keys = Object.keys(colors)

for(key of keys){
  console.log(key + 'は' + colors[key])
}



アロー関数を使った書き方

colors = ['赤', '緑', '青']

colors.forEach((color, index) => {
  console.log(index + '番目は' + color)
})
 もしかしたら何か関連しているかも? 
 質問や感想などお気軽にコメントしてください