jQuery 関数のmap() と each() の紹介と類似点と相違点の分析

jQuery 関数のmap() と each() の紹介と類似点と相違点の分析_jquery

WBOY

リリース： 2016-05-16 16:31:50

オリジナル

1388 人が閲覧しました

メソッド構文:map()

マップ(コールバック)
ラップされたセット内の要素ごとにコールバック関数が呼び出され、戻り値が jQuery オブジェクトのインスタンスに収集されます。
パラメータ
callback (関数) ラップされたセット内の各要素に対して呼び出されるコールバック関数。
たとえば、次のコードは、ページ上のすべての div 要素の ID 値を JavaScript 配列に収集します。

コードをコピーしますコードは次のとおりです:

var iDs = $("div").map(function(){

戻り値 (this.id==未定義) null :this.id;

}).get();

以下のフォームに含まれるチェックボックスのセットを見てください:

コードをコピーしますコードは次のとおりです:

<フォームメソッド="ポスト"アクション="">
<フィールドセット>

カンマ区切りのチェックボックス ID を取得できます:

コードをコピーしますコードは次のとおりです:

$(':checkbox').map(function() {

this.id を返す;

}).get().join();

この呼び出しの結果は、文字列「two,four,six」です。

コールバック関数では、これは各反復の現在の DOM 要素を指します。

メソッド構文: each()

各(反復子)

一致するセット内のすべての要素をスキャンし、要素ごとに渡された反復関数
を呼び出します。イテレータ (関数) 一致するセット内の各要素に対して
と呼ばれるコールバック関数 each() メソッドは、JavaScript 配列オブジェクトや単一オブジェクトを走査するためにも使用できます。例:

コードをコピーしますコードは次のとおりです:

$([a,b,c,d]).each(function(){

アラート(これ);

})

このステートメントは、$() で渡された配列の各要素に対して反復関数を呼び出します。関数内の this は、個々の配列項目を指します。

コールバック関数が実行されるたびに、現在のループ回数がパラメータとして渡されます(カウントは0から始まります)。さらに重要なのは、コールバック関数が現在の DOM 要素のコンテキストでトリガーされることです。したがって、キーワード this は常にこの要素を指します。

ページ上にこのような単純な順序なしリストがあるとします。

コードをコピーしますコードは次のとおりです:

foo

バー

これらのリストを選択して反復できます:

コードをコピーしますコードは次のとおりです:

$( "li" ).each(function(index) {

console.log(index ": "" $(this).text() );

});

リスト内の各項目は次のメッセージに表示されます:

0: フー

1:バー
両者の違い

map() メソッドは主に操作配列とオブジェクトを走査するために使用され、 each() メソッドは主に jquery オブジェクトを走査するために使用されます。

each() は元の配列を返し、新しい配列を作成しません。

map() メソッドは新しい配列を返します。マップを不必要に使用すると、メモリが無駄に消費される可能性があります。