תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

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

מחבר:
בתאריך:

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

הפונקציה map ב-javascript עוברת בלולאה על 
 מערך וממירה כל פריט במערך

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

 

 

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

דג למים הוא כמו ציפור ל...?