אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » סימון לולאות בג׳אווהסקריפט

סימון לולאות בג׳אווהסקריפט

רן בר-זיק אפריל 14, 2019 7:07 am 9 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

בואו ונסתכל על הלולאה הזו למשל:

let str = '';

for (let i = 0; i < 10; i++) {
  if (i === 1) {
    continue;
  }
  str = str + i;
}

console.log(str); // 023456789

לא צריך להיות מתכנת ג׳אווהסקריפט גאון במיוחד כדי לנתח את הקוד. כל מה שיש לנו פה זו לולאה פשוטה שבפשוטות שמבצעת איטרציה על כל המספרים מ-0 עד 9 ומוסיפה אותם ל-str. א-מ-מ-ה-? אם המספר שווה אחד, מתבצע continue לפני שהלולאה מוסיפה את המספר ובגלל זה התוצאה היא 023456789 בלי 1.

אבל אני יכול לבצע label ללולאה הזו באופן הבא:

let str = '';

myLoop:
for (let i = 0; i < 10; i++) {
  if (i === 1) {
    continue myLoop;
  }
  str = str + i;
}

console.log(str); //023456789

שימו לב לשני הדברים שהוספתי פה – הראשון הוא הלייבל, ששמו הוא myLoop, שנוסף שורה לפני הלולאה. השני הוא myLoop שנכנס לפני ה-continue. מעכשיו ה-continue בעצם הוא ל-myLoop ואליו בלבד. אם אני אכתוב שגיאת כתיב, אני אקבל שגיאת סינטקס מסוג: SyntaxError: Undefined label

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


  for (let outerLoop = 0; outerLoop < 4; outerLoop++) {
    for (let innerLoop = 0; innerLoop < 4; innerLoop++) {
      console.log(`outerLoop: ${outerLoop}. innerLoop: ${innerLoop}`);
    }
  }

יש כאן שתי לולאות. הראשונה, לולאת האבא, רצה 4 פעמים. מ-0 עד 4. בכל ריצה שלה היא מריצה לולאה פנימית שגם היא רצה 4 פעמים מ-0 עד 4. הפלט של הלולאה הזו הוא:

outerLoop: 0. innerLoop: 0
outerLoop: 0. innerLoop: 1
outerLoop: 0. innerLoop: 2
outerLoop: 0. innerLoop: 3
outerLoop: 1. innerLoop: 0
outerLoop: 1. innerLoop: 1
outerLoop: 1. innerLoop: 2
outerLoop: 1. innerLoop: 3
outerLoop: 2. innerLoop: 0
outerLoop: 2. innerLoop: 1
outerLoop: 2. innerLoop: 2
outerLoop: 2. innerLoop: 3
outerLoop: 3. innerLoop: 0
outerLoop: 3. innerLoop: 1
outerLoop: 3. innerLoop: 2
outerLoop: 3. innerLoop: 3

אבל אם אני משתמש ב-label, אני יכול להשפיע על הלולאה החיצונית מהלולאה הפנימית. אני רוצה למשל שבכל פעם שהלולאה הפנימית מגיעה ל-2, אנו נקדם את הלולאה החיצונית באחד. כלומר continue. איך? ככה:

firstLoop:
   for (let outerLoop = 0; outerLoop < 4; outerLoop++) {
     secondLoop:
     for (let innerLoop = 0; innerLoop < 4; innerLoop++) {
       if (innerLoop === 2) {
         // Use continue to avoid runs 4 and 5
         continue firstLoop;
       }
       console.log(`outerLoop: ${outerLoop}. innerLoop: ${innerLoop}`);
     }
   }

אפשר לראות איך שבכל פעם שיש תנאי בלולאה הפנימית, אני משפיע על הלולאה החיצונית באמצעות continue firstLoop. הפלט יהיה כך:

outerLoop: 0. innerLoop: 0
outerLoop: 0. innerLoop: 1
outerLoop: 1. innerLoop: 0
outerLoop: 1. innerLoop: 1
outerLoop: 2. innerLoop: 0
outerLoop: 2. innerLoop: 1
outerLoop: 3. innerLoop: 0
outerLoop: 3. innerLoop: 1

מה שחשוב פה הוא לא הפעולה של הלולאות אלא להבין את עניין התיוג של הלולאה. כל לולאה יכולה לקבל שם ואנו יכולים לעשות לה break או continue מכל חלק בלולאות הפנימיות שהיא מריצה. שזה פיצ׳ר מאוד מעניין.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
JavaScript

9 תגובות

  1. חזי הגב אפריל 14, 2019 בשעה 10:49 am

    אין ספק ש javascript ממשיכה להיות השפה שאו שאתה אוהב אותה או שאתה שונא אותה, אין באמצע.

    אחרי למעלה מ 20 שנות הכרות איתה , אני עדיין בצד של השונאים.

  2. משתמש אנונימי (לא מזוהה) הגב אפריל 14, 2019 בשעה 11:01 am

    סחטיין על ההיכרות, אבל הפיצ'ר הזה נראה פשוט כמו Goto (אפילו מסמנים את הלולאה כמו לייבל של שורה).
    כמו goto נראה שהוא שובר את ה Flow של הקוד ככה שהוא מונע מלהסתכל בלולאה הפנימית כאיבר נפרד.

  3. אסף הגב אפריל 14, 2019 בשעה 1:26 pm

    אם כבר השימוש שיותר טוב לעשות עם label זה יציאה מהלולאה הראשונה
    firstLoop:
    for (let outerLoop = 0; outerLoop < 4; outerLoop++) {
    secondLoop:
    for (let innerLoop = 0; innerLoop < 4; innerLoop++) {
    if (innerLoop === 2) {
    // Use continue to avoid runs 4 and 5
    break firstLoop;
    }
    console.log(`outerLoop: ${outerLoop}. innerLoop: ${innerLoop}`);
    }
    }

  4. Yirmiyahu הגב אפריל 14, 2019 בשעה 4:38 pm

    צריך להוסיף שהשימוש ב-GOTO לא כ"כ מקובל היום במקרה שאפשר להסתדר בלעדיו.

    ע"ע מאמרו הידוע של דייקסטרה: https://homepages.cwi.nl/~storm/teaching/reader/Dijkstra68.pdf

  5. זיו הגב אפריל 15, 2019 בשעה 9:34 am

    תודה רבה, למדתי היום משהו חדש על השפה שאני עובד בה!

  6. יוסי הגב אפריל 22, 2019 בשעה 12:32 pm

    מגניב. קיים גם ב java, אגב

  7. זיו אחר הגב מאי 1, 2019 בשעה 6:03 pm

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

  8. ינאי אדרי הגב מאי 16, 2019 בשעה 8:21 am

    דרך אגב svelet js (לפחות גרסא 3- ממה שיצא לי להכיר)
    אימץ את ה labels כשיטה לעידכון נתונים….

  9. אחת הגב מאי 26, 2020 בשעה 6:21 pm

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד