javascript - jQuery מָפָּה לעומת כל אחד

ב-jQuery, הפונקציות map ו-each נראות כאילו הן עושות את אותו הדבר. האם יש הבדלים מעשיים ביניהן? מתי תבחר להשתמש באחת במקום בשנייה?

תשובה #1

השיטה 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) {});

תשובה #2

1: הפרמטרים של פונקציות הקריאה חזרה הפוכים.

הפונקציה החוזרת של .each(), של $.each(), ושל .map() מקבלת קודם את האינדקס, ואז את האלמנט

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 מתייחס לאובייקט הגלובלי window.

3: map() עושה משהו מיוחד עם ערך ההחזרה של הפונקציה המתקראת

map() קוראת לפונקציה על כל איבר, ושומרת את התוצאה במערך חדש, אותו היא מחזירה. בדרך כלל אתה צריך להשתמש רק בטיעון הראשון בפונקציית הקולבק.

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

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

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

תשובה #3

הפונקציה each עובר על מערך, קוראת לפונקציה המסופקת פעם אחת עבור כל איבר, ומגדירה את 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);

יהיה גורם לכך ש-s יהיה [25, 16, 9, 4, 1].

תשובה #4

הבנתי את זה כך:

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] 

אז, פונקציית "each" מחזירה את המערך המקורי בעוד שפונקציית "map" מחזירה מערך חדש