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

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

למד כיצד להדק את הקוד שלך ולהפיק את המרב מהשפות הללו באמצעות כמה קיצורי דרך שימושיים.

1. מפעיל טרנרי

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

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

שקול את הדוגמה הבאה:

const גיל = 20;
const ageType = גיל >= 18? "מְבוּגָר": "יֶלֶד";
לְנַחֵם.log (ageType); // פלט: "מבוגר"

דוגמה זו משתמשת באופרטור הטרינרי כדי לבדוק אם המשתנה גיל גדול או שווה ל 18. אם כן, הקוד מקצה את הערך מְבוּגָר למשתנה ageType, אחרת הוא מקצה את הערך "ילד".

2. תבנית מילולית

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

instagram viewer
`).

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

const שם = "אליס";
const ברכה = `שלום, ${name}!`;
לְנַחֵם.log (ברכה); // פלט: "שלום, אליס!"

הדוגמה כוללת את שֵׁם משתנה בתבנית מילולית באמצעות ${}. זה מאפשר לך לבנות בקלות מחרוזות דינמיות.

3. Nullish Coalescing מפעיל

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

שקול את הדוגמה הבאה:

const שם משתמש = ריק;
const displayName = שם משתמש?? "אוֹרֵחַ";
לְנַחֵם.log (displayName); // פלט: "אורח"

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

4. הערכת מעגל קצר

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

שקול את הדוגמה הבאה:

const שם = "ג'ון";
const ברכה = שם && `שלום, ${name}`;
לְנַחֵם.log (ברכה); // פלט: "שלום, ג'ון"

דוגמה זו תעריך רק את הביטוי `שלום, ${name}` אם המשתנה שֵׁם יש ערך אמיתי. אחרת, הוא מקצר ומקצה את הערך של שֵׁם עצמו למשתנה בְּרָכָה.

5. קיצור של הקצאת נכסי אובייקט

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

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

שקול את הדוגמה הבאה:

const שם פרטי = "ג'ון";
const שם משפחה = "צְבִיָה";
const אדם = { שם משפחה, שם משפחה };
לְנַחֵם.log (אדם); // פלט: { firstName: "John", lastName: "Doe" }

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

6. שרשרת אופציונלית

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

שקול את הדוגמה הבאה:

const משתמש = { שֵׁם: "אליס", כתובת: { עִיר: "ניו יורק", מדינה: "ארה"ב" }};
const country = user.address?.country;
לְנַחֵם.log (מדינה); // פלט: "ארה"ב"

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

7. הרס אובייקט

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

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

const משתמש = { שֵׁם: "ג'ון", גיל: 30 };
const { שם, גיל } = משתמש;
לְנַחֵם.log (שם, גיל); // פלט: "ג'ון" 30

דוגמה זו מחלצת את המשתנים שֵׁם ו גיל מ ה מִשׁתַמֵשׁ אובייקט באמצעות הרס אובייקט.

8. מפעיל התפשטות

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

שקול את הדוגמה הבאה:

const מספרים = [1, 2, 3];
const newNumbers = [...מספרים, 4, 5];
לְנַחֵם.log (newNumbers); // פלט: [1, 2, 3, 4, 5]

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

9. לולאת חפצים קיצור

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

שקול את הדוגמה הזו:

const משתמש = { שֵׁם: "ג'ון", גיל: 30 };
ל (const [ערך מפתח] שֶׁללְהִתְנַגֵד.entries (משתמש)) { 
לְנַחֵם.עֵץ(`${key}: ${value}`);
}
// פלט:
// שם: ג'ון
// גיל: 30

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

10. Array.indexOf Shorthand שימוש באופרטור Bitwise

אתה יכול להחליף שיחות ל Array.indexOf שיטה עם קיצור באמצעות האופרטור bitwise ~ כדי לבדוק אם קיים אלמנט במערך. הקיצור מחזיר את האינדקס של האלמנט אם נמצא או -1 אם לא נמצא.

שקול את הדוגמה הבאה:

const מספרים = [1, 2, 3];
const index = ~numbers.indexOf(2);
לְנַחֵם.log (אינדקס); // פלט: -2

בדוגמה למעלה, ~numbers.indexOf (2) החזרות -2 כי 2 נמצא במדד 1, והאופרטור סיביות שולל את האינדקס.

11. יציקת ערכים לבוליאנית עם!!

ל להמיר ערך במפורש לבוליאנית, אתה יכול להשתמש באופרטור השלילה הכפול (!!). זה למעשה ממיר ערך אמיתי ל נָכוֹן וערך כוזב ל שֶׁקֶר.

שקול את הדוגמה הבאה:

const ערך1 = "שלום";
const ערך2 = "";
לְנַחֵם.log(!!value1); // פלט: נכון
לְנַחֵם.log(!!value2); // פלט: שקר

בדוגמה למעלה, !!ערך1 החזרות נָכוֹן כי המחרוזת שלום הוא אמת, בעוד !!ערך2 החזרות שֶׁקֶר כי המחרוזת הריקה מזויפת.

פתיחת יעילות קוד וקריאה

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

בנוסף, הקצאת מאפיין האובייקט בקיצור, שרשור אופציונלי והסרת אובייקט פשט את העבודה עם אובייקטים, בעוד אופרטור ההתפשטות וקיצורי המערך מאפשרים מערך יעיל מָנִיפּוּלָצִיָה. שליטה בקצרנות הללו תהפוך אותך למפתח JavaScript ו-TypeScript פרודוקטיבי ויעיל יותר.