הבנת פונקציות מסדר גבוה יותר ב-JavaScript

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

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

מהן פונקציות מסדר גבוה יותר?

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

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

פוּנקצִיָהשינוי צורה(fn) {
לתת resultArray = [];
לַחֲזוֹרפוּנקצִיָה (מַעֲרָך) {
ל (לתת אני = 0; i < array.length; i++) {
 resultArray.push (fn (מערך[i]))
 }
לַחֲזוֹר resultArray
 }
}

בבלוק הקוד למעלה, ה- שינוי צורה פונקציה היא פונקציה מסדר גבוה שמקבלת את fn פונקציה כפרמטר ומחזירה פונקציה אנונימית שמקבלת מַעֲרָך כפרמטר.

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

ה שינוי צורה הפונקציה מחזירה פונקציה אנונימית שעוברת לולאה דרך כל אלמנט פנימה מַעֲרָך, ואז מעביר את האלמנט ל- fn פונקציה לחישוב, ודוחפת את התוצאה לתוך resultArray. לאחר השלמת הלולאה, הפונקציה האנונימית מחזירה את resultArray.

const function1 = transform((איקס) => איקס * 2)
לְנַחֵם‎.log (function1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

בלוק הקוד שלמעלה מקצה את הפונקציה האנונימית המוחזרת על ידי שינוי צורה פונקציה למשתנה הקבוע פונקציה 1. fn מחזיר את המוצר של איקס שהוא תחליף ל מערך[i].

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

לְנַחֵם.log (transform((איקס) => איקס * 2)([ 2, 3, 4, 5, 6 ]))

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

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

פוּנקצִיָהfilterAndTransform(fn, arrayToBeFiltered, תנאי) {
לתת filteredArray = [];
ל (לתת אני = 0; i < arrayToBeFiltered.length; i++) {
אם (תנאי (arrayToBeFiltered[i])) {
לתת y = transform (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } אַחֵר {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
לַחֲזוֹר filteredArray
}

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

filterAndTransform((איקס) => איקס * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

לא כמו ה שינוי צורה פונקציה, ה filterAndTransform הפונקציה לוקחת שתי פונקציות כפרמטרים: fn ו מַצָב. ה מַצָב הפונקציה בודקת אם הפרמטר עבר, הוא מספר זוגי ומחזירה true. אחרת, הוא מחזיר false.

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

[ 1, 4, 3, 8, 5 ]

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

הפונקציה Array.map() מסדר גבוה ב-JavaScript

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

לתת מערך = [ 1, 2, 3, 4, 5 ];
לתת transformedArray = array.map((איקס) => איקס * 2);

כשאתה רושם transformedArray במסוף הדפדפן, אתה אמור לקבל את אותה תוצאה שקיבלת עם שינוי צורה פונקציה שהוזכרה קודם לכן:

[ 2, 4, 6, 8, 10 ]

array.map() לוקח שני פרמטרים, הפרמטר הראשון מתייחס לאלמנט עצמו, בעוד שהפרמטר השני מתייחס לאינדקס של האלמנט (מיקום במערך). עם רק array.map() אתה יכול להשיג את אותן תוצאות כמו filterAndTransform פוּנקצִיָה. כך תעשה את זה:

לתת מערך = [ 1, 2, 3, 4, 5 ];
לתת transformedArray = array.map((איקס) => איקס % 20? איקס * 2: איקס);

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

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

הפונקציה Array.filter() ב-JavaScript

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

פוּנקצִיָהcheckFirstLetter(מִלָה) {
לתת תנועות = "איי"
אם (תנועות.כולל(מִלָה[0].toLowerCase())) {
לַחֲזוֹר מִלָה;
 } אַחֵר {
לַחֲזוֹר;
 }
}
לתת מילים = [ "שלום", "מ", "ה", "יְלָדִים", "שֶׁל", "כוכב לכת", "כדור הארץ" ];
לתת תוצאה = words.filter((איקס) => checkFirstLetter (x))

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

[ 'שֶׁל', 'כדור הארץ' ];

הפונקציה Array.reduce() ב-JavaScript

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

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

לתת a = [ 1, 2, 3, 4, 5];
לתת סכום = 0;
ל (לתת אני = 0; i < a.length; i++) {
 sum = sum + a[i];
}
לְנַחֵם.log (sum);

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

לתת a = [ 1, 2, 3, 4, 5 ];
sum = a.reduce((ג, נ) => c + n);
לְנַחֵם.log (sum);

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

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

כוחן של פונקציות מסדר גבוה יותר

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

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