Bản đồ jQuery so với mỗi

Trong jQuery, các hàm mapvà eachhàm dường như làm điều tương tự. Có sự khác biệt thực tế giữa hai? Khi nào bạn sẽ chọn sử dụng cái này thay vì cái kia?

Các eachphương pháp được hiểu là một iterator bất biến, trong khi đó mapphương pháp có thể được sử dụng như một iterator, nhưng thực sự có nghĩa là để thao tác các mảng cung cấp và trả về một mảng mới.

Một điều quan trọng khác cần lưu ý là eachhàm trả về mảng ban đầu trong khi maphàm trả về một mảng mới. Nếu bạn quá lạm dụng giá trị trả về của chức năng bản đồ, bạn có khả năng lãng phí rất nhiều bộ nhớ.

Ví dụ:

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]

Bạn cũng có thể sử dụng chức năng bản đồ để xóa một mục khỏi một mảng. Ví dụ:

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]

Bạn cũng sẽ lưu ý rằng thiskhông được ánh xạ trong maphàm. Bạn sẽ phải cung cấp tham số đầu tiên trong cuộc gọi lại (ví dụ: chúng tôi đã sử dụng iở trên). Trớ trêu thay, các đối số gọi lại được sử dụng trong mỗi phương thức là mặt trái của các đối số gọi lại trong hàm ánh xạ, vì vậy hãy cẩn thận.

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

1: Các đối số cho các hàm gọi lại được đảo ngược.

.each()Hàm gọi lại của 's, $.each()' và .map()'lấy chỉ mục trước, sau đó là phần tử

function (index, element) 

$.map()Cuộc gọi lại có cùng lý lẽ, nhưng ngược lại

function (element, index)

2 : .each(), $.each()và .map()làm điều gì đó đặc biệt vớithis

each()gọi hàm theo cách thischỉ đến phần tử hiện tại. Trong hầu hết các trường hợp, bạn thậm chí không cần hai đối số trong hàm gọi lại.

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

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

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

Đối với $.map()các thisbiến đề cập đến các đối tượng cửa sổ toàn cầu.

3: map()làm điều gì đó đặc biệt với giá trị trả về của cuộc gọi lại

map()gọi hàm trên mỗi phần tử và lưu kết quả vào một mảng mới mà nó trả về. Bạn thường chỉ cần sử dụng đối số đầu tiên trong hàm gọi lại.

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

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

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

Các eachlặp chức năng trên một mảng, gọi hàm đã cung cấp một lần cho mỗi phần tử, và thiết lập thisđể các yếu tố tích cực. Điều này:

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

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

sẽ cảnh báo 5..sau 4..đó 3..sau 2..đó sau đó1..

Mặt khác, Map lấy một mảng và trả về một mảng mới với mỗi phần tử được thay đổi bởi hàm. Điều này:

function squared() {
    return this * this;
}

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

sẽ dẫn đến sự tồn tại [25, 16, 9, 4, 1].

tôi hiểu nó bằng cách này :

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] 

vì vậy, hàm " mỗi " trả về mảng ban đầu trong khi hàm " map " trả về một mảng mới

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 có ý nghĩa hơn khi bạn đang làm việc trên các mảng vì nó hoạt động rất tốt với các mảng.

Jquery.each được sử dụng tốt nhất khi lặp qua các mục chọn. Điều này được chứng minh ở chỗ chức năng bản đồ không sử dụng bộ chọn.

$(selector).each(...)

$.map(arr....)

như bạn có thể thấy, bản đồ không có ý định sử dụng với các bộ chọn.