מניפולציות מתקדמות למערכים
מערכי JavaScript הם מבני נתונים רבי עוצמה המגיעים עם מגוון מתודות למניפולציה מתקדמת. הבנת המתודות הללו תעזור לך לכתוב קוד יעיל וקריא יותר.
להבנה טובה יותר של פרק זה, נמליץ לערוך תחילה היכרות בסיסית לנושא מערכים בג'אווה סקריפט ולנושא פונקציות בג'אווה סקריפט.
נתחיל תחילה בהבנה של המונח מתודה (Method). מתודה היא פונקציה ששייכת לאובייקט כלשהו, כגון מערך.
דוגמה:
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName());
// Output: "John Doe"בדוגמה זו, הגדרנו את האובייקט person הממדל אדם. לאובייקט זה קיימת המתודה fullName שהיא למעשה פונקציה שמחזירה את השם המלא של האדם. המתודה fullName ניגשת למאפיינים firstName ו-lastName של האובייקט person ומחזירה שירשור שלהם. קריאה למתודה נעשית באמצעות שם האובייקט ולאחריו נקודה ולאחריה שם המתודה עם סוגריים. בצורה כזו קראנו למתודה fullName והדפסנו לקונסול את ערך החזרה שלה.
מתודות יכולות גם לקבל פרמטרים.
דוגמה:
const person = {
firstName: "John",
lastName: "Doe",
fullName: function(separator = " ", title = "") {
return title + this.firstName + separator + this.lastName;
}
};
console.log(person.fullName());
// Output: "John Doe"
console.log(person.fullName(", "));
// Output: "John, Doe"
console.log(person.fullName(" ", "Mr. "));
// Output: "Mr. John Doe"בדוגמה זו, המתודה fullName מקבלת 2 פרמטרים, הראשון הוא separator המייצג סימן מפריד והשני title המייצג כותרת.
פרמטרים למתודות יכולים להיות גם פונקציות.
דוגמה:
const person = {
firstName: "John",
lastName: "Doe",
fullName: function(separator = " ", title = "", formatter = null) {
let name = title + this.firstName + separator + this.lastName;
if (typeof formatter === 'function') {
name = formatter(name);
}
return name;
}
};
// Example without a formatter function
console.log(person.fullName());
// Output: "John Doe"
// Example with a custom separator
console.log(person.fullName(", "));
// Output: "John, Doe"
// Example with a title
console.log(person.fullName(" ", "Mr. "));
// Output: "Mr. John Doe"
// Example with a formatter function to convert the name to uppercase
console.log(person.fullName(" ", "Mr. ", function(name) {
return name.toUpperCase();
}));
// Output: "MR. JOHN DOE"
// Example with a formatter function to reverse the name
console.log(person.fullName(" ", "Mr. ", function(name) {
return name.split("").reverse().join("");
}));
// Output: "eod nhoj .rM"בדוגמה זו, המתודה fullName מקבלת 3 פרמטרים: הראשון separator כמו קודם, השני title כמו קודם והשלישי פונקציה בשם formatter. בקריאה למתודה fullName, ניתן להעביר כפרמטר שלישי פונקציה שתופעל על מחרוזת השם לפני החזרתה.
בדוגמה לעיל, ראינו מתודה של אובייקט שאנחנו יצרנו. אחרי שהבנו איך עובדים עם מתודות, נסקור מתודות שימושיות למערכים בג'אווה סקריפט.
המתודה forEach
המתודה forEach מקבלת כפרמטר פונקציה, מבצעת מעבר סדרתי על כל איברי המערך ולכל איבר מפעילה עליו את הפונקציה.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
console.log(number * 2);
});
// Output: 2, 4, 6, 8, 10המתודה map
המתודה map ממפה מערך קיים, כלומר, היא יוצרת מערך חדש המאוכלס בתוצאות של קריאה לפונקציה שסופקה בכל אלמנט במערך הקריאה.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled);
// Output: [2, 4, 6, 8, 10]המתודה filter
המתודה filter מסננת מערך קיים, כלומר, היא יוצרת מערך חדש עם כל האיברים שעברו את הבדיקה המיושמת על ידי הפונקציה שסופקה.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);
// Output: [2, 4]המתודה reduce
המתודה reduce מצמצמת מערך קיים, כלומר, מפעילה פונקציית צמצום עבור כל האיברים של המערך, וכתוצאה מכך מחזירה ערך פלט יחיד.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);
// Output: 15המתודה reduceRight
המתודה reduceRight דומה למתודה reduce וגם היא מצמצמת מערך לערך פלט יחיד. עם זאת, סריקת איברי המערך המקורי נעשית בסדר הפוך (מהסוף להתחלה).
דוגמה:
const words = ["The", "quick", "brown", "fox"];
const sentence = words.reduce((accumulator, currentValue) => {
return accumulator + " " + currentValue;
});
console.log(sentence); // Output: "The quick brown fox"
const reverseSentence = words.reduceRight((accumulator, currentValue) => {
return accumulator + " " + currentValue;
});
console.log(reverseSentence); // Output: "fox brown quick The"המתודה find
המתודה find מחפשת איבר במערך, כלומר, מחזירה את הערך של האיבר הראשון במערך שעונה על פונקציית הבדיקה שסופקה.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven);
// Output: 2המתודה findIndex
המתודה findIndex כמו find, מחפשת גם היא את האיבר הראשון במערך שעונה על פונקציית הבדיקה שסופקה. עם זאת, היא מחזירה את האינדקס של אותו האיבר ולא את האיבר עצמו.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenIndex);
// Output: 1המתודה includes
המתודה includes בודקת אם איבר כלשהו נמצא במערך ומחזירה true או false בהתאם.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
const hasFour = numbers.includes(4);
console.log(hasFour);
// Output: trueהמתודה sort
המתודה sort ממיינת את האיברים של המערך ומחזירה את המערך. המיון מבוסס על פונקציית מיון שמסופקת.
כמה דגשים:
- המערך המקורי עצמו עובר מיון, ולא רק העותק המוחזר.
- סדר המיון המוגדר כברירת מחדל הוא עולה.
- כבסיס להשוואת האיברים במערך, כל האיברים מומרים תחילה למחרוזות.
דוגמה:
const numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);
// Output: [1, 2, 3, 4, 5]נשים לב לפונקציית המיון שעשינו בה שימוש. פונקציה זו מקבלת 2 איברים a ו-b ומחזירה את החיסור a - b. לפי תוצאת החיסור אנו משווים מי גדול יותר, a או b: אם ערך החיסור חיובי אז a > b, אם ערך החיסור שלילי אז a < b, ואם ערך החיסור הוא אפס אז a = b.
המתודה some
המתודה some בודקת אם לפחות איבר אחד במערך עובר את הבדיקה המיושמת על ידי הפונקציה שסופקה, ומחזירה true או false בהתאם.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(number => number % 2 === 0);
console.log(hasEven);
// Output: trueהמתודה every
המתודה every בודקת אם כל האיברים במערך עוברים את הבדיקה המיושמת על ידי הפונקציה שסופקה, ומחזירה true או false בהתאם.
דוגמה:
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every(number => number % 2 === 0);
console.log(allEven);
// Output: trueהמתודה flat
המתודה flat משטחת מערך רב מימדי, כלומר, יוצרת מערך חדש עם כל רכיבי המשנה המשורשרים לתוכו באופן רקורסיבי עד לעומק שצוין.
דוגמה:
const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flatArray = nestedArray.flat(2);
console.log(flatArray);
// Output: [1, 2, 3, 4, 5, 6]המתודה flatMap
המתודה flatMap ממפה תחילה כל אלמנט באמצעות פונקציית מיפוי, ולאחר מכן משטחת את התוצאה למערך חדש. למעשה, ביצוע המתודה דומה לביצוע המתודה map ולאחריה המתודה flat בעומק 1.
דוגמה:
const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result);
// Output: [1, 2, 2, 4, 3, 6, 4, 8]המתודה entries
המתודה entries מחזירה מערך של רשומות (צמדי מפתח-ערך) למערך נתון.
דוגמה:
const arr = ['a', 'b', 'c'];
const iterator = arr.entries();
console.log(iterator); // [[1, 'a'], [2, 'b'], [3, 'c']]
for (let [index, value] of iterator) {
console.log(index, value); // 0 'a', 1 'b', 2 'c'
}המתודה keys
המתודה keys מחזירה מערך של המפתחות למערך נתון.
דוגמה:
const arr = ['a', 'b', 'c'];
const iterator = arr.keys();
for (let key of iterator) {
console.log(key);
}
// Output: 0, 1, 2המתודה values
המתודה values מחזירה מערך של הערכים למערך נתון.
דוגמה:
const arr = ['a', 'b', 'c'];
const iterator = arr.values();
for (let value of iterator) {
console.log(value);
}
// Output: 'a', 'b', 'c'שירשור מתודות במערכים
ניתן לשרשר מתודות של מערך יחד, כדי לבצע פעולות מורכבות בצורה קריאה ותמציתית יותר.
דוגמה:
const numbers = [1, 2, 3, 4, 5];
const result = numbers
.filter(number => number % 2 === 0) // Filter even numbers
.map(number => number * 2) // Double each even number
.reduce((sum, number) => sum + number, 0); // Sum the doubled numbers
console.log(result);
// Output: 12
