peta jQuery vs. masing-masing

Di jQuery, mapdan eachfungsinya tampaknya melakukan hal yang sama. Apakah ada perbedaan praktis antara keduanya? Kapan Anda memilih untuk menggunakan salah satu daripada yang lain?

The eachMetode ini dimaksudkan untuk menjadi sebuah iterator berubah, di mana sebagai mapmetode dapat digunakan sebagai iterator, tetapi benar-benar dimaksudkan untuk memanipulasi array disediakan dan mengembalikan array baru.

Hal penting lain yang perlu diperhatikan adalah bahwa eachfungsi mengembalikan array asli sementara mapfungsi mengembalikan array baru. Jika Anda terlalu sering menggunakan nilai kembali fungsi peta, Anda berpotensi membuang banyak memori.

Sebagai contoh:

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]

Anda juga dapat menggunakan fungsi peta untuk menghapus item dari array. Sebagai contoh:

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]

Anda juga akan mencatat bahwa fungsi thisini tidak dipetakan map. Anda harus menyediakan parameter pertama dalam panggilan balik (misalnya, kami menggunakan di iatas). Ironisnya, argumen panggilan balik yang digunakan dalam setiap metode adalah kebalikan dari argumen panggilan balik dalam fungsi peta jadi hati-hati.

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

1: Argumen ke fungsi panggilan balik dibalik.

.each()Fungsi callback 's, $.each()' s, dan .map()'s mengambil indeks terlebih dahulu, dan kemudian elemen

function (index, element) 

$.map()Callback memiliki argumen yang sama, tetapi dibalik

function (element, index)

2: .each(),, $.each()dan .map()melakukan sesuatu yang istimewa dengannyathis

each()memanggil fungsi sedemikian rupa yang thismenunjuk ke elemen saat ini. Dalam kebanyakan kasus, Anda bahkan tidak memerlukan dua argumen dalam fungsi panggilan balik.

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

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

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

Untuk $.map()itu thisvariabel mengacu pada objek window global.

3: map()melakukan sesuatu yang istimewa dengan nilai pengembalian callback

map()memanggil fungsi pada setiap elemen, dan menyimpan hasilnya dalam array baru, yang dikembalikan. Anda biasanya hanya perlu menggunakan argumen pertama dalam fungsi panggilan balik.

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

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

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

The eachfungsi iterates atas sebuah array, memanggil fungsi yang disediakan sekali per elemen, dan pengaturan thisuntuk elemen aktif. Ini:

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

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

akan mengingatkan 5..maka 4..kemudian 3..kemudian 2..kemudian1..

Peta di sisi lain mengambil array, dan mengembalikan array baru dengan setiap elemen diubah oleh fungsi. Ini:

function squared() {
    return this * this;
}

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

akan menghasilkan s [25, 16, 9, 4, 1].

saya memahaminya dengan ini :

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] 

jadi, " setiap " fungsi mengembalikan array asli sementara fungsi " peta " mengembalikan array baru

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 lebih masuk akal ketika Anda melakukan pekerjaan pada array karena berkinerja sangat baik dengan array.

Jquery.each paling baik digunakan saat iterasi melalui item pemilih. Yang dibuktikan bahwa fungsi peta tidak menggunakan pemilih.

$(selector).each(...)

$.map(arr....)

seperti yang Anda lihat, peta tidak dimaksudkan untuk digunakan dengan penyeleksi.