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

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

הפונקציה foreach ב-JavaScript

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

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

בסדרת המדריכים הזו, נכיר את הפונקציות:

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

במדריך זה נכיר את הפונקציה forEach.

forEach

foreach הוא דרך אלגנטית לכתוב לולאה של JavaScript.

אפשר לעבור בתוך לולאת for על מערך כדי לשלוף את הערכים ואת האינדקס שלהם:

let years = [2018, 1996, 2016, 2012, 1995, 1980, 2011, 1997];

for(let x=0;x<years.length;x++){
    console.log(x, years[x]);
}

ובתקן ES6 של JavaScript ניתן לעשות את אותה העבודה באמצעות לולאת forEach:

years.forEach(function(year, index, years){
    console.log(index, year);
});
  • הלולאה מקבלת פונקציה אנונימית בתור פרמטר.
  • הפונקציה האנונימית מקבלת 3 פרמטרים: פריט, המספר הסודר (אינדקס), והמערך.

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

את הפונקציה האנונימית ניתן לכתוב בתחביר fat arrow של ES6, ולקבל את הקוד הבא:

years.forEach((year, index, years) => console.log(index, year));

שהוא קצר קומפקטי מאוד יחסית ללולאה פשוטה:

for(let x=0;x<years.length;x++){
    console.log(x, years[x]);
}

 

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

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}
];

אנחנו יכולים להדפיס את שם המכונית ומחירה באמצעות לולאת for רגילה:

for(let x=0;x<cars.length;x++){
    console.log(cars[x].name + ' costs ' + cars[x].price);
}

את אותה המשימה אנחנו יכולים לעשות באמצעות לולאת forEach:

cars.forEach(function(car, index){
     console.log(car.name + ' costs ' + car.price);
});

אפשר להשתמש בתחביר המקוצר של פונקציות fat arrow להשגת אותה המטרה:

cars.forEach((car, index) => console.log(car.name + ' costs ' + car.price));

ואפשר להשתמש בתחביר של template string של ES6 כדי לחבר מחרוזות לתוך תבנית באופן אלגנטי:

cars.forEach((car, index) => console.log(`${car.name} costs ${car.price}`));

הטמפלייט עטוף בטיקים (``) ומשתנים עטופים בין סוגריים מסולסלים ומתחילים בסימן הדולר {}$.

 

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

אחד החידושים הנחמדים של-JavaScript הוא for...in לולאה שעוברת על כל הפריטים של אובייקט.

לדוגמה:

let car = {name:'BMW', country:'Germany', price:50000};
let string = ' ';
for (let p in car) {
  string += `${p} : ${car[p]}`;
}

ואם נשלב את זה עם לולאת forEach נוכל להגיע לכל הפריטים שמרכיבים מערך של אובייקטים:

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 string = ' ';
cars.forEach((car, index) => {
  for (let p in car) {
      string += `${p} : ${car[p]}`;
  }
})

במדריך הבא, נלמד על הפונקציה filter.

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

 

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

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

 

 

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

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

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

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

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

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

 

 

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

מתי הוקמה המדינה?

 

תמונת המגיב

אנונימי בתאריך: 31.10.2022

תודה רבה