פרק 3: Arrays (מערכים) ב-JavaScript

1. מה זה מערך?

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

איך נראה מערך?

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

דוגמה בסיסית:

let fruits = ["Apple", "Banana", "Orange"];

במקרה הזה, המערך fruits מכיל שלושה אלמנטים:

  • "Apple" (אינדקס 0)
  • "Banana" (אינדקס 1)
  • "Orange" (אינדקס 2)

2. איך ניגשים לאלמנטים במערך?

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

דוגמה:

let fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[0]); // מציג "Apple"
console.log(fruits[1]); // מציג "Banana"
console.log(fruits[2]); // מציג "Orange"

הסבר:

  • fruits[0] מחזיר את הפריט הראשון במערך (במקרה הזה "Apple").
  • fruits[1] מחזיר את הפריט השני, וכך הלאה.

3. שינוי ערכים במערך

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

דוגמה:

let fruits = ["Apple", "Banana", "Orange"];
fruits[1] = "Mango"; // מחליף את "Banana" ב-"Mango"

console.log(fruits); // מציג ["Apple", "Mango", "Orange"]

הסבר:

  • השורה fruits[1] = "Mango"; משנה את הערך באינדקס 1 מ-"Banana" ל-"Mango".

4. הוספת אלמנטים למערך

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

דוגמה:

let fruits = ["Apple", "Banana"];
fruits.push("Orange"); // מוסיף את "Orange" לסוף המערך

console.log(fruits); // מציג ["Apple", "Banana", "Orange"]

הסבר:

  • push("Orange") מוסיף את הערך החדש לסוף המערך.

הוספת אלמנטים לתחילת המערך:

אפשר גם להוסיף אלמנט לתחילת המערך באמצעות הפונקציה unshift().

let fruits = ["Banana", "Orange"];
fruits.unshift("Apple"); // מוסיף את "Apple" לתחילת המערך

console.log(fruits); // מציג ["Apple", "Banana", "Orange"]

5. הסרת אלמנטים ממערך

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

  • pop(): מסיר את האלמנט האחרון במערך.
  • shift(): מסיר את האלמנט הראשון במערך.

דוגמה:

let fruits = ["Apple", "Banana", "Orange"];
fruits.pop(); // מסיר את "Orange"

console.log(fruits); // מציג ["Apple", "Banana"]

fruits.shift(); // מסיר את "Apple"

console.log(fruits); // מציג ["Banana"]

הסבר:

  • pop() מסיר את האלמנט האחרון.
  • shift() מסיר את האלמנט הראשון.

6. אורך המערך (length)

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

דוגמה:

let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.length); // מציג 3

הסבר:

  • השימוש ב-fruits.length מחזיר את מספר הפריטים במערך (במקרה הזה 3).

7. לולאות ומערכים

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

דוגמה ללולאת for:

let fruits = ["Apple", "Banana", "Orange"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]); // מציג כל פריט במערך
}

הסבר:

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

דוגמה עם לולאת for...of:

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

let fruits = ["Apple", "Banana", "Orange"];

for (let fruit of fruits) {
    console.log(fruit); // מציג כל פרי
}

הסבר:

  • לולאת for...of עוברת ישירות על כל ערך במערך.

8. מערכים רב-ממדיים (Nested Arrays)

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

דוגמה למערך דו-ממדי:

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[0][0]); // מציג 1
console.log(matrix[1][2]); // מציג 6

הסבר:

  • המערך matrix מכיל שלושה מערכים, כל אחד מייצג שורה במטריצה.
  • matrix[0][0] גישה לאלמנט בשורה הראשונה, עמודה ראשונה.
  • matrix[1][2] גישה לאלמנט בשורה השנייה, עמודה שלישית.

9. דוגמה מלאה: עבודה עם מערכים

נבנה דוגמה מלאה שמשתמשת במערך לניהול רשימת משימות.

let tasks = ["Buy groceries", "Clean the house", "Pay bills"];

// הוספת משימה חדשה
tasks.push("Call the bank");
console.log("Tasks after adding a new one:", tasks);

// הסרת המשימה האחרונה
tasks.pop();
console.log("Tasks after removing the last one:", tasks);

// מעבר על המשימות והדפסת כל משימה
for (let task of tasks) {
    console.log("Task:", task);
}

// מספר המשימות שנותרו
console.log("Total tasks:", tasks.length);

הסבר:

  • תחילה יצרנו רשימה של משימות.
  • הוספנו משימה חדשה עם push.
  • הסרנו את המשימה האחרונה עם pop.
  • עברנו על המשימות עם לולאת for...of והדפסנו כל משימה.
  • לבסוף, הדפסנו את מספר המשימות שנותרו במערך באמצעות length.

סיכום

בפרק זה למדנו על:

  1. יצירת מערכים ב-JavaScript.
  2. גישה לערכים במערך ושינוי ערכים.
  3. הוספה והסרה של אלמנטים ממערכים.
  4. שימוש בלולאות לעבודה עם מערכים.
  5. מערכים רב-ממדיים ודינמיות של מערכים.

בפרק הבא נעמיק באיך Manipulating Arrays (מניפולציות על מערכים), ונראה איך לבצע פעולות מורכבות יותר על מערכים בעזרת פונקציות נוספות כמו map, filter ו-reduce.

Scroll to Top
דילוג לתוכן