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

ידע מוקדם: הבנה בסיסית של מחשב, הבנה בסיסית של HTML, CSS ו - JavaScript.
Objective: הבנה של מערכים וביצוע פעולות שונות עליהם

מה זה בעצם מערך - Array?

מערכים לרוב מתוארים כאובייקט של מעין רשימה (״list-like objects״). בעיקרון, אלו אובייקטים המכילים מספר ערכים שמאוחסנים יחד.

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

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

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

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

יצירת מערכים

מערכים כוללים סוגריים מרובעות [] וכל איבר (אלמנט) במערך מופרד מאיבר אחר על ידי פסיק ,.

  1. נניח ואנחנו רוצים לאחסן רשימת פריטים בתוך מערך. הכניסו את הקוד הבא לקונסולה:
    let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
    shopping;
  2. בדוגמא למעלה, כל איבר הוא מחרוזת, אך ניתן לאחסן כל מיני סוגי ערכים בתוך מערכים - מחרוזות, מספרים, אובייקטים ואפילו מערכים נוספים. לדוגמא:
    let sequence = [1, 1, 2, 3, 5, 8, 13];
    let random = ['tree', 795, [0, 1, 2]];
  3. לפני שתמשיכו, נסו ליצור מספר מערכים וחקרו את האפשרויות השונות.

גישה לאיברי המערך ושינוי שלהם

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

  1. הכניסו את הקוד הבא לקונסולה:
    shopping[0];
    // returns "bread"
  2. אנחנו גם יכולים לשנות איבר במערך באמצעות מתן ערך חדש לאותו איבר במערך. ראו לדוגמא:
    shopping[0] = 'tahini';
    shopping;
    // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    להזכירכם: מחשבים מתחילים לספור מ-0 ולא מ-1. בדיוק כמו במחרוזות, כך גם במערכים.
  3. שימו לב שמערך בתוך מערך נקרא מערך רב מימדי. אנחנו יכולים לגשת לאיבר שנמצא בתוך מערך מסויים, כאשר המערך הזה נמצא בתוך מערך באמצעות שרשור של שתי סוגריים מרובעות ביחד. לדוגמא, על מנת לגשת לאיבר במערך שהוא האיבר השלישי במערך המשורשר והמערך המשורשר הוא האיבר השלישי במערך הראשי בשם random, אנו נצטרך לרשום זאת בצורה הבאה:
    random[2][2];
  4. נסו לעשות כמה פעולות ושינויים בעצמכם על מנת להבין את הדרך שבה אנו ניגשים לאיברים במערך.

מציאת האורך של מערך

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

נסו להזין את הקוד הבא:

sequence.length;
// should return 7

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

let sequence = [1, 1, 2, 3, 5, 8, 13];
for (let i = 0; i < sequence.length; i++) {
  console.log(sequence[i]);
}

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

  1. הרצת הקוד שנמצא בין הסוגריים המסולסלות {} על כל איבר במערך החל מהאיבר הראשון במערך (אשר נמצא במיקום 0 כמובן). את מספר המיקום של האיבר במערך אותו אנו מייצגים באמצעות המשתנה i.
  2. הרצת הלולאה מסוג for כל עוד מיקומו של האיבר במערך (שכאמור מיוצג בכל ריצה על ידי המשתנה i) קטן מסך כל האיברים במערך. כלומר, במקרה זה הקוד בתוך הסוגריים המסולסלות {} לא ירוץ כאשר המשתנה i יהיה שווה ל-7. (להזכירכם - אמנם יש שבעה איברים במערך, אך הספירה שלהם מתחילה ב-0, ולכן האיבר השביעי במערך, יהיה במיקום/אינדקס השישי וזו הסיבה שהשתמשנו בסימן קטן מאורך המערך (>) ולא שווה לאורך המערך (=) שכן אז היינו מקבלים במיקום השביעי את הערך undefiened.
  3. בתוך הסוגריים המסולסלות, רשמנו את הקוד שאנחנו רוצים שיבוצע במסגרת כל ריצה של הלולאה. במקרה הזה, הדפסנו לקונסולה את הערך הנוכחי של האיבר שעליו רצה הלולאה באותה ריצה. לצורך הדפסה לקונסולה עשינו שימוש ב-()console.log.

מס׳ מתודות שימושיות של מערכים

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

המרה בין מחרוזות ומערכים

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

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

לתשומת לב: מבחינה טכנית זוהי מתודה של מחרוזות ולא מתודה של מערכים.

  1. בואו ננסה להבין כיצד מתודה הזו עובדת: צרו מחרוזת בקונסולה כגון זו:
    let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
  2. עכשיו הפרידו בין התווים במחרוזת באמצעות המתודה split() כך שכל פעם שיופיע התו , תבוצע העברה של התווים שלפניו לאיבר חדש במערך שנקרא myArray:
    let myArray = myData.split(',');
    myArray;
  3. נסו למצוא את האורך של המערך החדש וכן לקבל את הערך של חלק מהאיברים שלו:
    myArray.length;
    myArray[0]; // the first item in the array
    myArray[1]; // the second item in the array
    myArray[myArray.length-1]; // the last item in the array
  4. ניתן כמובן גם להמיר מערך למחרוזת באמצעות שימוש במתודה join(). נסו את הקוד הבא:
    let myNewString = myArray.join(',');
    myNewString;
  5. דרך נוספת של המרת מערך למחרוזת נוכל לעשות באמצעות שימוש במתודה toString().
  6. המתודה ()toString הרבה יותר פשוטה מאשר ()join שכן היא לא מקבלת שום פרמטר/ארגומנט, אך יש לה מספר הגבלות. עם המתודה ()join אנחנו יכולים להגדיר איזה תו אנחנו נרצה שיפריד בין התווים במחרוזת. נסו לדוגמא להריץ שוב את שורה מספר 4, אך עם תו מפריד אחד כמו / או -.
    let dogNames = ['Rocket','Flash','Bella','Slugger'];
    dogNames.toString(); //Rocket,Flash,Bella,Slugger

הוספה והסרה של איברים במערך

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

let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];

