jQueryマップと各

jQueryでは、mapand each関数は同じことをしているようです。2つの間に実際的な違いはありますか？どちらを代わりに使用するのをいつ選択しますか？

each方法はとして不変イテレータ、であることを意味しますmap使用できますが、実際には指定された配列を操作して新しい配列を返すことを意図しています。

注意すべきもう1つの重要な点は、each関数が元の配列をmap返し、関数が新しい配列を返すことです。map関数の戻り値を使いすぎると、大量のメモリを浪費する可能性があります。

例えば：

var items = [1,2,3,4];

$.each(items, function() {
  alert('this is ' + this);
});

var newItems = $.map(items, function(i) {
  return i + 1;
});
// newItems is [2,3,4,5]

map関数を使用して、配列から項目を削除することもできます。例えば：

var items = [0,1,2,3,4,5,6,7,8,9];

var itemsLessThanEqualFive = $.map(items, function(i) {
  // removes all items > 5
  if (i > 5) 
    return null;
  return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]

またthis、map関数にマッピングされていないことにも注意してください。コールバックの最初のパラメーターを指定する必要があります（たとえば、i上記で使用しました）。皮肉なことに、各メソッドで使用されるコールバック引数は、マップ関数のコールバック引数の逆なので、注意してください。

map(arr, function(elem, index) {});
// versus 
each(arr, function(index, elem) {});

1：コールバック関数への引数が逆になります。

.each()'s、$.each()' s、および.map()'sのコールバック関数は最初にインデックスを取得し、次に要素を取得します

function (index, element) 

$.map()のコールバックは同じ引数を持っていますが、逆です

function (element, index)

2： 、.each()、$.each()と.map()して何か特別な操作を行いますthis

each()this現在の要素を指すような方法で関数を呼び出します。ほとんどの場合、コールバック関数に2つの引数は必要ありません。

function shout() { alert(this + '!') }

result = $.each(['lions', 'tigers', 'bears'], shout)

// result == ['lions', 'tigers', 'bears']

以下のために、変数のグローバルwindowオブジェクトを指します。$.map()this

3：map()コールバックの戻り値で何か特別なことをします

map()各要素で関数を呼び出し、結果を新しい配列に格納し、それを返します。通常は、コールバック関数で最初の引数を使用するだけです。

function shout(el) { return el + '!' }

result = $.map(['lions', 'tigers', 'bears'], shout)

// result == ['lions!', 'tigers!', 'bears!']

each要素ごとに一度供給された関数を呼び出し、設定アレイ上関数反復、this能動素子です。この：

function countdown() {
    alert(this + "..");
}

$([5, 4, 3, 2, 1]).each(countdown);

そのときは5..それ4..から3..それ2..から1..

一方、マップは配列を取り、各要素が関数によって変更された新しい配列を返します。この：

function squared() {
    return this * this;
}

var s = $([5, 4, 3, 2, 1]).map(squared);

sになり[25, 16, 9, 4, 1]ます。

私はこれでそれを理解しました：

function fun1() {
    return this + 1;
}
function fun2(el) {
    return el + 1;
}

var item = [5,4,3,2,1];

var newitem1 = $.each(item, fun1);
var newitem2 = $.map(item, fun2);

console.log(newitem1); // [5, 4, 3, 2, 1] 
console.log(newitem2); // [6, 5, 4, 3, 2] 

したがって、「各」関数は元の配列を返し、「マップ」関数は新しい配列を返します

var intArray = [1, 2, 3, 4, 5];
//lets use each function
$.each(intArray, function(index, element) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2. Breaks the loop as soon as it encountered number 3
});

//lets use map function
$.map(intArray, function(element, index) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2,4,5. skip the number 3.
});

jquery.mapは、配列に対して非常に優れたパフォーマンスを発揮するため、配列に対して作業を行っている場合により意味があります。

Jquery.eachは、セレクター項目を反復するときに最適に使用されます。これは、マップ関数がセレクターを使用しないことで証明されています。

$(selector).each(...)

$.map(arr....)

ご覧のとおり、マップはセレクターで使用するためのものではありません。