פרק 4: מניפולציות על מערכים (Manipulating Arrays) ב-JavaScript

בפרק הקודם למדנו כיצד ליצור מערכים, לגשת לאיברים בהם, ולהוסיף או להסיר אלמנטים. בפרק הזה נלמד איך לבצע (מניפולציות על מערכים) פעולות מתקדמות יותר על מערכים באמצעות מספר פונקציות מובנות של JavaScript, כמו map, filter, reduce ועוד.

1. הפונקציה map()

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

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

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
    return number * 2;
});

console.log(doubledNumbers); // מציג [2, 4, 6, 8, 10]

הסבר:

• map() עוברת על כל איבר במערך numbers ומכפילה אותו ב-2.
• היא מחזירה מערך חדש עם התוצאות: [2, 4, 6, 8, 10].

דוגמה נוספת עם פונקציית חץ:

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(num => num ** 2);

console.log(squaredNumbers); // מציג [1, 4, 9, 16, 25]

2. הפונקציה filter()

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

דוגמה:

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers); // מציג [2, 4, 6]

הסבר:

• filter() עוברת על כל איבר במערך numbers ושומרת רק את האיברים שמתחלקים ב-2 (מספרים זוגיים).
• המערך המתקבל הוא [2, 4, 6].

דוגמה עם פונקציית חץ:

let numbers = [10, 15, 20, 25, 30];
let greaterThan20 = numbers.filter(num => num > 20);

console.log(greaterThan20); // מציג [25, 30]

3. הפונקציה reduce()

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

דוגמה לחישוב סכום המספרים במערך:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(total, number) {
    return total + number;
}, 0);

console.log(sum); // מציג 15

הסבר:

• reduce() עוברת על כל איבר ומצרפת אותו לסכום הכולל (total), שהתחיל ב-0.
• התוצאה הסופית היא 15, שהוא סכום כל האיברים במערך.

דוגמה נוספת עם פונקציית חץ:

let numbers = [10, 20, 30];
let total = numbers.reduce((acc, num) => acc + num, 0);

console.log(total); // מציג 60

4. הפונקציה forEach()

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

דוגמה:

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

fruits.forEach(function(fruit) {
    console.log(fruit);
});

// פלט:
// Apple
// Banana
// Orange

הסבר:

• forEach() עוברת על כל אלמנט במערך fruits ומדפיסה אותו.
• אין החזרה של מערך חדש כמו ב-map או filter.

5. הפונקציה find()

find() מחפשת את האלמנט הראשון במערך שעומד בתנאי מסוים ומחזירה אותו. אם לא נמצא אף אלמנט שעומד בתנאי, היא מחזירה undefined.

דוגמה:

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(function(number) {
    return number > 10;
});

console.log(found); // מציג 12

הסבר:

• find() מחפשת את האלמנט הראשון במערך שגדול מ-10. במקרה הזה, האלמנט הראשון שעומד בתנאי הוא 12.

6. הפונקציה some() ו-every()

• some() בודקת אם לפחות אלמנט אחד במערך עומד בתנאי מסוים.
• every() בודקת אם כל האלמנטים במערך עומדים בתנאי מסוים.

דוגמה ל-some():

let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function(number) {
    return number % 2 === 0;
});

console.log(hasEvenNumber); // מציג true (יש מספר זוגי במערך)

דוגמה ל-every():

let numbers = [2, 4, 6, 8];
let allEven = numbers.every(function(number) {
    return number % 2 === 0;
});

console.log(allEven); // מציג true (כל המספרים זוגיים)

7. הפונקציה concat()

concat() מחברת שני מערכים או יותר למערך אחד חדש.

דוגמה:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = arr1.concat(arr2);

console.log(combined); // מציג [1, 2, 3, 4, 5, 6]

הסבר:

• הפונקציה concat() מחברת את המערכים arr1 ו-arr2 למערך חדש המורכב מהאלמנטים של שניהם.

8. הפונקציה slice()

slice() מחזירה חלק מהמערך לפי טווח של אינדקסים מסוים.

דוגמה:

let numbers = [10, 20, 30, 40, 50];
let sliced = numbers.slice(1, 3);

console.log(sliced); // מציג [20, 30]

הסבר:

• slice(1, 3) מחזירה את האלמנטים בין האינדקסים 1 ל-3 (לא כולל 3).

9. הפונקציה splice()

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

דוגמה להסרת אלמנטים:

let numbers = [10, 20, 30, 40, 50];
numbers.splice(2, 1); // מתחיל באינדקס 2 ומסיר 1 אלמנט

console.log(numbers); // מציג [10, 20, 40, 50]

דוגמה להוספת אלמנטים:

let numbers = [10, 20, 40, 50];
numbers.splice(2, 0, 30); // מוסיף את 30 באינדקס 2

console.log(numbers); // מציג [10, 20, 30, 40, 50]

הסבר:

• splice(2, 1) מסיר את האלמנט במקום השני (30).
• splice(2, 0, 30) מוסיף את המספר 30 באינדקס 2 מבלי להסיר שום אלמנט (0 אומר שלא מסירים אלמנטים).

דוגמה מלאה: שימוש בפונקציות מניפולציה על מערכים

נבנה דוגמה שמשתמשת בכמה מהפונקציות שלמדנו:

let numbers = [1, 2, 3, 4, 5];

// הוספת מספרים למערך
numbers.push(6);
console.log("After push:", numbers); // [1, 2, 3, 4, 5, 6]

// סינון המספרים הזוגיים
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log("Even numbers:", evenNumbers); // [2, 4, 6]

// חישוב סכום כל המספרים
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log("Sum of numbers:", sum); // 21

// הכפלת כל המספרים פי 2
let doubledNumbers = numbers.map(num => num * 2);
console.log("Doubled numbers:", doubledNumbers); // [2, 4, 6, 8, 10, 12]

הסבר:

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

סיכום

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

1. איך לבצע מניפולציות על מערכים עם פונקציות כמו map, filter, reduce ועוד.
2. איך להוסיף, להסיר ולערוך אלמנטים במערך עם push, pop, splice, ועוד.
3. איך לבצע סינון או צמצום של מערכים בעזרת filter ו-reduce.

בפרק הבא נעמיק בנושא Operators (אופרטורים) ב-JavaScript