Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
226
Help us understand the problem. What is going on with this article?
@PianoScoreJP

JavaScript Array.forEachとjQuery.eachの違い

More than 5 years have passed since last update.

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が表示される

以上です。

226
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
226
Help us understand the problem. What is going on with this article?