JavaScript における for文 の色々な書き方

posts_photo

JavaScriptを扱っていると、ほぼ必ず目にするfor文。
ちゃんとした書き方以外にも省略形みたなものもあって、プラグインや他人が書いたスクリプトを読む際にそれらを知らないと要らぬ時間を取られることがあるので記事にまとめてみました。

普通のfor文

見かけるfor文のほとんどは下記の形ですね。これならわかりやすい。

// for(初期値; 条件式; 増減式){ 処理 }

for(i=0; i<=5; i++ ){
  console.log(i);
}

for文の省略した書き方

プラグインなどの一行でも少なくしてファイルサイズを減らしたいものや、書き手の個性によってはたまーに省略した書き方をしている場合もあります。

// デクリメントの場合はiが0以下になるとループが止まる。
// ※デクリメント( i--;で値を減らす書き方の呼び名)

for(i=6;i--;){
  console.log(i);
}

// 余談ですが、for文に限らず一行で書ける処理ならば{}が省略できますね。

for(i=6;i--;)console.log(i);

for…in文

for…in文はオブジェクトの中身の分だけループする書き方です。
配列を扱うループのときに便利そうです。

追記修正:コメントでご指摘があったので調べ直してみると、for…inは、順序が保証されない、遅いなどの問題があるので配列では使わないほうがいいようです。調べが足りずごめんなさい…。連想配列には使っても良さげです。

// for(変数 in オブジェクト){ 処理 }

var obj={ a:'val1', b:'val2', c:'val3' };
for(var n in obj){
  console.log(obj[n]);
}

参考:JavaScript の配列と連想配列の違い

用途に合わせて書き分けていきたいですね!

JavaScript逆引きレシピ jQuery対応
JavaScript逆引きレシピ jQuery対応
-Amazonで見る