PracticU

מערך Array ב-Javascript

בלי כתוביותעם כתוביות
PracticU › קורס Javascript כולל JQuery › מערך Array ב-Javascript
מילון מושגים:
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
משתנה - שם שמפנה למקום בזיכרון שבו נשמר ערך שיכול להשתנות במהלך ריצת התוכנית, כמו מספר, טקסט או אובייקט.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.
מחרוזת - סוג נתונים שמייצג רצף של תווים, כלומר טקסט, ומשמש לאחסון מילים, משפטים או כל רצף סימנים.
אינדקס - מבנה במסד נתונים שמאיץ חיפוש ושליפה. גם מספר המציין מיקום של איבר במערך.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.

מערך Array ב-Javascript
מערך מחזיק אוסף של ערכים באותו משתנה, כך שאפשר לעבור עליהם, להוסיף ולהסיר ערכים ולבצע עליהם פעולות בלי לכתוב כל אחד בנפרד. השיעור עובר על הפעולות העיקריות של מערך ב-JavaScript.
השלבים העיקריים
1. יצירה: פותחים משתנה עם var ומגדירים לו מערך חדש. מערך חדש ריק, ואורכו 0. בדוגמה המערך מתאר רשימת ערים, שאחר כך אפשר להכניס לרכיב select.
2. push: מוסיף ערך לסוף המערך, והאורך גדל. גישה לערך נעשית בסוגריים מרובעים, והתא הראשון הוא מספר 0.
3. הוספה לפי מיקום: אפשר לכתוב לתא מספר 6 גם אם הוא לא קיים, והמערך מתרחב לבד. התאים שנוצרו בביניים מחזירים undefined.
4. ערכים בתחילת הדרך: אפשר להכניס כמה ערכים כבר בזמן יצירת המערך, והם נכנסים לתאים לפי הסדר.
5. מעבר על כל המערך: לולאת for רצה מ-0 עד array.length. בוויז'ואל סטודיו כותבים for ולוחצים על Tab, והשלד של הלולאה נכתב לבד. את שם משתנה הלולאה אפשר לשנות.
6. pop: מוציא את הערך האחרון, מחזיר אותו ומסיר אותו מהמערך.
7. shift ו-unshift: shift מוציא את הערך הראשון, ו-unshift מכניס ערך לתחילת המערך.
8. toString ו-join: toString הופך את כל המערך למחרוזת אחת שמופרדת בפסיקים. join עושה את אותו דבר עם מפריד שנבחר, למשל רווח.
9. concat: מחבר ערכים נוספים למערך ומחזיר מערך חדש, בלי לשנות את המקורי.
10. reverse: הופך את סדר הערכים.
11. slice ו-splice: slice מחזיר פיסה מהמערך בין שני אינדקסים, כשהאינדקס הסופי לא נכלל, בלי לשנות את המערך. splice מוחק ערכים מאינדקס מסוים, ואפשר להכניס במקומם ערכים חדשים.
12. sort עם פונקציית השוואה: sort ממיין, ובברירת מחדל זה מיון מילוני. אפשר להעביר לו פונקציה שמקבלת שני ערכים: מחזירה 0 אם הם שווים, ערך חיובי אם הראשון גדול, ושלילי אם השני גדול. כך המיון יהיה בסדר עולה, ואם מחזירים את השני פחות הראשון, בסדר יורד.
פקודות והגדרות
var arr = new Array();, arr.length, arr.push(...), arr[0], arr.pop(), arr.slice(6, 8), arr.splice(2, 3, "A", "B", "C", "D"), arr.sort(compare), Math.random() * 10, parseInt(...).
שימו לב
ברירת המחדל של sort היא מיון מילוני. לחישוב ממוצע של מספרים רנדומליים בטווח, Math.random מחזיר ערכים לא שלמים, ו-parseInt מחזיר את החלק השלם בלבד.
אחרי השיעור מנהלים אוסף של ערכים במערך אחד, ומבצעים עליו הוספה, הוצאה, חיתוך, מיון וחישובים בעזרת לולאה.
השיעור הבא בקורס: Matrix
מילון מושגים:
קוד מקור - הקוד שמפתחים כותבים בשפת תכנות, לפני הידור, המגדיר את פעולת התוכנה.
Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

להורדת קוד מקור של כל הדוגמאות בקורס  JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד

להורדת קוד מקור של כל הדוגמאות בקורס  JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד

פרקי ההרצאה: מערך Array ב-Javascript

  1. 00:00

    הכרת מערכים

  2. 01:00

    יצירת מערך ואורכו

  3. 01:56

    הוספת פריטים עם push

  4. 05:09

    מעבר על המערך בלולאת for

  5. 07:19

    פונקציית pop

  6. 09:16

    שרשור עם concat

  7. 12:04

    shift ו-unshift

  8. 14:13

    חיתוך עם slice

