מתודות מערך ב-JavaScript: map, filter, reduce ועוד

למערכים יש ארגז כלים

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

ערכת הבסיס היא שלוש מתודות: map, filter ו-reduce. למדו אותן וכמה מבני הדודים שלהן, והקוד העמוס בלולאות שלכם יתכווץ למשהו שאפשר לסרוק במבט אחד.

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const total = nums.reduce((sum, n) => sum + n, 0);

console.log(doubled);
console.log(evens);
console.log(total);

כל מתודה מקבלת callback ומחזירה משהו. אף אחת מהן לא שינתה את nums, וזה עיקרון שכדאי להפנים מוקדם.

map: שינוי של כל איבר

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

const users = [
    { name: "Ada", age: 36 },
    { name: "Boris", age: 29 },
    { name: "Chen", age: 41 },
];

const names = users.map(user => user.name);
const labels = users.map(user => `${user.name} (${user.age})`);

console.log(names);
console.log(labels);

ה-callback מקבל גם את האינדקס כארגומנט שני, אם צריך אותו: arr.map((item, i) => ...). כשלא צריך, פשוט מתעלמים ממנו.

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

filter: שמירה של מה שמתאים

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

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
    { name: "Chair", price: 90, inStock: true },
];

const available = products.filter(p => p.inStock);
const affordable = products.filter(p => p.price < 50);

console.log(available);
console.log(affordable);

map ו-filter משתרשרות באופן טבעי. קראו את השרשרת משמאל לימין כמו צינור:

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
];

const inStockNames = products
    .filter(p => p.inStock)
    .map(p => p.name);

console.log(inStockNames);

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

reduce: קיפול מערך לערך אחד

reduce היא הכללית מבין השלוש. נותנים לה פונקציית reducer (accumulator, item) => newAccumulator וערך התחלתי. היא עוברת על המערך, מעבירה כל פריט ל-reducer יחד עם הצובר עד כה, ומחזירה את מה שהצובר הפך אליו בסוף.

const nums = [3, 1, 4, 1, 5, 9, 2, 6];

const sum = nums.reduce((acc, n) => acc + n, 0);
const max = nums.reduce((acc, n) => (n > acc ? n : acc), -Infinity);

console.log(sum);
console.log(max);

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

const people = [
    { name: "Ada", team: "red" },
    { name: "Boris", team: "blue" },
    { name: "Chen", team: "red" },
    { name: "Dari", team: "blue" },
];

const byTeam = people.reduce((acc, person) => {
    (acc[person.team] ??= []).push(person.name);
    return acc;
}, {});

console.log(byTeam);

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

reduce חזקה, אבל יכולה להיות קשה לקריאה כשהלוגיקה מסתבכת. אם ה-reducer שלכם ארוך מכמה שורות, לולאת for...of רגילה היא לרוב ברורה יותר.

forEach: תופעות לוואי, בלי ערך החזרה

forEach היא כמו map בלי המערך המוחזר. היא קיימת למקרים שבהם רוצים לעשות משהו עם כל פריט, להדפיס אותו, לקרוא ל-API, לעדכן את ה-DOM, ולא צריכים אוסף חדש.

const messages = ["hi", "hello", "hey"];

messages.forEach((msg, i) => {
    console.log(`${i}: ${msg}`);
});

שני דברים שכדאי לדעת:

• forEach מחזירה undefined. אי אפשר לשרשר אחריה .map().
• אי אפשר לצאת מ-forEach מוקדם עם break. אם צריך יציאה מוקדמת, השתמשו ב-for...of או ב-some/every.

אם אתם מוצאים את עצמכם כותבים arr.forEach(x => results.push(transform(x))), זה בעצם map.

find ו-findIndex: רק אחד, בבקשה

find מחזירה את האיבר הראשון שמתאים לפרדיקט, או undefined אם אין התאמה. findIndex מחזירה את האינדקס (או -1).

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Boris" },
    { id: 3, name: "Chen" },
];

const boris = users.find(u => u.name === "Boris");
const borisIndex = users.findIndex(u => u.name === "Boris");

