【javascript,jQuery】イテレーションまとめ

※あまり整理できてないのでこんなのあるよってあれば教えてほしい。

#jQueryのループ

$(”セレクタ”).each(callback)

各オブジェクトに対して処理を行う。
jQueryオブジェクトに対してはこれがおすすめ。

コールバック関数が false を戻すと、ループ処理を停止する。
コールバック関数が true を戻すと、以降の処理をスキップし、次のループを実行する。

###パラメータ

• callback(index,dom)

各オブジェクトに対する処理を記述する。
index：0始まりのインデックス
dom：対象のdom。コンテキスト内のthisと同じ。jQueryオブジェクトではないので、$()することでjQueryオブジェクトとして扱える。

###例

$("li").each(function(index, dom){
  $(dom).toggleClass("example").text("index-" + index);

  //第二引数とthisは同じ。つまり、以下は上記と同じ。
  $(this).toggleClass("example").text("index-" + index);
});

参考：each(callback)

$.each(collection, callback)

オブジェクトもしくは配列の、汎用のイテレータ。
もちろんjQueryオブジェクトに対しても処理できる。

コールバック関数が false を戻すと、イテレーション処理を停止する。
コールバック関数が true を戻すと、以降の処理をスキップし、次のイテレーションを実行する。

###パラメータ

• collection

イテレーション対象の配列、もしくはオブジェクトを設定する。

• callback(index,value)

各オブジェクトに対する処理を記述する。
対象が配列もしくはオブジェクトの場合は以下になる。
index：キー
value：値

対象がjQueryオブジェクトの場合は以下になる。
index：0始まりのインデックス
dom：対象のDOM。コンテキスト内のthisと同じ。$()することでjQueryオブジェクトとして扱える。

###例

$.each(["item1","item2","item3","item4","item5"], function(index, value){
    $("#test1_result").append(index + ":" + value).append("<br />");
})

参考：jQuery.each(collection, callback)

#javascriptのループ

##for...in

myObj = {hoge:'hoge',huga:'huga'};

for(var key in myObj) {
  //key
  console.log(key);
  //value
  console.log(myObj[key]);
}

###注意点

• プロトタイプ継承している場合
  プロトタイプチェーンまで取れてしまうので、設定している場合はチェック処理を入れる。

//プロトタイプチェーンかのチェック
if (myObj.hasOwnProperty(key)) {
  
}

• 列挙の順序は保障されない。
  多くの場合は、順序通りになるけど、保障されるものではないのでこの順序に依存した処理はダメらしい。

• 列挙されないプロパティがある
  配列オブジェクトのlengthなど。