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)
})
 もしかしたら何か関連しているかも? 
 みんなからのコメント 
まだコメントはいただけてないみたい……