[初心者用]CoffeeScriptのforが多機能なので整理するために纏めてみました

<h2>本来は自分用メモのものですが、せっかくまとめたので抜粋。書式変更するの面倒なので、コードそのままベタ張り。</h2>

<h3>まずは基本</h3>
<blockquote>for <span style="color: red;">element</span> in [element1, element2, element3]
&nbsp; console.log <span style="color: red;">element</span></blockquote>
変換後
<blockquote>var element, _i, _len, _ref;
_ref = [element1, element2, element3];
for (_i = 0, _len = _ref.length; _i &lt; _len; _i++) {
&nbsp; element = _ref[_i];
&nbsp; console.log(element);
}</blockquote>
一文にまとめる書き方もある。ただし、この場合処理は一つのみ。
<blockquote class="tr_bq">&nbsp;conosle.log(element) for element in [element1, element2, element3]</blockquote>

<h3>
for elementの後で「, index」を入れると、インデックス番号も取得できる</h3>
<blockquote class="tr_bq">for element, <span style="color: red;">index </span>in [element1, element2, element3]
<span class="Apple-tab-span" style="white-space: pre;"> </span>console.log "#{index} : #{element}"</blockquote>
変換後
<blockquote>var element, index, _i, _len, _ref;
_ref = [element1, element2, element3];
for (<span style="color: red;">index </span>= _i = 0, _len = _ref.length; _i &lt; _len; index = ++_i) {
&nbsp; element = _ref[index];
&nbsp; console.log("" + index + " : " + element);
}</blockquote>
一文にまとめる書き方もある。ただし、この場合処理は一つのみ。
<blockquote class="tr_bq">&nbsp;console.log("" + index + " : " + element)&nbsp;for element, index in [element1, element2, element3]</blockquote>

<h3>for文の後ろにwhenを入れると、条件を満たすものだけ処理を行うことができる</h3>
<blockquote class="tr_bq">for element, index in [element1, element2, element3] <span style="color: red;">when </span>element == element1
<span class="Apple-tab-span" style="white-space: pre;"> </span>console.log "#{index} : #{element}"[/code]</blockquote>
変換後
<blockquote class="tr_bq">var element, index, _i, _len, _ref;
_ref = [element1, element2, element3];
for (index = _i = 0, _len = _ref.length; _i &lt; _len; index = ++_i) {
&nbsp; element = _ref[index];
&nbsp; <span style="color: red;">if (element === element1)</span> {
&nbsp; &nbsp; console.log("" + index + " : " + element);
&nbsp; }
}</blockquote>

<h3>受け皿となる変数を用意すると、forで回して処理を行った結果を配列として受け取ることができる。</h3>
<blockquote class="tr_bq"><span style="color: red;">collection </span>= for element in [element1, element2, element3]
<span class="Apple-tab-span" style="white-space: pre;"> </span><span style="color: red;">element * 5</span></blockquote>
変換後
<blockquote class="tr_bq">var collection, element;
collection = (function() {
&nbsp; var _i, _len, _ref, _results;
&nbsp; _ref = [element1, element2, element3];
&nbsp; _results = [];
&nbsp; for (_i = 0, _len = _ref.length; _i &lt; _len; _i++) {
&nbsp; &nbsp; element = _ref[_i];
&nbsp; &nbsp; <span style="color: red;">_results.push(element * 5);</span>
&nbsp; }
&nbsp; <span style="color: red;">return _results;</span>
})();</blockquote>
一文にまとめることも可能。ただしこの場合は処理は一つのみ。また、<span style="color: red;"><b>必ず括弧で囲まないと、下記の例では「collection = element * 5」という処理になってしまうので注意。</b></span>これは正直一文にまとめるものではないと考える。
<blockquote class="tr_bq">collection = (element * 5 for element in [element1, element2, element3])&nbsp;</blockquote>

<h3>whenによる条件式も反映されるので、応用として、特定の条件を通過したエレメントのみを配列として受け取ることができる。上記同様、処理したものを戻すことも可能。</h3>
<blockquote class="tr_bq">collection = for element in [element1, element2, element3] <span style="color: red;">when </span>element.prop == 0
<span class="Apple-tab-span" style="white-space: pre;"> </span>element</blockquote>
変換後
<blockquote class="tr_bq">var collection, element;
collection = (function() {
&nbsp; var _i, _len, _ref, _results;
&nbsp; _ref = [element1, element2, element3];
&nbsp; _results = [];
&nbsp; for (_i = 0, _len = _ref.length; _i &lt; _len; _i++) {
&nbsp; &nbsp; element = _ref[_i];
<span style="color: red;">&nbsp; &nbsp; if (element.prop === 0) {&nbsp; &nbsp; &nbsp; _results.push(element);&nbsp; &nbsp; }</span>
&nbsp; }
&nbsp; return _results;
})();</blockquote>
一行にまとめることも可能・・・だけど、もうなんだか訳が分からなくなるような感じ。
<blockquote class="tr_bq">collection = (element for element in [element1, element2, element3] when element.prop == 0)&nbsp;</blockquote>

