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

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

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

• foreach שהיא דרך אלגנטית לכתוב לולאה של JavaScript
• סינון מערכים ב JavaScript-באמצעות הפונקציה filter
• טרנספורמציה של מערכים ב -JavaScript באמצעות הפונקציה map
• סידור מערכים של JavaScript באמצעות הפונקציה sort

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

במדריך זה נכיר את הפונקציה 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 כוכבים