eachはすぐにいじめられるんだよ

javascript高速化！！とかJQuery高速化！！とか調べるとすぐに出てくるのが
【eachを使わずにforを使え】
【eachとforとwhileとかの速度を比較してみました！】
とか出てきますね。んで、eachを使わずにforを使えは分かるんですけど
何が何でもeachを使わないようにするためにはどうしたらええんだ？
ってのが無かった(探しもしていない)ので、色々考えてみようかと思います。

ちなみにforでも、デクリメントの方が速いよって話もありますが、今回は意識せずインクリメントするforでやってきますね。

対象になるもの

まずは、どんなものが対象になるのかを考えてみました

配列
データオブジェクト
DOM

まぁ、この３つでしょうと。
では順番にeachらforに切り替えてみましょう。

配列

難易度が一番低いってか、配列は流石にeachしてる人いねぇだろと思ったりしますが・・・

//------------------------
// 配列
//------------------------
var hoge = ['あ','い','う','え','お'];

alert(hoge[0]);// あ
alert(hoge[1]);// い
alert(hoge[2]);// う
alert(hoge[3]);// え
alert(hoge[4]);// お

//------------------------
// eachで上記を書くと
//------------------------
$.each(hoge,function(key,value){
  alert(key+'番目は'+value);
});

//------------------------
// forで上記を書くと
//------------------------
var leng = hoge.length;
for(var i=0;i<leng;i++){
  alert(i+'番目は'+hoge[i]);
}

データオブジェクト

うん。

//------------------------
// データオブジェクト
//------------------------
var hoge = {'key1':'小林製薬の糸ようじ','key2':'腹をわって話そう','key3':'お前帰って寝ろ','key4':'藤村がバカだ'};

alert(hoge['key1']);// あ
alert(hoge['key2']);// い
alert(hoge['key3']);// う
alert(hoge['key4']);// え

//------------------------
// eachで上記を書くと
//------------------------
$.each(hoge,function(key,value){
  alert(key+'の中身は'+value);
});

//------------------------
// forで上記を書くと
//------------------------

ただのforでこれをループさせるのは無理です！！！。
順番の概念とか無いのでforの連番で抜き出せません。
forぽい・・・for inとか？と思いましたが
for-inは順不同で反復処理をするのです
順番なんかどうでもいいよ！って場面ではいいのですが、それを忘れてどんどこ使っていくと
どこかで事故ります。僕は基本使わずにやっています。
調べ方がアレだったのか、JQueryのeachとfor-inの比較無かったのでやってみます。

//------------------------
// データオブジェクト
//------------------------
loopLen = 99999;
var hoge = {'key1':'1','key2':'2','key3':'3','key4':'4'...,'key99998':'99998','key99999':'99999'};

for (var i = 1; i <= 100; i++) {
  console.log(i+'回目forin:'+forinTime());
  console.log(i+'回目each:'+eachTime());
  console.log('--------------');
};

function forinTime(){
  var startTime = new Date();
  var endTime = "";
  
  for (var i in hoge) 
  {
    if (hoge[i] == loopLen ) 
    {
        endTime = new Date();
    } 
  }
  return  (endTime - startTime) + "ms";
}

function eachTime()
{
  var startTime = new Date();
  var endTime = "";

  $.each(hoge,function(key,value){
    if (value == loopLen ) 
    {
        endTime = new Date();
    } 
  })
  return (endTime - startTime) + "ms";
}

オブジェクト数が99999 それをfor-inと$eachでループした時にかかった時間をそれぞれ取得
それを100回繰り返しています。
結果を以下全部まとめています。だいたいこんなもんかな？と思います。

foin平均値	each平均値	foin最大値	each最大値	foin最小値	each最小値

データ詳細表示