תמלול ההרצאה: מערך Array ב-Javascript

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

  1. 00:01

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

  2. 00:15

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

  3. 00:44

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

  4. 00:54

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

  5. 01:09

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

  6. 01:33

    בו תאים נוספים אבל אני יכול לראות מה בדיוק יש בו ולהציג לדוגמה את האורך שלו בואו כרגע נציג את האורך של המערך הזה alert array.length נריץ ונראה שאורך המערך ברגע שאני יוצר אותו אמור להיות 0. בואו נבדוק את זה, אנחנו רואים שהוא מציג לנו 0. אוקיי, כעת איך אני בעצם מוסיף פריטים למערך?

  7. 02:05

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

  8. 02:21

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

  9. 02:42

    נשנה רק ל-123 כדי שנראה איזשהו הבדל קצת יותר משמעותי. נריץ ונראה שאורך המערך הוא 1 והערך בתא 0 הוא 123. דבר נוסף שיכלתי לבצע ולתת מספר ערכים לפוש 1, 2, 3, 4, 5, 6, 7, 8, 9 וכעת אורך המערך יהיה 3.

  10. 03:09

    כורך המערך 3, הערך בתא הראשון עדיין 1, 2, 3. אם עכשיו הייתי משכפל את זה ובודק מה הערך שיש בתא מספר 1 ומה הערך שיש בתא מספר 2 והייתי מקבל את שלושת הערכים האלה.

  11. 03:28

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

  12. 04:02

    מ-0 אז אורך המערך עכשיו יהיה 7, תא מספר 0 ועוד 6 תאים נוספים. בתא 0, 1, 2 אנחנו בעצם נראה את 3 הערכים הראשונים שהוכנסו כאן.

  13. 04:16

    בואו נראה מה קורה בתא מספר 3, 4, 5, 6 ונראה מה בעצם מוצג לנו. קודם כל האורך הוא 7, לאחר מכן יש לי את המספר 1, 2, 3, 4, 5, 6, 7, 8, 9. לאחר מכן יש לי undefined, undefined, undefined ולבסוף 1111. זאת אומרת שכל הערכים שהמערך

  14. 04:54

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

  15. 05:22

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

  16. 05:34

    אני אשאיר כרגע i אם רציתי לשנות את זה אני רוצה לשנות ואני יכול ללחוץ x ועוד פעם tab ואז הוא משנה לי את כל היתר לx'ים בואו נחזיר אותו ל-i tab ואז הוא אומר לי עד כמה אתה רוצה ש-i ירוץ אני רוצה לרוץ עד array length ומיד אני יכול לבצע את הפקודות הרצויות לדוגמה array על i וכמובן הקוד הזה מחליף לי את כל השורות האלה ואני כרגע אמור לראות

  17. 06:09

    שה-length הוא 7 ומיד אחר כך את כל הערכים. בואו נבדוק את זה. Length 7 וכל הערכים של המערך בדיוק כמו שהם הוכנסו.

  18. 06:29

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

  19. 06:56

    1,1,1,2,2,3,3,4,5,6,7,8,9 ואז 1,1,1,1 שהכנסנו אותו ידנית ל-6 ופה הסתיים המערך עצמו. למערך עצמו יש עוד מגוון פונקציות בדומה ל-push שזו פונקציה ששייכת למערך עצמו שכל אחת מבצעת משהו מאוד מעניין.

  20. 07:20

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

  21. 07:42

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

  22. 07:53

    בואו נבדוק, להלן הערך וכעת הוא יצא מהמערך לגמרי. אנחנו רוצים, רואים שהערך הוא 6, 1, 2, 3, 3, 1, 2, 3, 4, 5, 6, 7, 8, 9 ופה הסתיים המערך.

  23. 08:16

    אנחנו יכולים להציג את המערך בשיטה קצת אחרת ובעצם להציג בבת אחת את כל הערכים שלו. אז בואו נכבה את הלולאה ופשוט נרשום alert array.toString, פונקציה שהופכת את כל המערך ל-String אחת ומחזירה את ה-String.

  24. 08:38

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

  25. 08:55

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

  26. 09:17

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

  27. 09:55

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

  28. 10:19

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

  29. 10:35

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

  30. 11:00

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

  31. 11:26

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

  32. 11:55

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

  33. 12:12

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

  34. 12:34

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

  35. 13:12

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

  36. 13:30

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

  37. 13:50

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

  38. 14:14

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

  39. 14:38

    נקבל את זה לתוך Smaller הרי ונציג את Smaller הרי. אוקיי, אז בואו נסתכל מה זה 6, אינדקס 6, ומה זה אינדקס 8. 1, 1 מתחיל מאינדקס

לקורס המלא: קורס Javascript אונליין

ההרצאה הקודמת: Chars

ההרצאה הבאה: Matrix

הרצאות קשורות מקורסים אחרים

  • מערך של מבנים - Array
  • קורס סי-שארפ - מערך - Array
  • מערך Array ב-TypeScript
  • מערך - Array - שפת Swift

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

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