5 פונקציות JavaScript מתקדמות בהן תוכל להשתמש כדי לשפר את איכות הקוד שלך

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

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

מה כל כך טוב בפונקציות JavaScript?

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

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

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

1. פַּעַם

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

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

כך תוכל להגדיר פונקציה כזו:

const פעם אחת = (func) => {
לתת תוֹצָאָה;
לתת funcCalled = שֶׁקֶר;
לַחֲזוֹר(...טענות) => {
אם (!funcCalled) {
 result = func(...args);
 funcCalled = נָכוֹן;
 }
לַחֲזוֹר תוֹצָאָה;
 };
};

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

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

// הגדר פונקציה כדי להביא נתונים מה-DB
פוּנקצִיָהgetUserData() {
// ...
}
// קבל גרסה של הפונקציה getUserData שיכולה לפעול רק פעם אחת
const makeHTTPrequestOnlyOnce = פעם אחת (getUserData);
const userDataBtn = מסמך.querySelector("#btn");
userDataBtn.addEventListener("נְקִישָׁה", makeHTTPRequestOnlyOnce);

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

2. צינור

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

הנה דוגמה בקוד:

// הגדר את פונקציית הצינור
const צינור = (... מתפקד) => {
לַחֲזוֹר(arg) => {
 funcs.forEach(פוּנקצִיָה(func) {
 arg = func (arg);
 });
לַחֲזוֹר arg;
 }
}
// הגדר כמה פונקציות
const addOne = (א) => + 1;
const כפול = (איקס) => איקס * 2;
const ריבוע = (איקס) => x * x;
// צור צינור עם הפונקציות
const myPipe = צינור (addOne, double, square);
// בדוק את הצינור עם ערך קלט
לְנַחֵם.log (myPipe(2)); // פלט: 36

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

3. מַפָּה

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

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

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

הנה דוגמה לשימוש מַפָּה:

const מספרים = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(פוּנקצִיָה(מספר) {
לַחֲזוֹר מספר * 2;
});
לְנַחֵם.log (doublednumbers);
// פלט: [2, 4, 6, 8, 10]

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

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

4. לִבחוֹר

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

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

הנה דוגמה בקוד:

const בחר = (חפץ, ...מפתחות) => {
לַחֲזוֹר keys.reduce((תוצאה, מפתח) => {
אם (object.hasOwnProperty (מפתח)) {
 תוצאה[מפתח] = אובייקט[מפתח];
 }
לַחֲזוֹר תוֹצָאָה;
 }, {});
};

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

const משתמש = {
 שֵׁם: 'סְנוּנִית',
 גיל: 30,
 אימייל: '[email protected]',
};
לְנַחֵם.log (בחר (משתמש, 'שֵׁם', 'גיל'));
// פלט: { שם: 'מרטין', גיל: 30 }

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

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

5. רוכסן

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

הנה דוגמה ליישום של פונקציית zip:

פוּנקצִיָהרוכסן(... מערכים) {
const maxLength = מתמטיקה.min(...arrays.map(מַעֲרָך => array.length));
לַחֲזוֹרמַעֲרָך.מ(
 { אורך: אורך מקסימלי },
 (_, index) => arrays.map(מַעֲרָך => מערך[אינדקס])
 );
};
const a = [1, 2, 3];
const b = ['א', 'ב', 'ג'];
const c = [נָכוֹן, שֶׁקֶר, נָכוֹן];
לְנַחֵם.log (zip (a, b, c));
// פלט: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

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

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

עבודה עם פונקציות JavaScript בקוד שלך

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

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