Map ו-Set ב-JavaScript: מתי להעדיף אותם על אובייקטים ומערכים

שני אוספים מעבר לאובייקט ולמערך

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

הם קיימים בשפה מאז ES2015. שניהם איטרביליים, לשניהם יש מאפיין .size, ושניהם עובדים טוב עם אופרטור ה-spread. מודל החשיבה פשוט:

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

יצירה ושימוש ב-Map

Map מחזיק זוגות של מפתח וערך. יוצרים אותו עם new Map() ומשתמשים ב-.set(), .get(), .has() ו-.delete():

const scores = new Map();

scores.set("ada", 97);
scores.set("boris", 84);
scores.set("chen", 91);

console.log(scores.get("ada"));
console.log(scores.has("boris"));
console.log(scores.size);

scores.delete("boris");
console.log(scores.size);

אפשר גם להעביר לבנאי מערך של זוגות [key, value] כדי לאכלס אותו מראש:

const scores = new Map([
  ["ada", 97],
  ["boris", 84],
]);

console.log(scores.get("ada"));

הצורה הזאת של מערך בן שני איברים מופיעה בכל מקום שיש בו Maps: כך מיוצגות רשומות כשעוברים עליהן.

Map מול אובייקט: למה לטרוח?

אובייקטים רגילים נראים כאילו הם עושים את אותה עבודה. ברוב המקרים הם באמת עושים אותה. אבל Maps מתקנים כמה קצוות גסים מוגדרים:

const obj = {};
obj.toString = "oops";
console.log(obj.toString);

const map = new Map();
map.set("toString", "safe");
console.log(map.get("toString"));
console.log(map.size);

אובייקטים יורשים מ-Object.prototype, כך שמפתחות כמו toString, constructor ו-hasOwnProperty כבר קיימים בכל אובייקט. ל-Maps אין מטען כזה: המפתחות שאתם מגדירים הם המפתחות היחידים שקיימים.

ההבדלים הנוספים ששווה להכיר:

• כל סוג מפתח. Maps מקבלים אובייקטים, פונקציות, מספרים ובוליאניים כמפתחות. אובייקטים ממירים בשקט מפתחות שאינם מחרוזות למחרוזות: obj[1] ו-obj["1"] הם אותו תא.
• סדר הכנסה מובטח. Maps עוברים על הרשומות לפי הסדר שבו נוספו. גם אובייקטים בדרך כלל, אבל מפתחות מחרוזת שנראים כמו מספרים ממוינים קודם, וזו מלכודת עדינה.
• גודל מובנה. map.size הוא O(1). עבור אובייקט הייתם כותבים Object.keys(obj).length, שבונה מערך מחדש.
• מותאם לשינויים תכופים. מנועים מכווננים את Maps להוספה והסרה תכופות. אובייקטים מכווננים לרשומות עם מבנה יציב.

השתמשו באובייקט כשאתם ממדלים רשומה עם מפתחות מחרוזת ידועים ({ name, email, age }). השתמשו ב-Map כשהמפתחות דינמיים, אינם מחרוזות, או כשתוסיפו ותסירו רשומות הרבה.

מעבר על Map

Maps הם איטרביליים, כלומר for...of עובדת ישירות ופירוק של כל רשומה טבעי:

const scores = new Map([
  ["ada", 97],
  ["boris", 84],
  ["chen", 91],
]);

for (const [name, score] of scores) {
  console.log(`${name}: ${score}`);
}

אם אתם רוצים רק מפתחות או רק ערכים, קראו ל-.keys() או ל-.values(). ו-.forEach() קיימת אם אתם מעדיפים אותה:

const scores = new Map([["ada", 97], ["boris", 84]]);

for (const name of scores.keys()) console.log(name);
for (const score of scores.values()) console.log(score);

scores.forEach((value, key) => console.log(key, value));

כדי להפוך Map בחזרה לאובייקט או למערך רגיל, פרשו אותו:

const scores = new Map([["ada", 97], ["boris", 84]]);

const asArray = [...scores];
const asObject = Object.fromEntries(scores);

console.log(asArray);
console.log(asObject);

יצירה ושימוש ב-Set

Set מחזיק ערכים ייחודיים. הוספה של ערך שכבר קיים לא עושה כלום:

const tags = new Set();

tags.add("javascript");
tags.add("tutorial");
tags.add("javascript");

console.log(tags.size);
console.log(tags.has("tutorial"));

tags.delete("tutorial");
console.log([...tags]);

הייחודיות נקבעת לפי אותו כלל שוויון כמו ===, עם מוזרות אחת: NaN נחשב שווה לעצמו בתוך Set, למרות ש-NaN === NaN הוא false בכל מקום אחר.

