טרנספורמציה של מערכים ב-JavaScript באמצעות הפונקציה map

אחרי שבמדריכים הקודמים בסדרה למדנו להפעיל לולאת forEach על מערכים וגם כיצד לסנן פריטים רצויים מתוך מערך באמצעות filter, במדריך זה נכיר את הפונקציה map, שיוצרת מערך חדש ממערך קיים.

כדי להדגים במה מדובר נתחיל מהדרך הפשוטה ביותר לבצע טרנספורמציה של מערכים באמצעות לולאת for פשוטה. המערך המקורי מכיל פרטים של מכוניות, כולל השם, ארץ הייצור והמחיר. אנחנו רוצים ליצור מהמערך המקורי מערך חדש שיכיל רק את שמות המכוניות. וזאת באמצעות לולאת for פשוטה:

let cars = [
  {name:'BMW', country:'Germany', price:50000},
  {name:'Audi', country:'Germany', price:45000},
  {name:'Forche', country:'Italy', price:250000},
  {name:'Tesla', country:'USA', price:500000},
  {name:'Range Rover', country:'GB', price:250000},
  {name:'Sussita', country:'Israel', price:2500}
];

let carNames = [];
for(let x=0;x<cars.length;x++){
  carNames.push(cars[x].name);
}

בכל איטרציה של הלולאה, נוסיף למערך carNames פריט חדש שמכיל את שמה של המכונית.

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

תחביר map נראה כך:

myArray.map(myFunction);

המערך המקורי הוא myArray, ואנחנו קוראים לפונקציית callback שמבצעת פעולה על כל אחד מהפריטים במערך המקורי, והתוצאה היא מערך חדש שמבוסס על המערך הקיים.

נדגים את השימוש ב-map כדי ליצור מהמערך הקיים מערך חדש שכולל רק את שמות הארצות:

let carNames = cars.map(function(item, index){
  return item.country;
}); // ["Germany", "Germany", "Italy", "USA", "GB", "Israel"]

פונקצית ה-callback של map מקבלת שני פרמטרים:

• item - הוא הפריט של המערך באיטרציה הנוכחית
• index - הוא המספר הסודר (הספירה מתחילה מ-0, וכל איטרציה מוסיפה 1).

פונקציית ה-callback מחזירה את המידע שבו אנחנו מעוניינים, ומוסיפה אותו למערך שנוצר בתהליך.

ניתן להשתמש בתחביר fat arrow של ES6 ולקבל את אותה התוצאה בצורה קומפקטית בהרבה.

let carNames = cars.map((item) => item.country);

אפשר גם להחליף את ערכו של פריט אחד בלבד במערך. בדוגמה הבאה, נכפיל את הערך של השדה price ב-3.5 כדי להמיר את המחיר בדולרים לשקלים.

let carPricesInNIS = cars.map((item) => item.price * 3.5); // [175000, 157500, 875000, 1750000, 875000, 8750]

עוד דבר מאוד חשוב שאפשר לעשות עם map, ויתר הפונקציות שעליהם אנו לומדים בסדרה היא לשרשר את המתודות כדי לקבל את התוצאה הרצויה.

בדוגמה להלן, נפעיל את המתודה filter על המערך המקומי כדי לסנן את המכוניות שמיוצרות בגרמניה, ואז נמיר את מחירם לשקלים באמצעות map.

let germanCarsPricesInNIS = cars
  .filter(item => item.country === 'Germany')
  .map(item => item.price * 3.5); // [175000, 157500]

במדריך הבא נמשיך ללמוד על פונקציות שפועלות על מערכים עם הפונקציה sort שמסדרת את הפריטים לפי סדר.

מדריכי JavaScript למתקדמים

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים