Articles
מבוא ל-JavaScript
עיבוד חזרתי ב-JavaScript

עיבוד חזרתי ב-JavaScript

במאמר זה נסביר על עיבוד חזרתי ב-JavaScript.

YouTube Video

פקודת for ב-JavaScript

תחביר בסיסי 

1for (initialization; condition; update) {
2  // Code to repeat
3}

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

  • אתחול (initialization): החלק שמבוצע פעם אחת בלבד לפני תחילת הלולאה. אתחול משתנים כמו מונה הלולאה.
  • תנאי (condition): התנאי שמחליט אם להמשיך את הלולאה. אם true, הלולאה ממשיכה; אם false, היא מסתיימת.
  • עדכון (update): זה מבוצע בסוף כל לולאה כדי לעדכן את מונה הלולאה.

דוגמה 

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

במקרה הזה, i מתחיל ב-0, והלולאה רצה כל עוד i < 5 הוא true. i++ מעלה את הערך של i ב-1 בכל איטרציה של הלולאה. כתוצאה מכך, מוצגים מספרים מ-0 עד 4.

תחום הגדרת מונה הלולאה

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

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError
  • כפי שמוצג בדוגמה זו, התייחסות למשתנה מחוץ לפקודת for תגרום לשגיאה.

לולאה אינסופית

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

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

מערכים ופקודת for

זה נפוץ להשתמש בפקודת for יחד עם מערכים. זה נוח לעיבוד כל אלמנט במערך.

דוגמה 

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

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

מבני לולאות אחרים

פקודת for...of

פקודת for...of משמשת לאובייקטים הניתנים לאיטרציה כמו מערכים ומחרוזות.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

זה מאפשר לעבד כל אלמנט בלי להשתמש באינדקסים.

פקודת for...in

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

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

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

סיכום

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

פקודת while ב-JavaScript

תחביר בסיסי 

1while (condition) {
2    // Code that repeats while the condition is true
3}

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

  • תנאי: כתוב את הביטוי התנאי שקובע אם להמשיך את הלולאה. הלולאה נמשכת כל עוד התנאי הוא true ונגמרת כשהוא הופך ל-false.

דוגמה 

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

בדוגמה זו, הלולאה מתחילה עם המשתנה i בערך 0 ומבוצעת כל עוד i < 5 הוא true. בכל איטרציה של הלולאה, i מוגדל ב-1, וכאשר i הופך ל-5, התנאי הופך ל-false והלולאה נגמרת. כתוצאה מכך, פקודת while מציגה את הערכים מ-0 עד 4.

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

לולאה אינסופית

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

דוגמה 

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

עיבוד מערכים עם לולאת while

ניתן גם לעבד מערכים באמצעות פקודת while.

דוגמה 

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

פקודת do...while

תחביר בסיסי 

1do {
2    // Code that is executed at least once
3} while (condition);

פקודת do...while, שהיא גרסה של פקודת while, בודקת את התנאי לאחר שהלולאה התבצעה לפחות פעם אחת. בעוד פקודת while בודקת את התנאי תחילה, פקודת do...while מריצה את התהליך פעם אחת לפני בדיקת התנאי.

דוגמה 

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

בדוגמה זו, מוצג i מ-0 עד 4. פקודת do...while שונה מפקודת while בכך שהיא תמיד מתבצעת פעם אחת, גם אם התנאי הוא false.

סיכום

  • פקודת while משמשת להרצת קוד חוזרת כל עוד התנאי הוא true.
  • יש להיזהר מלולאות אינסופיות, אך ניתן לשלוט בזרימת הלולאות באמצעות break ו-continue.
  • פקודת do...while מועילה כאשר רוצים להריץ את הלולאה לפחות פעם אחת.

break ו-continue

ניתן להשתמש ב-break ו-continue בתוך הלולאה.

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

דוגמה ל-break 

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

במקרה זה, פקודת break מתבצעת כאשר i הופך ל-5. כתוצאה מכך, מוצגים מספרים מ-0 עד 4.

דוגמה ל-continue 

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

במקרה זה, פקודת continue מתבצעת כאשר i הוא 2. כתוצאה מכך, מוצגים מספרים שאינם 2.

לולאות מקוננות ב-JavaScript

בתכנות ב-JavaScript, לולאה מקוננת (nested loop) היא מבנה שבו לולאה אחת נמצאת בתוך לולאה אחרת. לולאות כאלה הן יעילות מאוד כאשר אלגוריתמים או תהליכים מסוימים משתרעים על פני ממדים או שכבות מרובות. לדוגמה, עיבוד מערך רב-ממדי עם מערכים בתוך מערכים הוא מקרה טיפוסי.

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

מבנה בסיסי של לולאות מקוננות

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

להלן דוגמה בסיסית לשתי לולאות מקוננות.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

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

דוגמה מעשית של לולאות מקוננות

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

בדוגמה הבאה, אנו מטפלים במערך דו-ממדי ומדפיסים כל אלמנט.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

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

הערות

ישנם כמה נקודות שיש להיות מודעים אליהן בעת שימוש בלולאות מקוננות.

  1. נושאי ביצועים

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

  2. יישום לאלגוריתמים מורכבים

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

שיקולי אופטימיזציה

בעת שימוש בלולאות מקוננות, ניתן לשקול את האופטימיזציות הבאות.

  1. סיום מוקדם של לולאה

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

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

  1. העברת חישובים החוצה

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

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

סיכום

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

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

שיטות עבודה מומלצות להצהרות תנאי ב-JavaScriptשיטות עבודה מומלצות לאיטרציה ב-JavaScript