javascriptのほにゃららeach系の違いについてまとめた。

javascriptでいろんなeachとついたメソッドがあるのは知っていて、なんとなく使っているけど、結局どれがいいのかわからない！！

とこの記事を読んでいる人は思っているんじゃないでしょうか？

僕もそんな状態なのでこの記事にまとめて理解を深めます。

javascriptのeach系のメソッドってそもそも何があるの？

$のeach

sample.js

$.each(array, function(index, val) {
  //処理
  console.log(this) //thisはeach文で回している要素自体を指す
});

使える対象としては

• jQueryオブジェクト
• 配列
• 連想配列
• オブジェクト

があります。なんでも使える感じですね。

sample.js

// jQueryオブジェクト
$.each($('.target'), function(index, element){
 //処理
});

//配列
$.each(array, function(index, value){
  //処理
});

//オブジェクト
$.each(object, function(key, value){
    console.log(key,value);
});

$のeachではループを抜け出せる

後述するforEach文ではループを抜け出すことはできませんが、こちらでは簡単にループを抜け出すことができます。

return falseとすることでループを抜け出すことができます。

jQueryのeach

sample.js

$('ターゲット').each(function(index, value){
    //処理
});

これは

• jQueryオブジェクト

に対してのみ使うことができます。

forEach

sample.js

array.forEach(function(val, index, array){
   //処理
});

特徴的なのが、第3引数にarray.forEachで指定したarrayがきているところです。
これってなんでいるのかな・・って言う
jQueryでは、thisは要素を指していましたが、forEachではコールバック内のthisが参照するオブジェクトを指定できます。つまり

array.forEach(function(val, index, array)

このかっこの最後のところのarrayを参照できる。

これ第3引数いらない気がします。

sample.js

array.forEach(function(val, index){
   //処理
});

と書くのが普通に使うのにはいいでしょう。

注意点

forEach文ではループから抜け出すことができません。
なのでforEach文は絶対にループから抜け出したくないときに使うといいかもしれません。

someのeach

ループから抜け出せるタイプのforEachです。

sample.js

array.some(function(value,index){
   if(index==2) return false; // 処理を中断して次のループへ（continueと同じ）
});

ややこしいのが、
return falseで次のループを実行してreturn trueでループ自体を終了すると言うことです。

結局どれがいいの？

jQueryが使える環境では$.eachが最適かなと思っています。

forEachに関しては、jQueryが使えない環境や、ループから絶対に抜け出させたくないときに使うと言う感じでしょうか？

僕が調べた感じではこのような結論に至りましたが、間違いがあればそっと教えていただけると幸いです。