262
234

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScript Array.forEachとjQuery.eachの違い

Last updated at Posted at 2015-06-19

jQueryのeachばかり使っていたので、forEachでちょっと躓きました。

#コールバックの引数の順序が違う
###jQuery.each
コールバックの第一引数がインデックス、第二引数が値

var a =[1,2,3,4,5]
$.each(a,function(index,val){

});

###forEach
コールバックの第一引数が値、第二引数がインデックス、第三引数にforEachされている配列

var a=[1,2,3,4,5]
a.forEach(function(val,index,ar){
   console.log(a===ar); //trueになる
});

#thisが違う
jQueryでは、thisは要素を指していたが、forEachではコールバック内のthisが参照するオブジェクトを指定できる。

var a=[1,2,3,4,5]
//jQuery
$.each(a,function(){
console.log(this); //1,2,3,4,5が、Numberクラスに変換されて表示される
});

//forEach
a.forEach(function(val){
    console.log(this); //undefinedが表示されるか、windowオブジェクトが表示される
});

var b = [5,6,7,8,9]
a.forEach(function(val,index){
    console.log(this[index]); //5,6,7,8,9が表示される
},b);

#forEachはループから抜けられない
jQueryなら、コールバック関数内でreturn falseすれば、ループを中止できましたが、
forEachにはループを抜ける手段がありません。
ループを抜けたければ、someメソッドを使用します。

##someメソッド
コールバック内で、falseを返せば処理を中断して次のループへ(continueと同じ)
trueを返せばループ自体を中断

つまりjQuery.eachと逆です。

var a=[1,2,3,4,5]
a.some(function(val,index){
   if(index==2) return false;
   console.log(index);
});
//結果 0,1,3,4が表示される

var a=[1,2,3,4,5]
a.some(function(val,index){
   if(index==2) return true;
   console.log(index);
});
//結果 0,1が表示される

以上です。

262
234
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
262
234

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?