先日、jQueryのソースを読む機会がありまして、そこでとても興味深いwhileループの書き方を見つけました。
例題として、"a","b","c"という値が格納された配列の中身を1つずつ取り出す処理を書いてみます。
典型的なwhileループの書き方
function loop1() { var i = 0, len; var array = new Array("a","b","c"); len = array.length; while ( i < len ) { document.write(array[i]); i++; } }
whileの終了条件にループカウンタi < len(配列長)を指定します。上記の例では、iが配列長(len)と同じ3になったときにループ処理を抜けます。この条件を満たすまでループカウンタiをインクリメントしています。
jQueryで用いられているwhileループの書き方
function loop2() { var i = 0, elm; var array = new Array("a","b","c"); while ( (elm = array[ i++ ]) ) { document.write(elm); } }
こちらは配列長(array.length)を取得せずに、配列の中身を1つずつ変数elmに格納していきます。
このループはどういう条件で終了するのかというと、(elm = array[ i++ ])がfalseになったときです。上記の例では、配列array[3]にアクセスすると、undefinedが返ってきます。undefinedはfalse扱いになるため、自動的にループを抜けます。*1
JavaScriptのfalse
ちなみに、以下のコードは上記のようには動作しません。なぜでしょうか?
function loop3() { var i = 0, elm; var array = new Array(0, 1, 2); while ( (elm = array[ i++ ]) ) { document.write(elm); } }
JavaScriptでは非0をtrue、0をfalseとしています。このため、配列中に0が入っているとループが途中で終了してしまい、末尾まで走査することができないので、注意が必要です。
以下のエントリもあわせてどうぞ
*1:このwhileループは、jquery-1.4.2.jsの1312行目に存在します。