שיטות עבודה מומלצות עבור לולאות for ב-TypeScript

שיטות עבודה מומלצות עבור לולאות for ב-TypeScript

מאמר זה מסביר את שיטות העבודה המומלצות לשימוש בלולאות for ב-TypeScript.

YouTube Video

שיטות עבודה מומלצות עבור לולאות for ב-TypeScript

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

בחירת סוג הלולאה המתאים

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

לולאת for סטנדרטית

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

לולאת for הסטנדרטית אידיאלית כאשר יש צורך בשליטה מדויקת על אינדקס האיטרציה.

שיטות עבודה מומלצות
1const maxIterations = 10;
2for (let i = 0; i < maxIterations; i++) {
3    console.log(i);
4}

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

  • השתמש ב- let עבור משתני אינדקס
    • שימוש ב-let במקום var מגביל את התחום לבלוק, ומונע התנהגות בלתי מכוונת.
  • השתמש בקבועים ובשמות משתנים תיאוריים כדי להפוך את גבולות הלולאה לברורים.
    • הימנעות ממספרים מופשטים ושימוש בשמות משתנים משמעותיים משפרים את הקריאות.

לולאת for...of

1const array = [1, 2, 3];
2for (let value of array) {
3    console.log(value);
4}

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

שיטות עבודה מומלצות
1const array = [1, 2, 3];
2for (const value of array) {
3    console.log(value);
4}

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

  • השתמש ב- const עבור משתנים בלולאה
    • אם ערכים אינם משתנים בתוך הלולאה, שימוש ב-const מסייע במניעת השמה מחדש בשוגג.

לולאת for...in

1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    console.log(`${key}: ${obj[key]}`);
4}

לולאת for...in חוזרת על המאפיינים הניתנים לספירה של אובייקט.

שיטות עבודה מומלצות
1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    if (obj.hasOwnProperty(key)) {
4        console.log(`${key}: ${obj[key]}`);
5    }
6}

כאשר כותבים לולאת for...in, תוכלו לשקול את הנקודות הבאות.

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

שיטת forEach

1const array = [1, 2, 3];
2array.forEach((value, index) => {
3    console.log(`Index: ${index}, Value: ${value}`);
4});

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

שיטות עבודה מומלצות

כאשר משתמשים בשיטת forEach, תוכלו לשקול את הנקודות הבאות.

  • השתמש בפונקציות חץ
    • השתמש בפונקציות חץ קצרות לשיפור קריאות הקוד.
  • הימנע מהפרעות
    • forEach אינו תומך ב- break או ב- continue. השתמשו בלולאות for...of או for כשנדרש:.

בטיחות סוגים ומניעת שגיאות

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

הגדירו סוגים קשיחים עבור משתני הלולאה

1const items = [1, 2, 3];
2items.forEach(item => {
3    console.log(item * 2);
4});
1const items: number[] = [1, 2, 3];
2items.forEach((item: number) => {
3    console.log(item * 2);
4});

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

הימנעו מ-any משתמע

1{
2  "compilerOptions": {
3    "noImplicitAny": true
4  }
5}

בנוסף, על ידי הפעלת noImplicitAny ב-tsconfig.json, ניתן למנוע שמשתנים ללא טיפוסים מפורשים יקבלו באופן מרומז את הטיפוס any.

השתמשו ב-ReadonlyArray כשנדרש

1const numbers: ReadonlyArray<number> = [1, 2, 3];
2for (const value of numbers) {
3    console.log(value);
4}

אם אתם מבצעים איטרציה על מערך שאסור לשנותו, ניתן להשתמש ב-ReadonlyArray.

שיקולי ביצועים

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

בחר את שיטת מימוש הלולאה האופטימלית.

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

 1// Prepare input data (an array from 1 to 1000000)
 2const input: number[] = Array.from({ length: 1000000 }, (_, i) => i + 1);
 3
 4// --- for ---
 5console.time('for loop');
 6const squaresFor: number[] = [];
 7for (let i = 0; i < input.length; i++) {
 8    squaresFor.push(input[i] * input[i]);
 9}
10console.timeEnd('for loop');
11
12// --- while ---
13console.time('while loop');
14const squaresWhile: number[] = [];
15let i: number = 0;
16while (i < input.length) {
17    squaresWhile.push(input[i] * input[i]);
18    i++;
19}
20console.timeEnd('while loop');
21
22// --- for-of ---
23console.time('for-of loop');
24const squaresForOf: number[] = [];
25for (const num of input) {
26    squaresForOf.push(num * num);
27}
28console.timeEnd('for-of loop');
29
30// --- forEach ---
31console.time('forEach loop');
32const squaresForEach: number[] = [];
33input.forEach((num: number): void => {
34    squaresForEach.push(num * num);
35});
36console.timeEnd('forEach loop');
37
38// --- map ---
39console.time('map');
40const squaresMap: number[] = input.map((value: number): number => value * value);
41console.timeEnd('map');

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

השתמשו בשיטות איטרציה מובנות

 1const squares = [1, 2, 3].map(value => value * value);
 2console.log(squares);
 3
 4const numbers = [1, 2, 3, 4, 5, 6];
 5const evenNumbers = numbers.filter(value => value % 2 === 0);
 6console.log(evenNumbers); // [2, 4, 6]
 7
 8const squaredEvens = numbers
 9    .filter(value => value % 2 === 0) // Keep only even numbers
10    .map(value => value * value);     // Square the remaining values
11
12console.log(squaredEvens); // [4, 16, 36]

שיטות כמו map ו-filter יכולות להיות קריאות יותר במקרים מסוימים.

העדיפו את for...of לשם קריאות

יש להעדיף ביצועים רק במקרים מוגבלים; כתיבת קוד קריא היא בדרך כלל חשובה יותר. לדוגמה, העדפת for...of יכולה לשפר את הקריאות.

1const fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(`${i}: ${fruits[i]}`);
5}
שיטות עבודה מומלצות
1const fruits = ["apple", "banana", "cherry"];
2
3for (const [index, fruit] of fruits.entries()) {
4    console.log(`${index}: ${fruit}`);
5}

על ידי העדפת לולאות for...of, תוכל לכתוב קוד קריא ועמיד יותר בפני שגיאות. כפי שמוצג בדוגמה זו, אם אתה זקוק גם לאינדקסים של מערך, שילוב entries() עם for...of הוא יעיל.

הימנעות ממלכודות נפוצות

שינוי אוספים במהלך איטרציה

1const array = [1, 2, 3];
2for (const value of [...array]) {
3    if (value === 2) {
4        array.push(4); // Avoid this!
5    }
6}
7console.log(array);

שינוי מערך במהלך איטרציה עשוי להוביל להתנהגות בלתי צפויה:. השתמש בעותק במידת הצורך.

קחו בחשבון מקרים קיצוניים

1const array: number[] = [];
2for (const value of array) {
3    console.log(value); // No output, but no errors
4}

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

1const array: number[] = [];
2if (array.length === 0) {
3    console.log("The array is empty.");
4} else {
5    for (const value of array) {
6        console.log(value);
7    }
8}

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

סיום

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

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

YouTube Video