jQuery map เทียบกับแต่ละอัน

ใน jQuery ฟังก์ชั่นmapและeachดูเหมือนจะทำสิ่งเดียวกัน มีความแตกต่างในทางปฏิบัติระหว่างทั้งสองหรือไม่? คุณจะเลือกใช้อันใดอันหนึ่งแทนอันอื่น

eachวิธีจะหมายถึงการเป็น iterator ไม่เปลี่ยนรูปซึ่งเป็นmapวิธีการที่สามารถนำมาใช้เป็น iterator แต่มีความหมายจริงๆที่จะจัดการกับอาร์เรย์จัดและกลับอาร์เรย์ใหม่

สิ่งสำคัญอีกข้อที่ควรทราบก็คือeachฟังก์ชั่นจะคืนค่าอาร์เรย์เดิมในขณะที่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]

นอกจากนี้คุณยังสามารถใช้ฟังก์ชั่นแผนที่เพื่อลบรายการออกจากอาร์เรย์ ตัวอย่างเช่น:

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ชี้ไปยังองค์ประกอบปัจจุบัน ในกรณีส่วนใหญ่คุณไม่จำเป็นต้องมีอาร์กิวเมนต์สองตัวในฟังก์ชันการโทรกลับ

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

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

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

สำหรับ$.map()การthisตัวแปรหมายถึงวัตถุหน้าต่างโลก

3: map()ทำสิ่งที่พิเศษด้วยค่าส่งคืนของโทรกลับ

map()เรียกใช้ฟังก์ชันในแต่ละองค์ประกอบและเก็บผลลัพธ์ในอาร์เรย์ใหม่ซึ่งส่งคืน โดยปกติคุณจะต้องใช้อาร์กิวเมนต์แรกในฟังก์ชันการโทรกลับเท่านั้น

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

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

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

eachiterates ฟังก์ชั่นในช่วงอาร์เรย์เรียกฟังก์ชั่นที่จัดครั้งเดียวต่อองค์ประกอบและการตั้งค่า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);

[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] 

ดังนั้นฟังก์ชัน " แต่ละ " จะส่งกลับอาร์เรย์เดิมในขณะที่ฟังก์ชัน " map " จะส่งกลับอาร์เรย์ใหม่

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....)

อย่างที่คุณเห็นแผนที่ไม่ได้มีวัตถุประสงค์เพื่อใช้กับตัวเลือก