מצב תצוגה
מה הם מערכים?
בפרק על משתנים למדנו שמשתנים הם כמו תיקייה. תיקייה היכולה להכיל מידע מכל סוג שהוא: מספר, אמת \ שקר או מחרוזת.
מערכים הם כשמם "מערך של משתנים מחוברים" כך שאם משתנה הוא תיקייה יחידה מערך הוא תיקיית דפדפת. כך בגישה אל משתנה יחיד שהוגדר כמערך ניתן לגשת לכלל המשתנים הזמינים בתוך המערך.
ציור של משתנה יחיד – מול מערך המכיל מספר גדול של תיקיות
כל משתנה במערך נקרא איבר. הגישה לאיברים במערך מתבצעת דרך אינדקס. האינדקס או מספר סידורי הוא מעין מספר זהות עבור איבר ספציפי. במחשבים מתחילים לספור מאפס, כך שהאיבר הראשון במערך מקבל את האינדקס 0
הבא אחריו 1
וכן הלאה. כך המערך array
שמכיל מספר שונה בכל אחד מאבריו יראה כך:
ציור של מערך המכיל 4 משתנים מספריים כאשר מתחת לכל אחד יש אינדקס.
ניתן ליצור מערך בכמה דרכים:
javascript
let a = [];
a.push(1);
a.push(2);
a.push(3);
let b = [1,2,3]
console.log(a);
console.log(b);
בשורה הראשונה הגדרנו את המשתנה a
כמערך ריק. בשורות העוקבות השתמשנו במתודה push
להוסיף איבר אחד בכל פעולה למערך. בהמשך הוגדר המשתנה b
גם הוא כמערך, אך כאן נעשה שימוש בהצבת אתחול שבו מגדירים את המערך ואבריו בפעולה אחת.
ניתן לראות שערכם של שני המערכים זהה.
חשוב לדעת שאומנם נעשה שימוש באיברים עם ערך שונה אך ניתן ליצור מערך כאשר כל האיברים שלו שווים. כמו כן ניתן להשתמש במתודה push
ולהוסיף איברים נוספים למערך גם במקרה והמערך הוגדר כקבוע וגם במקרה בו נעשה שימוש בהצבת אתחול. לדוגמה:
javascript
let array = [1,1,1,1,1]
array.push(1);
console.log(array);
הפלט יהיה המספר 1 בתוך מערך 6 פעמים ברציפות.
המתודה push
מוסיפה איבר אחד נוסף לסוף המערך. המתודה pop
שאינה מקבלת ארגומנט כל שהוא מבצעת בדיוק ההפך. המתודה pop
מחזירה את האיבר האחרון במערך תוך-כדי שהיא מוחקת אותו מהמערך. בדוגמה הבאה ניתן לראות שלפני השימוש במתודה pop
המערך מכיל את הערכים 1 עד 4, לאחריה, המערך מכיל רק את הערכים 1 עד 3 כיוון שהערך האחרון נשלף והוצב במשתנה popIt
javascript
let array = [1,2,3,4]
console.log(array);
let popIt = array.pop();
console.log(array);
console.log(popIt);
מה השימושיות של מערכים?
מערכים הם כלי חשוב מאוד לכל תוכנה בגלל היכולת שלהם לאגד כמויות מידע במקום אחד. דוגמאות לשימוש במערכים:
- רשימה של כל השגיאות האפשריות במערכת.
- מספרי ההזמנות של לקוח.
- רשימה התגובות של פוסט. (כן, מערך לא מוגבל לערכים פשוטים אלא גם לערכים מורכבים)
- וכן.. מערכים נוספים.
מערכים רב ממדיים
כל איבר במערך יכול להכיל את כל סוגי הטיפוסים ואפילו מערך נוסף. מערך המכיל מערכים נוספים נקרא מערך רב-ממדי, כיוון שהוא גדל מעבר לממד הראשון בו יש רק דור אחד של איברים לשני ממדים ויותר. בדוגמה הבאה המערך מכיל 10 איברים כאשר כל איבר הוא בעצמו מערך לעוד 10 איברים. בסוף הדוגמה אנו מדפיסים את האיבר הרביעי (מערכים מתחילים מ-0 כזכור) שהוא עצמו נמצא בתוך האיבר השלישי בממד הראשון
javascript
let a = [];
a[0] = [1,2,3,4,5,6,7,8,9,10];
a[1] = [1,2,3,4,5,6,7,8,9,10];
a[2] = [1,2,3,4,5,6,7,8,9,10];
a[3] = [1,2,3,4,5,6,7,8,9,10];
a[4] = [1,2,3,4,5,6,7,8,9,10];
a[5] = [1,2,3,4,5,6,7,8,9,10];
a[6] = [1,2,3,4,5,6,7,8,9,10];
a[7] = [1,2,3,4,5,6,7,8,9,10];
a[8] = [1,2,3,4,5,6,7,8,9,10];
a[9] = [1,2,3,4,5,6,7,8,9,10];
console.log(a[2][3]);
console.log(a);
האם המשתנה הוא מערך?
יהיו מקרים בהם יהיה הצורך לוודאות האם משתנה מסוים הוא מערך. לשם כך ניתן להשתמש במתודה isArray
של האובייקט Array
. במקרה והמשתנה הוא מערך המתודה תחזיר true
.
javascript
let a = [];
console.log( Array.isArray(a) );
מניפולציות במערכים
למשתנים מטיפוס מערך יש מתודות רבות. את המתודה push
להוספת איברים למערך והמתודה pop
לשליפת האיבר האחרון במערך כבר הכרנו. הנה עוד מתודות נפוצות בשימוש עם מערכים.
המתודה fill
:
מתודה זו ממלאת את כל האיברים במערך במידע שמועבר לה כארגומנט. בדוגמה הבאה המערך a
שווה למספרים 1-4 אך לאחר השימוש במתודה fill כל אבריו יהיו שווים למספר 3.
javascript
let a = [1,2,3,4];
a.fill(3);
console.log( a );
ניתן גם להעביר כארגומנטים את מספר האיבר ממנו יתחיל "המילוי" ואת מספר האיבר בו הוא יסתיים. כך בדוגמה הבאה נחליף רק את שני האיברים האחרונים עם הערך 3.
javascript
let a = [1,2,3,4];
a.fill(3 , 3 , 4);
console.log( a );
המתודה flat
:
מתודה זו "משטחת" את המערך ותנסה להפוך מערך דו-ממדי ומעלה למערך חד-ממדי. בדוגמה ניתן לראות כיצד האיבר האחרון במערך שהוא עצמו מערך "שוטח" והערכים שבתוכו 5 ו-6 הפכו איברים במערך העליון יותר.
javascript
let a = [1,2,3,4, [5,6]];
console.log( a.flat() );
המתודה join
:
מתודה זו מחברת יחדיו את כל איברי המערך למחרוזת אחת. כך שמערך המכיל את הספרות 1-4 יוחזר כמחרוזת ’1,2,3,4’
. ארגומנט ברירת המחדל הקיים במתודה זו שווה לסימן פסיק. סימן הפסיק הזה יוזן בין הספרות כמו בדוגמה הבאה:
javascript
let a = [1,2,3,4];
console.log(a.join());
אפשר להעביר כארגומנט למתודה join
כל סמל שנרצה. במקרה ולא נרצה שום סמל נעביר מחרוזת ריקה
javascript
let a = [1,2,3,4];
console.log(a.join(‘’));
המתודה join
ניתנת לקריאה על כל משתנה שהוא מערך. כך שניתן לשלב מתודות אחת אחרי השנייה כל עוד הטיפוס זהה. לדוגמה נקרא למתודה join
לאחר שנקרא למתודה flat
המשטחת את המערך.
javascript
let a = [1,2,3,4,5,6];
console.log(a.flat().join('-'));
המתודה forEach
:
מתודה זו מקבלת כארגומנט פונקציה. הפונקציה מקבלת כארגומנט את האיבר הנוכחי במערך. כאשר הפונקציה הנשלחת אל המתודה forEach
תרוץ כמספר האיברים הקיימים במערך. בדוגמה הבאה למערך יש 6 איברים. בכזה מקרה המתודה forEach
תרוץ שש פעמים. בכל פעם המתודה תקרא לפונקציה אותה העברנו כארגומנט עם הערך של האיבר הנוכחי, זה מה שיקרה: דיאגרמה המציגה את שלושת הסיבובים וקטע הקוד לדוגמה הוא:
javascript
let a = [1,2,3,4,5,6];
a.forEach(function (v) {
console.log("value: " + v);
});
פעולה כזו נקראת לולאה ונלמד עליה יותר לעומק בפרק על לולאות. מה שחשוב לראות שהשורה המדפיסה את ערך המשתנה v רצה שש פעמים ובכל פעם היה לה את הערך של האיבר הבא בתור.
המתודה map
:
מתודה זו בדומה למתודה forEach
עוברת על כל איברי המערך. ההבדל בין המתודות הוא שמתודה זו מחזירה ערך חדש עבור כל סיבוב בו היא רצה. הערך הסופי יוצב במשתנה שיקבל את הערך של המתודה map
. כך בדוגמה הבאה בשורה השלישית אנו מציבים את הערך של המתודה map
בתוך המשתנה a
בעצמו, כך אנו דורסים את הערך הישן עם הערך החדש אותו מיפנו (מכאן שמה של המתודה map
). בדוגמה ניתן לראות שכאשר אנו עוברים על כל איבר במערך אנו מחזירים אותו כפול 2.
javascript
let a = [1,2,3,4,5,6];
a = a.map(function (v,k) {
return v * 2;
});
console.log(a);
סטים
כבר בתחילת הפרק ציינו שערכו של כל איבר במערך יכול להיות כל דבר. כיוון שכך אפילו כל איברי המערך יכולים להכיל את אותו הערך. בדוגמה הבאה ניתן לראות שכל איבריו (לבד מהאחרון) של המערך a
מכילים את הערך 1:
javascript
let a = [1,1,1,1,1,1,2];
console.log(a);
ברוב המקרים פעולה זו מצוינת והיא מתארת בדיוק את שנרצה להשיג. אך במקרים בהם נרצה שהמערך לא יוכל להכיל ערכים כפולים נשתמש בסט Set
. סט הוא אובייקט שברגע שמוסיפים אליו ערך שכבר קיים הוא פשוט מתעלם ממנו. כך אפשר להיות בטוחים שבמקרה ונשתמש בסט כל אבריו יהיו שונים אחד מהשני.
בדוגמה הבא אנו מגדירים את המשתנה a
כסט חדש (מילת המפתח new
שייכת ל-OOP ונלמד עליה בהמשך). לפני שנדפיס את ערך הסט נשתמש במתודה Array.from
המנסה להמיר את כל אובייקט – במקרה שלנו את הסט – למערך רגיל.
javascript
let a = new Set([1,1,1,1,1,1,1,2]);
console.log( Array.from(a) );
ניתן לראות שכל האיברים הכפולים הוסרו וקיבלנו חזרה מערך מתומצת.
אז למה שלא נשתמש רק בסטים?
סטים הם לא מערכים. וכפי שאנו רואים יש צורך להשתמש במתודה Array.from
ולהעביר אליה את הסט כארגומנט, רק אז יתקבל בחזרה משתנה מטיפוס מערך. הסיבה היא שמערכים נועדו לעבוד במהירות ומכניקת סינון הבודקת לערכים כפולים מאטה את המנגנון שלהם. כך שבשלב איסוף המידע נשתמש בסטים אך בשלב בו נצטרך לבצע מניפולציה בנתונים נמיר את הסט למערך. מכאן התהליך ממשיך כרגיל.