回数	forinでかかったミリ秒	eachでかかったミリ秒
1	30ms	27ms
2	19ms	25ms
3	20ms	25ms
4	19ms	26ms
5	20ms	26ms
6	20ms	26ms
7	20ms	26ms
8	20ms	26ms
9	19ms	25ms
10	20ms	26ms
11	20ms	26ms
12	20ms	26ms
13	21ms	26ms
14	21ms	26ms
15	20ms	26ms
16	20ms	26ms
17	20ms	25ms
18	20ms	26ms
19	20ms	25ms
20	19ms	26ms
21	20ms	27ms
22	20ms	25ms
23	20ms	25ms
24	19ms	26ms
25	22ms	25ms
26	20ms	25ms
27	19ms	25ms
28	20ms	24ms
29	19ms	26ms
30	20ms	26ms
31	20ms	25ms
32	18ms	25ms
33	20ms	25ms
34	20ms	25ms
35	21ms	25ms
36	20ms	26ms
37	19ms	25ms
38	19ms	25ms
39	20ms	25ms
40	20ms	26ms
41	21ms	26ms
42	19ms	27ms
43	20ms	26ms
44	19ms	26ms
45	20ms	26ms
46	19ms	26ms
47	20ms	27ms
48	21ms	25ms
49	20ms	25ms
50	19ms	26ms
51	20ms	26ms
52	20ms	25ms
53	20ms	26ms
54	20ms	25ms
55	19ms	25ms
56	20ms	26ms
57	20ms	26ms
58	20ms	26ms
59	19ms	25ms
60	20ms	26ms
61	19ms	26ms
62	20ms	26ms
63	20ms	25ms
64	20ms	26ms
65	23ms	26ms
66	20ms	25ms
67	20ms	26ms
68	20ms	26ms
69	19ms	25ms
70	20ms	26ms
71	19ms	26ms
72	20ms	25ms
73	20ms	26ms
74	20ms	26ms
75	19ms	25ms
76	19ms	26ms
77	19ms	27ms
78	19ms	27ms
79	19ms	27ms
80	19ms	25ms
81	20ms	25ms
82	20ms	26ms
83	19ms	25ms
84	19ms	26ms
85	20ms	26ms
86	20ms	26ms
87	20ms	26ms
88	20ms	26ms
89	20ms	26ms
90	20ms	26ms
91	19ms	25ms
92	19ms	27ms
93	19ms	24ms
94	18ms	26ms
95	19ms	25ms
96	19ms	25ms
97	19ms	24ms
98	19ms	24ms
99	18ms	24ms
100	19ms	26ms

正直誤差レベルじゃねぇのこれ
もうちょっと激しく差でるのかな？と思いましたが、やってることは根本そこまで変わらないのかなぁと
そんな感じで、forInとeachならもうeach使っていいと思いました。

DOMオブジェクト

たぶんキーポイント。
ひとまずやってみましょう。

//------------------------
// DOMオブジェクト
//------------------------

for (var i = 0; i < 10; i++) {
  console.log('eachTime:'+eachTime());
  console.log('forTime:'+forTime());
  console.log('--------------------------------------');
};

//2156
function eachTime()
{
  var startTime = new Date();
  var endTime = "";
  var text = "";
  $('.testList').children('li').each(function(){
    text = $(this).text();
  });
  endTime = new Date();
  return  (endTime - startTime) + "ms";
}

function forTime()
{
  var startTime = new Date();
  var endTime = "";
  var text = "";
  var testListLi = $('.testList').children('li');
  var testListLiLeng = testListLi.length;
  for (var i = 0; i < testListLiLeng; i++) {
    text = testListLi.eq(i).text();
  };
  endTime = new Date();
  return (endTime - startTime) + "ms";
}

あらかじめ適当に要素を用意してデータ取得だけする処理にしています。サンプルは消していますがliの数は2156個で実験。
で上記のようにループしてみました。10回ってすくないよね。と思われそうですが、予想外の結果で若干びびりました。

回数	eachでかかったミリ秒	forでかかったミリ秒
1	13ms	7ms
2	3ms	2ms
3	2ms	2ms
4	3ms	2ms
5	2ms	2ms
6	2ms	2ms
7	2ms	2ms
8	2ms	1ms
9	3ms	2ms
10	2ms	2ms

最初のループでは何回やってもこれくらいの差はつきました。
およそ倍の差がでています。
ただそれ以外の秒数が本気で謎すぎる・・・ほぼ拮抗な上に、そもそもの処理がめちゃめちゃ速いです。
おかしいねと思って、ループ内でconsole.logとかしてみましたが、きちんとループも回っているようです。
原理はまだ調査段階なのですが、このデータを正としてみると、無理にeachなんか使わなくてもいいんじゃないか・・・
って思ってしまうレベルです。
もちろん、今回ループ中の処理が単純すぎるのでこうなりましたが、もっと込み入った事をする場合はforで考えてもいいのではないでしょうか。

奥深いっすね

まとめ

そんなわけで、eachよりforを使え！ってのはDOMオブジェクトに対してのループ処理の時に有効なのかなってのがわかりました。
若干挙動は怪しいですが・・・まぁ、顕著に出ている所もあるので、【ループしながらややこしい処理する】みたいな時は
一考するのもあり、それ以外は細かい事考えずにやりやすい方でやればいいんじゃないか？って思いました。おわり