העבירו iterable לבנאי כדי לאכלס Set מראש. מכאן מגיע הטריק להסרת כפילויות:

const numbers = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(numbers)];

console.log(unique);

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

Set מול מערך: מתי לעבור

גם מערכים וגם Sets מחזיקים אוסף של ערכים, אז מתי לבחור במה?

בחרו ב-Set כש:

• הערכים חייבים להיות ייחודיים ואתם רוצים שסביבת הריצה תאכוף את זה.
• אתם עושים הרבה בדיקות שייכות. set.has(x) הוא O(1), ו-array.includes(x) הוא O(n). בתוך לולאה, ההבדל הזה מצטבר מהר.
• סדר ההכנסה הוא כל מה שצריך. Sets עוברים לפי סדר ההכנסה אבל לא תומכים בגישה לפי אינדקס.

הישארו עם מערך כש:

• צריך גישה לפי מיקום: arr[0], חיתוך, מיון.
• לכפילויות יש משמעות: עגלת קניות עם שני פריטים זהים.
• תשתמשו הרבה במתודות מערך כמו .map, .filter, .reduce. ל-Sets אין אותן, והייתם צריכים לפרוש קודם למערך.

דוגמה קצרה שקשורה לביצועים:

const banned = new Set(["spam", "scam", "ads"]);
const messages = ["hello", "spam", "hi", "ads", "hey"];

const clean = messages.filter(m => !banned.has(m));
console.log(clean);

אם banned היה מערך, כל callback של filter היה סורק את כל הרשימה. כ-Set, כל חיפוש לוקח זמן קבוע.

מעבר על Set

אותו סיפור כמו ב-Map: for...of פשוט עובדת, ופרישה נותנת מערך:

const tags = new Set(["javascript", "tutorial", "map-set"]);

for (const tag of tags) {
  console.log(tag);
}

const asArray = [...tags];
console.log(asArray);

ל-Sets יש גם .keys(), .values() ו-.entries() לשם סימטריה עם Map, למרות שב-Set המפתחות והערכים הם אותו דבר. רוב הזמן פשוט תעברו עליהם ישירות.

דוגמה מלאה: ספירת מבקרים ייחודיים לכל עמוד

שילוב של שניהם: Map מנתיבי עמודים ל-Set של מזהי מבקרים:

const visits = [
  { path: "/", user: "u1" },
  { path: "/", user: "u2" },
  { path: "/about", user: "u1" },
  { path: "/", user: "u1" },
  { path: "/about", user: "u3" },
];

const uniqueByPage = new Map();

for (const { path, user } of visits) {
  if (!uniqueByPage.has(path)) {
    uniqueByPage.set(path, new Set());
  }
  uniqueByPage.get(path).add(user);
}

for (const [path, users] of uniqueByPage) {
  console.log(`${path}: ${users.size} unique visitors`);
}

ה-Map מטפל במיפוי מנתיב לדלי, וה-Set מטפל בהסרת הכפילויות בתוך כל דלי. לעשות את אותו דבר עם אובייקט רגיל ומערכים היה עובד, אבל הייתם כותבים בדיקות indexOf ושומרי hasOwnProperty נוספים לאורך כל הדרך.

WeakMap ו-WeakSet בקצרה

שני אוספים קשורים קיימים למקרה שימוש צר: WeakMap ו-WeakSet. הם מחזיקים הפניות חלשות, כלומר רשומה שהמפתח שלה (ב-WeakMap) או הערך שלה (ב-WeakSet) לא מופנה מאף מקום אחר נאספת אוטומטית על ידי ה-garbage collector.

const cache = new WeakMap();

function getMetadata(obj) {
  if (!cache.has(obj)) {
    cache.set(obj, { accessedAt: Date.now() });
  }
  return cache.get(obj);
}

const user = { name: "Ada" };
console.log(getMetadata(user));

הם מקבלים רק אובייקטים כמפתחות, אינם איטרביליים ואין להם .size. זה מכוון: אם הייתם יכולים לעבור עליהם, היה אפשר לצפות בפעולת ה-garbage collector. הם שימושיים לשמירת מטא-דאטה על אובייקטים שאינם שלכם, ונדירים בקוד יומיומי.

הבא בתור: JSON

Map ו-Set מצוינים בזיכרון, אבל אף אחד מהם לא שורד את JSON.stringify בשלמותו: Maps הופכים ל-{} וגם Sets הופכים ל-{}. העמוד הבא עוסק ב-JSON: איך ממירים ומפענחים נתונים, והתבניות לטיפול באוספים שהוצגו כאן כשהם צריכים לעבור ברשת או לקובץ.