1. ホーム
  2. ジャバスクリプト

[解決済み】jQuery map vs. each.

2022-04-03 23:53:38

質問

jQueryでは mapeach 関数は、同じことをするようです。両者に実用的な違いはあるのでしょうか?また、どのような場合にどちらを使うのでしょうか?

どのように解決するのですか?

その each メソッドはイミュータブルなイテレータであることを意図していますが、一方 map メソッドはイテレータとして使用できますが、 実際は与えられた配列を操作して新しい配列を返すものです。

もう一つ重要なことは 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 上記)。 皮肉なことに、eachメソッドで使われるコールバック引数は、map関数のコールバック引数と逆になっているので、注意が必要です。

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