Connect with us

קטגוריות

Javascript

Javascript: לולאות ושאר ירקות, על For…in ועל For…of

הלולאה הכי בסיסית ב-Javascript (וכמעט בכל שפת תכנות) היא לולאת ה-for, הלולאה מקבלת שלושה ביטויים: הצהרה על משתנה, ביטוי שיש להעריך לפני כל איטרציה וביטוי שיש להעריך בסוף כל איטרציה.

הדוגמא הבא מציגה לולאת for פשוטה המדפיסה את האיברים במערך:

const arr = ['א', 'ב', 'ג', 'ד'];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// הלולאה מדפיסה: א, ב, ג, ד

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

  1. אנחנו צריכים לעקוב אחרי משתנה ה-i ולעלות אותו באחד אחרי כל איטרציה (i++)
  2. להצהיר על תנאי עצירה (i < arr.length)
  3. לפנות אל הערך הנוכחי בשילוב של שני משתנים (arr[i])

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

const arr = [55, 32, 25, 78, 95];
const length = arr.length;


for (let i = 0; i < length; i++) {
    console.log(arr[i]);
}

בשפת Javascrpt יש לנו אלטרנטיבות נוספות לביצוע איטרציות, היום אנחנו נכיר שניים מהם, את לולאת ה-For…in ואת לולאת ה-For…of ומה ההבדלים בינהם.

לולאת For…in

לולאת ה-for…in מבצעת איטרציה על enumerable properties של אובייקט, ההגדרה של Enumerable property היא ערך חיובי בשדה Enumerable של-Property.

בואו נדגים איך אפשר לבדוק בצורה פשוטה אם Property מסויים הוא Enumerable:

let obj = {
    type: "Car",
    year: "2018",
    brand: "Audi"
};

Object.getOwnPropertyDescriptor(obj, 'type')

במידה ונדביק את הקוד למעלה ב- Console אנחנו נקבל את הפלט הבא:

בעזרת Object.getOwnPropertyDescriptor אנחנו יכולים לדעת אם property הוא enumerable או לא.

התחביר של לולאת ה-for…in הוא:

for (varush in enumerable) {
    // do stuff
}

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

const arr = [1, 2, 3, 4];

for (const key in arr) {
    console.log(obj[key])
}

// הלולאה מדפיסה: 1, 2, 3, 4

לולאת ה-for..in מבצעת איטרציה על כל ה-enumerable properties של האובייקט גם כאלה שנמצאים ב-prototype, אם נרצה למנוע מצב מסוג זה נוכל להשתמש ב- hasOwnProperty בצורה הבאה:

const obj = { g: 4, h: 8, j: 9, t: 0, d: 5 }

for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
        // do stuff
    }
}

חשוב להדגיש שלולאת ה-for…in מבצעת את האיטרציות בצורה שרירותית כך שאל תשתמשו בלולאה הזאת אם אתם צריכים שהדברים יתבצעו בסדר שהם הוגדרו.

לולאת For…of

לולאת ה-for…of הגיעה אלינו יחד עם ES6 והיעוד שלה הוא לבצע איטרציות על סוגים שונים של אוספים (collections) כמו Arrays, strings, Maps, Set, NodeList, TypedArray, אלו אובייקטים שמכילים Property בשם [Symbol.iterator].

ה-[Symbol.iterator] מאפשר לנו לבצע איטרציה בצורה ידנית על ידי קריאה ל:

 [Symbol.iterator]().next()

על מנת לקבל את הערך הבא באוסף, בואו נדגים:

const array = ['M', 'e', 'n', 'i'];

const iterator = array[Symbol.iterator]();

console.log(iterator.next().value)
console.log(iterator.next().value)
console.log(iterator.next().value)
console.log(iterator.next().value)

// הלולאה מדפיסה: M, e, n, i

לולאת ה-For…of היא למעשה מעטפת סביב ה-[Symbol.iterator] על מנת ליצור לולאות, For…of משתמשת בתחביר הבא:

for (varush of iterable) {
    // do stuff
}

לולאת ה-For…of לא יכולה לעבוד עם אובייקטים מאחר והם לא "iterable" וכתוצאה מכך אין להם את ה-Property שבו הלולאה משתמשת שהוא ה-[Symbol.iterator].

בואו נסתכל על מספר דוגמאות של מקרים שלולאת ה-For..of יכולה לעזור לנו:

// מערך

const array = ['M', 'e', 'n', 'i'];

for (const item of array) {
    console.log(item)
}

// הלולאה מדפיסה: M, e, n, i


// מחרוזת

const string = 'CodeHub';
for (const character of string) {
    console.log(character)
}

// הלולאה מדפיסה: C, o, d, e, H, u, b


// אוסף NodeList

const elements = document.querySelectorAll('.menu');

for (const element of elements) {
    element.addEventListener('click', handleMenuClick);
}
אם אתה חושב שיש מידע שהחסרתי או שיש דברים לא מדוייקים או לא מובנים במאמר, אשמח אם תאיר את עיניי באמצעות תגובה או דרך יצירת קשר בתפריט העליון.
תגובות

עוד ב Javascript

Meni Edri היי אני מני, מתכנת מנוסה ומאוד אוהב קוד ואת עולם התכנות, הקמתי את CodeHub על מנת שתיהיה לי פינה שבה אוכל לכתוב, ללמד וללמוד, מקווה שתימצאו את הבלוג הזה שימושי.
קריאה מהנה.

מאמרים פופולריים

נושאים פופולריים

חזרה למעלה