על מנת להוסיף איבר לסוף של מערך אנחנו משתמשים במתודות push() ובמתודה pop() להסיר איבר מסוף המערך.

  1. ננסה תחילה את המתודה ()push — שימו לב שאנחנו צריכים לכלול איבר אחד או יותר כארגומנט/פרמטר למתודה זו, אשר אותו נרצה להכניס לסוף המערך:
    myArray.push('Cardiff');
    myArray;
    myArray.push('Bradford', 'Brighton');
    myArray;
    
  2. כשאנו מבצעים את המתודה הזו, אנו מקבלים כערך מוחזר את ה-length החדש של המערך, לאחר ההוספה. אם נרצה לשמור את ה-length החדש, אנחנו נצטרך לשמור אותו במשתנה חדש:
    let newLength = myArray.push('Bristol');
    myArray;
    newLength;
  3. הסרה של האיבר האחרון במערך מתבצע באמצעות המתודה ()pop על המערך. נסו את הקוד הבא:
    myArray.pop();
  4. האיבר האחרון במערך הוסר, והערך המוחזר של המתודה זו היא האיבר האחרון שהוסר. על מנת לשמור את האיבר הזה במשתנה חדש, ניתן לרשום את הקוד הבא:
    let removedItem = myArray.pop();
    myArray;
    removedItem;

unshift() וכן shift() עובדות בדיוק אותו הדבר כמו ש-()push ו- ()pop, בהתאמה, למעט העבודה שהן מוסיפות/מסירות איברים מתחילת המערך ולא מסופו.

לתשומת לב:push() ו- pop() המתודות משנות את מערך המקור.

  1. מתודת ()unshift — הזינו את הקוד הבא לקונסולה:
    myArray.unshift('Edinburgh');
    myArray;
  2. מתודת ()shift— הזינו את הקוד הבא לקונסולה:
    let removedItem = myArray.shift();
    myArray;
    removedItem;

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

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

  1. מתחת להערה number 1 // יש מספר של מחרוזות, כאשר כל אחת כוללת שם של מוצר והמחיר שלו, מופרדים על ידי הסימן ;. אנו נרצה שתהפכו את המחרוזות הללו למערך ותאחסנו אותו במשתנה שנקרא products.
  2. בשורה שבה נמצאת העקב number 2 // נמצאת לולאת ה-for שלנו. בשורה זו יש כרגע i <= 0, שזהו מבחן תנאי אשר גורם ל-for loop לרוץ רק פעם אחת, מכיוון שבפועל הוא ״תפסיק לרוץ כאשר i לא קטן יותר או שווה ל-0״, ו-i מתחיל ב-0. אנו נרצה שתחליפו את התנאי זה בקוד אחר כך שהלולאה תפסיק לרוץ כאשר i לא יהיה קטן יותר מהאורך של products.
  3. מתחת להערה number 3 // אנו רוצים שתכתבו קוד שמפצל את האיבר הנוכחי במערך (name:price) ל-2 איברים נפרדים - אחד כולל את שם הפריט ואחד הכולל את מחירו. אם אתם לא בטוחים איך לבצע זאת, ראו מתודות שימושיות של מחרוזות והעמיקו בחלק המרה בין מחרוזות ומערכים של מאמר זה.
  4. כחלק מהקוד למעלה, אולי גם נרצה להמיר את המחירים ממחרוזת למספר. אם אתם לא זוכרים כיצד לבצע זאת, קיראו את המאמר הבא, בחלק של ״מספרים מול מחרוזות״.
  5. בראשית הקוד הנוכחי קיים משתנה שנקרא total אשר הוצהר והושם לו ערך של 0. בתוך הלולאה (מתחת number 4 //) אנו נרצה שתוסיפו שורת קוד שמוסיפה את האיבר שמייצג את המחיר הנוכחי למשתנה total בכל ריצה של הלולאה, כך שבסוף, המחיר הכולל (total)יודפס לחשבונית. אולי תרצו לחזור ולעיין ב-אופרטורים להשמה על מנת לעשות זאת.
  6. בנוסף, נרצה שתשנו את השורה שמתחת להערה // number 5// כך שהמשתנה itemText יהיה בצורת כתיבה הזו לכל איבר ל-"current item name — $current item price", לדוגמא: "Shoes — $23.99" , כך שהמידע יוצג בתצורה הזו על גבי החשבונית. שימו לב שמדובר באיחוד של מחרוזות, לא משהו מורכב מדי שלא למדנו כבר.

למידה עצמאית: 5 החיפושים האחרונים

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

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

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

על מנת להשלים את המשימה, הנכם נדרשים:

  1. להוסיף שורת מתחת להערה number 1// שמוסיפה את הערך הנוכחי שהוזן לתיבת החיפוש לתוך תחילת המערך. ניתן למצוא את הערך שהוזן לתיבת החיפוש באמצעות searchInput.value.
  2. הוסיפו מתחת להערה number 2// שורת קוד שמסירה את הערך שנמצא כרגע בסוף המערך.

לסיכום

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

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

ראו גם

  • Indexed collections — מדריך מתקדם למערכים ודומיהם - כמו מערכים (typed arrays).
  • Array — דף ההסבר המורחב באתר זה בנושא Array — להעמקה נוספת ולהסברים נוספים בנושא המאפיינים של מערכים.

במודול זה

Document Tags and Contributors

Contributors to this page: ItzikDabush
Last updated by: ItzikDabush,