console.log(boris);
console.log(borisIndex);

find עוצרת בהתאמה הראשונה. אל תשתמשו ב-filter(...)[0]: הוא סורק את כל המערך רק כדי לזרוק את השאר.

some ו-every: שאלות של כן או לא

some מחזירה true אם לפחות איבר אחד עובר את הבדיקה. every מחזירה true רק אם כולם עוברים.

const scores = [82, 91, 77, 64, 88];

console.log(scores.some(s => s >= 90));   // true - at least one A
console.log(scores.every(s => s >= 60));  // true - nobody failed
console.log(scores.every(s => s >= 80));  // false

שתיהן עוצרות מוקדם: some עוצרת ב-true הראשון, every עוצרת ב-false הראשון. הן הכלי הנכון לשאלות מסוג "האם יש…" ו"האם כולם…".

slice מול splice: העתקה מול חיתוך

השתיים נשמעות דומות ועושות דברים שונים מאוד.

slice(start, end) מחזירה עותק רדוד של חלק מהמערך. היא לא משנה כלום. end לא נכלל; השמיטו אותו כדי להגיע עד הסוף.

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
const last = letters.slice(-2);

console.log(middle);
console.log(last);
console.log(letters);  // unchanged

splice(start, deleteCount, ...items) משנה את המערך במקום. היא מסירה deleteCount איברים החל מ-start, מכניסה איברים חדשים אם רוצים, ומחזירה את האיברים שהוסרו.

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2, "X", "Y", "Z");

console.log(letters);   // ["a", "X", "Y", "Z", "d", "e"]
console.log(removed);   // ["b", "c"]

דרך לזכור: slice בטוחה (מעתיקה), splice מנתחת את המערך במקום.

משנות מול לא משנות

ההבחנה הזו חשובה. קוד שמשנה בטעות מערך משותף הוא אחד הבאגים המעצבנים יותר לאיתור.

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

• push, pop, shift, unshift
• splice, sort, reverse
• fill, copyWithin

לא משנות (מחזירות מערך או ערך חדש, המקור לא נפגע):

• map, filter, slice, concat
• flat, flatMap
• find, findIndex, some, every, includes, indexOf
• reduce, reduceRight

השתיים שצריך לשים עליהן עין הן sort ו-reverse: הן נראות תמימות ומשנות את המערך בשקט. אם צריך עותק ממוין, הפעילו קודם slice:

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

const sorted = nums.slice().sort((a, b) => a - b);

console.log(sorted);
console.log(nums);  // unchanged

ב-JS מודרני יש גם תאומות שלא משנות: toSorted, toReversed, toSpliced ו-with. הן מחזירות מערכים חדשים ומשאירות את המקור כמו שהוא. הן נתמכות בכל סביבת ריצה עדכנית, אז השתמשו בהן כשהן זמינות.

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

console.log(nums.toSorted((a, b) => a - b));
console.log(nums.toReversed());
console.log(nums);  // still [3, 1, 4, 1, 5]

flat ו-flatMap

flat משטחת מערכים מקוננים ברמה אחת (או יותר, עם ארגומנט עומק). flatMap היא map ואחריה flat ברמה אחת: שימושית כשכל פריט ממופה לאפס פלטים או יותר.

const nested = [[1, 2], [3, 4], [5]];
console.log(nested.flat());

const sentences = ["hello world", "how are you"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words);

flatMap היא הדרך הנקייה "לפרוס" פריטים, קלט אחד והרבה פלטים, בלי שלב flat() נוסף.

לחבר הכול יחד

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

const orders = [
    { id: 1, total: 120, status: "completed" },
    { id: 2, total: 30, status: "completed" },
    { id: 3, total: 200, status: "pending" },
    { id: 4, total: 75, status: "completed" },
    { id: 5, total: 45, status: "completed" },
];

const revenue = orders
    .filter(o => o.status === "completed")
    .filter(o => o.total > 50)
    .reduce((sum, o) => sum + o.total, 0);

console.log(revenue);

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

הבא בתור: Map ו-Set

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