<h3>以上は、連番の配列（Array）。連想配列(Object)はfor - ofを使う。基本Key-Value両方欲しいものなので、以下の書き方で固定しておくとよいと思われる。</h3>
<div>
<blockquote class="tr_bq">for <span style="color: red;">key, value</span> of {key1:1, key2:2, key3:3}
<span class="Apple-tab-span" style="white-space: pre;"> </span>console.log "#{<span style="color: red;">key</span>} : #{<span style="color: red;">value</span>}"</blockquote>
<div>
変換後</div>
<blockquote class="tr_bq">var key, value, _ref;
_ref = {
&nbsp; key1: 1,
&nbsp; key2: 2,
&nbsp; key3: 3
};
for (key in _ref) {
<span style="color: red;">&nbsp; value = _ref[key];&nbsp; console.log("" + key + " : " + value);</span>
}</blockquote>
</div>
一文にまとめることも可能。ただし、この場合処理は一つのみ。
<blockquote class="tr_bq">console.log "#{key} : #{value}" for key, value of {key1:1, key2:2, key3:3}</blockquote>

<h3>指定回数ループさせたい場合</h3>
<blockquote class="tr_bq">
for i in [0...10]
<span class="Apple-tab-span" style="white-space: pre;"> </span>console.log i</blockquote>
変換後
<blockquote class="tr_bq">var i, _i;
for (i = _i = 0; _i &lt; 10; i = ++_i) {
&nbsp; console.log(i);
}</blockquote>
指定個数の要素を連番で入れた配列を渡せば、従来通りのfor文が作れる。逆順も可能。今までの配列走査は頭からしかできなかったので、逆順で走査したいときはこの方法か、whileを使用する。
<blockquote class="tr_bq">for i in [9..0]
<span class="Apple-tab-span" style="white-space: pre;"> </span>console.log i</blockquote>
変換後
<blockquote class="tr_bq">var i, _i;
for (i = _i = 9; _i &gt;= 0; i = --_i) {
&nbsp; console.log(i);
}</blockquote>
連番要素の配列の作り方の説明は割愛。 <b><span style="color: red;">[0...10]で0以上10未満、[0..10]で0以上10以下になるので注意。通常のfor文の作り方であれば、ドット3つの方を覚えておけばよい。</span></b>

あと、必ず0から始める必要はない。[5, 6, 7]とかでもいい。

<h3>固定数を元に、飛び飛びで処理したい場合(i++ではなくi+=2的な）</h3>
<blockquote>for i in [0...10] <span style="color: red;">by</span> 2
&nbsp;console.log i</blockquote>
変換後<blockquote>var i, _i;
for (i = _i = 0; _i &lt; 10; i = <span style="color: red;">_i += 2</span>) {
&nbsp; console.log(i);
}</blockquote>

<h4>指定のプロパティ（キー）を、オブジェクトが持っているかどうかを調べた上で処理を行う。</h4>
JSでは「hasOwnProperty」を使うわけで、そのための仕組みを既にfor文用に仕込んである。これは定型と考えてよい。keyの前にownを記述すると、hasOwnPropertyを使用した条件式が組み込まれる。
<blockquote>for <span style="color: red;">own key</span>, value of object
&nbsp; value * 5</blockquote>
変換後<br />
<blockquote>var key, value,
&#95;&#95;hasProp = {}.hasOwnProperty;
for (key in object) {
&nbsp;  <span style="color: red;">if (!__hasProp.call(object, key)) continue;</span>
&nbsp;  value = object[key];
&nbsp;  value * 5;
}</blockquote>

一文にまとめることも可能。ただし、処理は一つのみ。
<blockquote>value * 5 for own key, value of object</blockquote>

<h3>【番外編】for文の中で関数を作って処理する</h3>
for文の中で関数を扱いたい場合、for文の外部で関数を作ってそれを使うのもいいのだけれど、for文の中でしか使わない関数の場合、その中で作ることも可能。関数を作るときはdoを使う。すると、JSに変換後、その関数を外部化してくれて、使いまわせるようになっている。（ただし関数オブジェクトの名前は_fnとか_fn1とか勝手につけられるので、その場所以外で使うことはできない）

<blockquote>for elm in [1...5]<br>
&nbsp;  do (elm)-><br>
&nbsp;&nbsp; alert(elm)</blockquote>

変換後

<blockquote>var elm, _fn, _i;<br>
<br>
_fn = function(elm) {<br>
&nbsp;  return alert(elm);<br>
};<br>
for (elm = _i = 1; _i < 5; elm = ++_i) {<br>
&nbsp;  _fn(elm);<br>
}</blockquote>

for文以外のところでdoを使った関数作成を行うと、即時関数「(function(){})()」を作成する。まぁ使い道がないわけではないのだが、forとは違う使い方になるのには注意。

これもまた、一文にまとめることはできるが、括弧でくくったりして解りづらくなるので外部で作るか、1文にまとめずに数行にわたって書くことを推奨したい。いつものことながら処理は1つのみ。

<blockquote>(do (elm)-> alert(elm)) for elm in [1...5]</blockquote>