פונקציות חץ של JavaScript יכולות להפוך אותך למפתח טוב יותר

פרסומת

JavaScript ES6 הביא שינויים מרגשים לעולם פיתוח האינטרנט. תוספות חדשות לשפת JavaScript הביאו אפשרויות חדשות.

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

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

מהן פונקציות חץ של JavaScript?

פונקציות חץ הן דרך חדשה לכתוב ביטויי פונקציה שהיו כלול במהדורת JavaScript ES6 מה זה ES6 ומה מתכנתי Javascript צריכים לדעתES6 מתייחס לגרסה 6 של שפת התכנות ECMA Script (Javascript). הבה נסתכל כעת על כמה שינויים מרכזיים ש- ES6 מביא ל- JavaScript. קרא עוד . הם דומים לביטויי פונקציית JavaScript בה השתמשת, עם כמה כללים שונים במקצת.

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

פונקציות אלה משתמשות באסימון חץ חדש:

=>

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

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

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

• מילת המפתח של הפונקציה מוסרת
• מילת המפתח להחזרה אינה אופציונלית
• פלטות מתולתלות הן אופציונליות

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

כיצד להשתמש בפונקציות חץ

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

להלן ביטוי פונקציה שמוסיף שני מספרים; תחילה בשיטת הפונקציה המסורתית:

 תן addnum = פונקציה (num1, num2) {להחזיר num1 + num2; }; addnum (1,2); >>3

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

להלן הביטוי ששונה לפונקצית חץ:

תן addnum = (num1, num2) => {return num1 + num2;}; addnum (1,2); >>3

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

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

תן addnum = (num1, num2) => num1 + num2;

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

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

תכונות חץ פונקציות

פונקציות חץ כוללות שימושים רבים ותכונות שונות.

פונקציות רגילות

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

תן ריבוע = x => x * x ריבוע (2); >>4

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

let helloFunction = () => Console.log ("שלום קורא!"); helloFunction (); >> שלום קורא!

פונקציות פשוטות כמו אלה משתמשות בהרבה פחות קוד. דמיין כמה מורכב יותר קל פרוייקט כמו מצגת שקופיות JavaScript כיצד לבנות מצגת JavaScript בשלושה שלבים פשוטיםהיום אני אראה לך כיצד לבנות מצגת שקופיות Javacript מאפס - בוא נקפוץ פנימה! קרא עוד הופך להיות כשיש לך דרך פשוטה יותר לכתוב פונקציות.

באמצעות זה

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

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

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

פונקציה אדם () {var that = this; // עליכם להקצות 'זה' למשתנה חדש that.age = 0; setInterval (פונקצית GrowUp () {that.age ++; }, 1000); }

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

פונקציה אדם () {this.age = 0; setInterval (() => {this.age ++; // עכשיו אתה יכול להשתמש 'זה' ללא משתנה חדש שהוכרז}, 1000); }

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

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

תן לפיצה = { תוספות: 5, removeToppings: () => {this.toppings--; } } // חפץ פיצה עם 5 תוספות. > פיצה. >> {toppings: 5, removeToppings: f} pizza. removeToppings (); // השיטה לא תעשה דבר לאובייקט> פיצה. >> {תוספות: 5, removeToppings: f} // עדיין יש 5 תוספות.

עבודה עם מערכים

באמצעות פונקציות חץ תוכלו לפשט את הקוד המשמש לעבודה בשיטות מערך. מערכים ו- שיטות מערך הן חלקים חשובים מאוד של JavaScript 5 שיטות מערך JavaScript שכדאי לשלוט בהן היוםרוצה להבין מערכי JavaScript אך אינך מצליח להשיג אותם? עיין בדוגמאות למערך JavaScript שלנו לקבלת הנחיות. קרא עוד כך שתשתמש בהם הרבה.

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

תן ל- myArray = [1,2,3,4]; myArray.map (פונקציה (אלמנט) { אלמנט החזרה + 1; }); >> [2,3,4,5]

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

תן ל- myArray = [1,2,3,4]; myArray.map (element => { אלמנט החזרה + 1; }); >> [2,3,4,5]

הרבה יותר קל לקרוא עכשיו.

יצירת ספרות אובייקט

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

תן createObject = פונקציה createName (ראשון, אחרון) {return {first: first, last: last}; };

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

תן createArrowObject = (ראשון, אחרון) => ({first: first, last: last});

פונקציות חץ JavaScript ומעבר לה

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

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

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