PracticU

הסבר על Observables - חלק 2

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › הסבר על Observables - חלק 2
מילון מושגים:
תנאי - ביטוי לוגי בקוד שתוצאתו אמת או שקר, וקובע אילו פקודות יתבצעו בהתאם לערכו.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).

הסבר על Observables - חלק 2
אחרי שיודעים לקבל רצף נתונים מ-Observable, אפשר לעבד אותו בעזרת אופרטורים שמחוברים דרך pipe. השיעור מציג כמה מהם ומראה איך כל אחד מתנהג לאורך הזמן.
האופרטורים שנדגמו
1. filter: מעביר רק ערכים שעומדים בתנאי. בשיעור סוננו מספרים זוגיים.
2. map: ממיר כל ערך לערך אחר. בשיעור כל מספר הוכפל.
3. reduce: מצטבר את כל הערכים לתוצאה אחת, ומחזיר אותה רק כשהרצף מסתיים. הוא מקבל ערך התחלתי (seed) ופונקציה שמחברת כל ערך לסכום.
4. take: מביא מספר מסוים של ערכים ואז מסיים.
5. toArray: אוסף את כל הערכים למערך אחד, וממתין לסיום הרצף.
שילוב
1. שרשור: אפשר להעביר כמה אופרטורים ב-pipe, למשל לסנן, ואז לקחת שלושה ערכים ולהפוך למערך.
שימו לב
1. שגיאה: כשמתרחשת שגיאה ברצף, reduce לא מחזיר את החישוב החלקי שהגיע עד אותה נקודה, אלא מדווח שגיאה בלבד.
2. תיעוד: בתיעוד RxJS יש עשרות אופרטורים, ולכל אחד דוגמה.
עכשיו אפשר לעבד רצף נתונים בעזרת אופרטורים, בלי לחכות שכל הנתונים יגיעו.

פרקי ההרצאה: הסבר על Observables - חלק 2

  1. 00:00

    למה Observable מתאים לנתונים לאורך זמן

  2. 00:37

    חיתוך נתונים שמגיעים בהדרגה

  3. 01:15

    הצגת עשרה מספרים מהמודול

  4. 01:59

    ייבוא אופרטורים מ-rxjs/operators

  5. 02:58

    pipe כצינור לעיבוד הנתונים

  6. 03:32

    סינון מספרים זוגיים עם filter

  7. 04:49

    מיפוי מספרים עם map

  8. 05:34

    צבירת הרצף לערך אחד עם reduce

תמלול ההרצאה: הסבר על Observables - חלק 2

הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Observables - חלק 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:18

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

  3. 00:30

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

  4. 00:50

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

  5. 01:22

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

  6. 01:38

    מה אנחנו עושים? אז אנחנו עכשיו משתמשים בואו נשלוף מהספרייה rxjs/operators אנחנו בעצם שולפים את האופרטורים שאנחנו רוצים לבצע. נתחיל עם פילטר בואו רגע ניפטר גם מזה, אנחנו לא באמת רוצים, או שנשאיר את זה ונשים את זה בהערה.

  7. 02:21

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

  8. 02:47

    no matter what, ואלה המספרים שדווחו. אבל מה קורה אם אני רוצה לעשות איזשהו filtering לאורך זמן על המספרים, ולהגיד: רגע, אני לא רוצה שתביא לי את המספרים as is, אני רוצה לבצע איזושהי פעולה עליהם.

  9. 03:03

    אז מה שאנחנו עושים בין ה-subscribe לבין ה-observable אנחנו קוראים לפונקציה שנקראת pipe. כלומר, pipe זה צינור, כאילו שיש פה איזשהו ערוץ תקשורת לתוך הנתונים שמוזרמים אלינו.

  10. 03:17

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

  11. 03:38

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

  12. 03:55

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

  13. 04:20

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

  14. 04:30

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

  15. 04:56

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

  16. 05:08

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

  17. 05:37

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

  18. 06:11

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

  19. 06:33

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

לקורס המלא: קורס NodeJS אונליין בעברית

ההרצאה הקודמת: הסבר על Observables - חלק 1

ההרצאה הבאה: עבודה עם קבצים ב-NodeJS

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React