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

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

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

---

---

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

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

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

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

this

, ויש להם תחביר פשוט יותר מפונקציות מסורתיות.

המרת מוזיקת ​​גוגל פליי ל- mp3

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

---

---

=>

אם אי פעם עבדת ב- Python, הפונקציות האלה דומות מאוד ל ביטויי פייתון למבדה .

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

---

---

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

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

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

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

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

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

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

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

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

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

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

let addnum = (num1,num2) => num1 + num2;

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

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

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

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

כיצד להתקין גירסה ישנה יותר של mac os

פונקציות קבועות

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

let square = x => x * x
square(2);
>>4

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

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

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

שימוש בזה

הקונספט של

this

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

this

קל יותר לשימוש.

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

this

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

this

ליישם את הפונקציה העיקרית שלך

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

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

הקצאת הערך של

this

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

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

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

this

.

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

כיצד להופיע במצב לא מקוון בפייסבוק

let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings


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

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

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

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

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

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

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

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

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

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

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

let createArrowObject = (first,last) => ({first:first, last:last});

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

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

this

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

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 6 חלופות קוליות: אפליקציות ספרי האודיו הטובות ביותר בחינם או הזולות

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

קרא הבא נושאים קשורים

• תִכנוּת
• JavaScript

על הסופר אנתוני גרנט(פורסמו 40 מאמרים)

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

עוד מאת אנתוני גרנט

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה