מדריך מקיף למערכים ב- JavaScript: מתודות ודוגמאות

מערכים (Arrays) הם אחד ממבני הנתונים החשובים והשימושיים ביותר ב-JavaScript. הם מאפשרים אחסון של מספר ערכים במשתנה אחד ומציעים מגוון רחב של מתודות לניהול ועיבוד הנתונים.

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

מבוא למערכים ב-JavaScript

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

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

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

1. כיצד ליצור מערך ב-JavaScript?

יצירת מערך ב-JavaScript נעשית באמצעות שימוש בסוגריים מרובעים. מערכים יכולים לכלול סוגים שונים של ערכים, כגון מחרוזות (strings), מספרים, אובייקטים ואפילו מערכים אחרים.

const cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars);
// ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche']

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

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

const cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars.length);
// 8

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

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

const cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[0]);
// Tesla

console.log(cars[4]);
// Ford

4. כיצד לגשת לפריט האחרון במערך?

לגישה לפריט האחרון במערך ניתן להשתמש במאפיין length ולחסר ממנו 1. לחלופין, ניתן להשתמש במתודה at() עם אינדקס שלילי:

const cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// גישה קלאסית
console.log(cars[cars.length - 1]);
// Porsche

// שימוש ב-at() עם אינדקס שלילי
console.log(cars.at(-1));
// Porsche

עבודה עם מערכים ב-JavaScript

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

5. כיצד לרוץ עם לולאה על מערך?

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

const cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

cars.forEach(function(arrayItem, index) {
  console.log(arrayItem, index);
});

// Tesla 0
// Toyota 1
// BMW 2

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

6. כיצד להוסיף פריט לתחילת המערך?

המתודה unshift מאפשרת להוסיף פריט חדש לתחילת המערך.

const cars = ['Tesla', 'Toyota', 'BMW'];

cars.unshift('Mercedes');
console.log(cars);
// ['Mercedes', 'Tesla', 'Toyota', 'BMW']

7. כיצד להסיר פריט מתחילת המערך?

כדי להסיר פריט מתחילת המערך, נשתמש במתודה shift.

const cars = ['Tesla', 'Toyota', 'BMW'];

cars.shift();
console.log(cars);
// ['Toyota', 'BMW']

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

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

const cars = ['Tesla', 'Toyota', 'BMW'];

console.log(cars.indexOf('BMW'));
// 2

מתודות מתקדמות לעבודה עם מערכים

בנוסף למתודות הבסיסיות, קיימות מתודות מתקדמות יותר כמו map, filter ו-find, המאפשרות עיבוד מתקדם של הנתונים במערך.

9. כיצד להוסיף ולהסיר פריטים מסוף המערך?

כדי להוסיף פריט לסוף המערך, נשתמש במתודה push, ולהסרת הפריט האחרון נשתמש במתודה pop.

const cars = ['Tesla', 'Toyota'];

cars.push('BMW');
console.log(cars);
// ['Tesla', 'Toyota', 'BMW']

cars.pop();
console.log(cars);
// ['Tesla', 'Toyota']

10. כיצד לשלב שני מערכים?

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

const cars = ['Tesla', 'Toyota'];
const moreCars = ['Ford', 'BMW'];

// שימוש ב-concat
const combined = cars.concat(moreCars);
console.log(combined);
// ['Tesla', 'Toyota', 'Ford', 'BMW']

// שימוש באופרטור spread
const combined2 = [...cars, ...moreCars];
console.log(combined2);
// ['Tesla', 'Toyota', 'Ford', 'BMW']

11. כיצד להשתמש ב-map לשינוי מערך?

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

const numbers = [1, 2, 3];

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);
// [2, 4, 6]

12. כיצד לסנן פריטים במערך?

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

const cars = ['Tesla', 'Toyota', 'BMW'];

const filtered = cars.filter(function(car) {
  return car.startsWith('T');
});

console.log(filtered);
// ['Tesla', 'Toyota']

13. כיצד לבדוק אם מערך כולל ערך?

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

const cars = ['Tesla', 'Toyota'];

console.log(cars.includes('Toyota'));
// true

console.log(cars.includes('BMW'));
// false

14. כיצד למצוא את הפריט הראשון שעונה על תנאי?

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

const cars = ['Tesla', 'Toyota', 'BMW'];

const found = cars.find(function(car) {
  return car.startsWith('T');
});

console.log(found);
// 'Tesla'

מתודות Non-Mutating למערכים

ב-JavaScript (ES2023) נוספו מתודות שמחזירות מערך חדש במקום לשנות את המערך המקורי. מתודות אלו שימושיות במיוחד בפריימוורקים מודרניים ובניהול state שבו חשוב לשמור על immutability.

המתודה toSorted() עובדת כמו sort() אבל מחזירה מערך ממוין חדש, בלי לשנות את המקורי:

const numbers = [3, 1, 4, 1, 5];

const sorted = numbers.toSorted();
console.log(sorted);
// [1, 1, 3, 4, 5]

console.log(numbers);
// [3, 1, 4, 1, 5] - המערך המקורי לא השתנה

באופן דומה, toReversed() מחזירה עותק הפוך של המערך, ו-with() מחזירה עותק עם החלפה של פריט בודד באינדקס נתון:

const cars = ['Tesla', 'Toyota', 'BMW'];

const reversed = cars.toReversed();
console.log(reversed);
// ['BMW', 'Toyota', 'Tesla']

const updated = cars.with(1, 'Audi');
console.log(updated);
// ['Tesla', 'Audi', 'BMW']

console.log(cars);
// ['Tesla', 'Toyota', 'BMW'] - המערך המקורי לא השתנה

שאלות נפוצות

שאלות נפוצות בנושא מערכים ב-JavaScript:

לסיכום

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

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

למידע נוסף, בקרו ב-MDN Web Docs.