jQuery haritası ve her biri

JQuery'de mapve eachişlevleri aynı şeyi yapıyor gibi görünüyor. İkisi arasında pratik farklılıklar var mı? Birini diğeri yerine ne zaman kullanmayı seçerdiniz?

eachYöntem, değişmez bir yineleyici, çıkartılacaktır mapyöntem, yineleyici olarak kullanılabilir, ancak gerçekten verilen dizi işlemek ve yeni bir dizi geri kastedilmektedir.

Dikkat edilmesi gereken bir diğer önemli nokta eachda mapişlev yeni diziyi döndürürken işlevin orijinal diziyi döndürmesidir. Harita işlevinin dönüş değerini aşırı kullanırsanız, çok fazla bellek harcayabilirsiniz.

Örneğin:

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]

Diziden bir öğeyi kaldırmak için harita işlevini de kullanabilirsiniz. Örneğin:

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]

Ayrıca this, mapişlevde eşlenmediğini de unutmayın . İlk parametreyi geri aramada sağlamanız gerekir (örn i. Yukarıda kullandık ). İronik olarak, her yöntemde kullanılan geri çağrı bağımsız değişkenleri, harita işlevindeki geri çağrı bağımsız değişkenlerinin tersidir, bu yüzden dikkatli olun.

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

1: Geri arama işlevlerinin argümanları tersine çevrilir.

.each()'s, $.each()' ve .map()'geri arama işlevi önce dizini, sonra öğeyi alır

function (index, element) 

$.map()adlı kişinin geri araması aynı bağımsız değişkenlere sahip, ancak tersine çevrilmiş

function (element, index)

2: .each(), $.each(), ve .map()ile özel bir şey yapmakthis

each()işlevi thisgeçerli öğeye işaret edecek şekilde çağırır . Çoğu durumda, geri arama işlevinde iki bağımsız değişkene bile ihtiyacınız yoktur.

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

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

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

İçin değişken küresel pencere nesneyi ifade eder.$.map()this

3: map()Geri aramanın dönüş değeri ile özel bir şey yapar

map()işlevi her öğede çağırır ve sonucu döndürdüğü yeni bir dizide saklar. Genellikle geri arama işlevinde yalnızca ilk bağımsız değişkeni kullanmanız gerekir.

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

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

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

eachElemanın bir kez verilen işlevinin çağrılması ve ayar dizisi üzerinde işlev yinelenir thisaktif eleman için. Bu:

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

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

uyaracaktır 5..sonra 4..sonra 3..sonra 2..sonra1..

Öte yandan harita bir dizi alır ve işlev tarafından değiştirilen her öğe ile yeni bir dizi döndürür. Bu:

function squared() {
    return this * this;
}

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

s ile sonuçlanır [25, 16, 9, 4, 1].

Ben bunu anladım :

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] 

" map " işlevi yeni bir dizi döndürürken , " each " işlevi orijinal diziyi döndürür

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, dizilerde çok iyi performans gösterdiğinden, diziler üzerinde çalışırken daha anlamlı olur.

Jquery.each en iyi seçici öğeler arasında yineleme yaparken kullanılır. Harita işlevinin bir seçici kullanmadığı anlaşılmaktadır.

$(selector).each(...)

$.map(arr....)

gördüğünüz gibi, harita seçicilerle kullanılmak üzere tasarlanmamıştır.