みんな大好きJavaScriptの時間です。
今回は、繰り返し処理に最適な書き方を探ってみます。
繰り返し処理の仲間たち
JavaScriptで繰り返し処理というと
- for文
- forEach文
- jQuery.each文
があると思います。
今回はこの３者で競ってみようと思います。
計測準備
繰り返し処理ということで、Arrayに数字を入れておいて、
それをひたすら加算していく処理にしてみます。
こんな感じで処理対象の配列を準備します。
|
1 2 3 4 |
var data = Array(); for (var i=0 ; i < 10000000 ; i++) { data.push(i+1); } |
要素数は1000万個用意しました。
for文
第一走者のfor文選手です。
JavaScript本などでも必ず出てくる往年の熟練選手って感じです。
|
1 2 3 4 5 6 |
result = 0; st = new Date(); for (var i=0 ; i < data.length ; i++) { result += data[i]; } ed = new Date(); |
他の言語でも見慣れた感じの雰囲気ですね。
forEach文
どちらかというと新し目の構文です。
|
1 2 3 4 5 6 |
result = 0; st = new Date(); data.forEach(function(v, i, arr){ result += v; }); ed = new Date(); |
配列.forEachって感じで記述して内部処理はfunctionに記載という感じです。
なんとなく最近の若者的な感じがします（謎
jQuery.each文
最後は、jQuery界からの殴り込みです。
|
1 2 3 4 5 6 |
result = 0; st = new Date(); $.each(data, function(){ result += this; }); ed = new Date(); |
雰囲気は、forEachにすごく似てます。
結果
上記でコード内に時間計測のコードを入れてますが、その結果が以下となります。
- for文（0.08秒）
- forEach文（0.56秒）
- jQuery.each文（2.3秒）
for文の圧倒的勝利ということになりました。
さすが往年の選手って感じです。
※何回かやってみましたが、時間の上下はあれど順位には響かなかったです。
ということで、JavaScriptで繰り返し処理する時、
パフォーマンス的なところだと、「for文」を使用するのが一番良さそうです。
※超単純な処理の結果なので、あとは時と場合によって使い分けましょう（・∀・）ﾆﾔﾆﾔ
