ה-Iterator helpers הפכו ל-Baseline. האפשרות החדשה זמינה עכשיו

Jeremy Wagner

תאריך פרסום: 1 במאי 2025

אם אתם כותבים JavaScript, אתם מבצעים איטרציות לעיתים קרובות. אתם כותבים לולאות כדי לעבוד עם מערכי נתונים, או משתמשים בשיטות של תכנות פונקציונלית כמו map, ‏ filter ושיטות דומות אחרות כדי לעבד כל מיני סוגים של נתונים.

עם זאת, יש בעיה אחת בשימוש בשיטות האלה: הן זמינות רק במערכים. אם רוצים להשתמש בהן באובייקט שניתן להמרה, צריך להמיר אותו למערך ואז להפעיל את השיטה הרצויה. הפעולה הזו עלולה להיות בזבזנית, או במקרים שבהם המשתנה המורחב מייצג מערך נתונים אינסופי באמצעות פונקציות גנרטורים, היא לא אפשרית. עם זאת, עכשיו, כשהעזרים של ה-iterator הפכו ל-Baseline Newly available, היכולת הזו זמינה סוף סוף בכל הדפדפנים.

איך פועלים היעזרו של ה-iterator?

כדי לחשוף את ה-Iterator helpers, מגדירים שיטות חדשות ב-prototype של האובייקט Iterator. השיטות האלה תואמות לשיטות תכנות פונקציונליות רבות שאתם רגילים להשתמש בהן, כמו map,‏ filter,‏ reduce ושיטות דומות אחרות.

לדוגמה, אפשר להשתמש בעזרה של מחזור (iterator) בשיטה filter כדי לסנן את הפריטים ברשימה לפי התוכן של המאפיין innerText שלהם עבור אוסף של צמתים ב-DOM, ולאחר מכן להשתמש בהם בלולאה for:

const posts = document.querySelectorAll("ul#specific-list > li")
  .values()
  .filter(item => item.textContent.includes("kiwi"));

// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
  console.log(post.textContent);
}

בקטע הקוד הקודם, שיטת העזר של ה-iterator עבור filter משמשת כדי לבצע איטרציה על כל הרכיבים מסוג <li> ברכיב <ul> ספציפי. קריטריון הסינון הוא שתוכן הטקסט של כל רכיב חייב להכיל מחרוזת משנה של "kiwi".

אפשר להשתמש בעזרים של Iterator גם עם פונקציות גנרטורים. בדוגמה הזו, פונקציית גנרטור שמחשבת גורמים חלוקים, אבל משתמשת בעזרה של ה-iterator כדי לסנן ערכים לערכים שניתנים לחלוקה ב-8, ולתעד את חמשת הערכים הראשונים שעברו סינון במסוף:

function* factorials (n) {
  let result = 1;

  for (let i = 1; i <= n; i++) {
    result *= i;

    yield result;
  }
}

const filteredFactorials = factorials(128).filter(x => x % 8 === 0);

console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);

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

בהתאם למצב, לעזרי ה-iterator יש פוטנציאל רב – והם זמינים לכל אחת מהשיטות האלה שניתן להריץ אותן על אובייקטים:

יש מגוון רחב של תרחישים לדוגמה לשימוש בעזרה של מחזור (iterator), והם יכולים לשפר משמעותית את הארגונומיה של המפתחים. עכשיו, כשהן נכללות ב-Baseline Newly available, עם הזמן תהיה לכם יותר ביטחון שתוכלו להשתמש בהן בלי חשש מבעיות תאימות. מידע נוסף זמין במקורות המידע הבאים: