אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פיתוח ב-JavaScript » פונקצית reducer

פונקצית reducer

רן בר-זיק ינואר 5, 2020 7:07 am 8 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

  1. הערך שהתקבל מההרצה של פונקצית ה-reduce על האיבר הקודם (אם יש כזה).
  2. האיבר הנוכחי.
  3. האינדקס.
  4. המערך שה-reduce עליו.

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

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

function reducerFunction(lastResult, currentValue) {
  return lastResult + currentValue;
}

const myArray = ['avi', 'itzhak', 'yaki'];

const reducedValue = myArray.reduce(reducerFunction);

console.log(reducedValue); // aviitzhakyaki 

מה מתרחש פה? ראשית, הגדרת פונקצית ה-reduce. מה היא עושה? לוקחת את הערך הקודם (lastResult) שנקרא גם accumulator. ומוסיפה לו את הערך של האיבר הראשון.

בהרצה הראשונה, אין את lastResult, אז ה-reducer מחזיר את הערך הנוכחי (והראשון) של המערך. avi.

בהרצה השניה, ה-lastResult הוא avi. אז ה-reducer מחברת אותו אל הערך של האיבר הנוכחי (והשני) של המערך. itzhak ומחזירה aviitzhak.

בהרצה השלישית, ה-lastresult הוא aviitzhak, זה מה שההרצה הקודמת החזירה. ה-reducer לוקחת אותו ומחברת אותו אל הערך של האיבר הנוכחי (והשלישי) של המערך ומחזירה aviitzhakyaki.

מה שההרצה האחרונה מחזירה, זה מה שה-reducer מחזירה.

See the Pen reducer by Ran Bar-Zik (@barzik-the-vuer) on CodePen.

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

function reducerFunction(lastResult, currentValue) {
  return `${lastResult}  ${currentValue}`;
}

const myArray = ['avi', 'itzhak', 'yaki'];

const reducedValue = myArray.reduce(reducerFunction, 'Names:');

console.log(reducedValue); // Names:  avi  itzhak  yaki

מה מתרחש כאן?

בהרצה הראשונה, לכאורה אין את lastResult, אבל השתמשנו בארגומנט השני כשקראנו ל-myArray.reduce/ אז ה-reducer לוקח את הערך הזה, מכניס אותו למחרוזת טקסט יחד עם הערך של האיבר הראשון (avi) ומחזיר את התוצאה: Names: avi.

בהרצה השניה, ה-lastResult הוא Names: avi. אז ה-reducer לוקחת את הערך הזה ומכניסה אותו למחרוזת טקסט עם הערך של האיבר השני (itzhak) וכך הלאה.

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

function reducerFunction(accumulator, currentValue) {
  accumulator[currentValue.name] = currentValue; 
  return accumulator;
}

const mySites = [{ name: 'Google', url: 'google.com' },
                { name: 'Internet Israel', url: 'internet-israel.com' },
                { name: 'Haaretz', url: 'haaretz.co.il' },
                { name: 'GOV IL', url: 'gov.il' },];

const reducedValue = mySites.reduce(reducerFunction, {});

console.log(reducedValue); 

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

See the Pen reducer advanced by Ran Bar-Zik (@barzik-the-vuer) on CodePen.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
JavaScript

8 תגובות

  1. משה הגב ינואר 5, 2020 בשעה 9:18 pm

    היי רן תודה על המאמר
    תוכל להסביר מה זה בעצם שונה מהמתודה map?

    • יוסף הגב ינואר 6, 2020 בשעה 12:07 pm

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

      • יוסף הגב ינואר 6, 2020 בשעה 12:08 pm

        *array.forEach

  2. אדם הגב ינואר 5, 2020 בשעה 11:29 pm

    אחל׳ה מאמר. תיקון קטן – אם לא מעבירים פרמטר שלישי (ה initialValue), אז lastResult מתחיל מהאיבר הראשון במערך, לא מכלום (ואז יש איטרציה אחת פחות בעצם).

    • אדם הגב ינואר 5, 2020 בשעה 11:30 pm

      *פרמטר שני

  3. מיכה הגב ינואר 7, 2020 בשעה 12:27 pm

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

    • מזהה יצורים הגב פברואר 27, 2020 בשעה 10:43 am

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

      • קפיש הגב יולי 15, 2020 בשעה 5:18 pm

        רן אוהב שמתקנים אותו… (בד"כ)

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד