סוף סוף הנה פוסט מרענן ב javascript! ונדבר על אובייקטים שונים שקיימים בjavascript שהם פחות נפוצים, אולי דברים שהכרתם ולא ראיתם צורך ממשי להשתמש, או לא נפוץ להשתמש בהם וכן כבר שכחתם כמה הם יכולים להיות לעזר.
Map
מה זה Map ומתי הוא יהיה פתרון טוב להבדיל מהאובייקט הרגיל שמחזיק key value ?
אז Map הוא אובייקט שמחזיק key value בדומה לאובייקט רגיל, רק שעם Map תוכלו להגדיר כל סוג של מידע גם ל key וגם ל value. אבל מתי צריך את זה? לפני שנענה על זה נבחן יתרונות נוספים שיש לMap. למשל אם תרצו למחוק מתוך אובייקט, ככל הנראה יהיה עדיף לכם להשתמש בMap. כמו כן זו גם המלצה של מוזילה להתייעלות בביצועים:
יתרונות רבים נוספים יש לMap למשל :
- Map אינה מכיל שום פרופים build-in להבדיל מאובייקטים רגלים למשל obj.toLocateString.
- בנושא של אבטחה, Map מאובטח יותר, לאומת באובייקטים שהינם בסכנת object injection attacks.
- בMap יש סדר אחיד לדטה ובאובייקטים סדר המידע משתנה.
כמו כן, אין משהו שלא ניתן לעשות עם Map וכן ניתן לעשות עם אובייקטים רגילים, להלן כמה דוגמאות:
למשל for loop יראה כך:
const mapObj = new Map();
mapObj.set("a", 1);
mapObj.set("b", 2);
mapObj.set("d", 3);
mapObj.set("d", 4);
const mapObj = new Map(Object.entries(obj));
for (const [key, value] of mapObj) {
//.....
}עוד יתרון נחמד לMap, הוא כן שומר על סדר האיברים שלו, אפשר לקבל את האיבר ראשון בצורה הבאה:
const mapObj = new Map();
mapObj.set("a", 1);
mapObj.set("b", 2);
mapObj.set("d", 3);
mapObj.set("d", 4);
const [[firstKey, firstValue]] = mapObj;Map לא מכיר אינדקסים, אבל אכן שומר על הסדר ואם תרצו לתפוס אייטם תוכלו לעשות זאת בעזרת לופ.
ניתן לעשות קופי לMap בקלות רבה על ידי :
const cloneMap = new Map(mapObj); // Or const deepCloneMap = tructuredClone(mapObj); /* Please note that structuredClone is a relatively new addition to the JavaScript language and is not yet supported in all environments. As of now, it's supported in modern browsers like Chrome 89+, Firefox 86+, and Deno 1.13+. If you're working in an environment that doesn't support structuredClone, you might need to use a library or write your own function to deep clone objects. */
ניתן להפוך כל MAP לאובייקט רגיל על ידי Object.fromEntries :
const cloneMapToObj = Object.fromEntries(mapObj);
רפרנסים עם Map יכולים להוות בעייתיות ואף לגרום לmemory leak, למשל אם תגדירו אובייקט כלשהו להיות keys של Map ככל נראה הזיכרון לא יתנקה במידה ותמחקו את אותו מקור, והרפרנס של הMAP ישמור על המידע זמין ולא יהיה מחיקה מהזיכרון (garbage collection). מה שכן אפשר לעשות זה להשתמש ב:
let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, 'codcode');
console.log(weakMap.get(obj)); // 'codcode'Set
סט תמיד מזכיר לי קבוצה במתמטיקה, ומתוך המקום של הבנה של קבוצות לפעמים יכול להיות נוח לשימוש במקרים מסויימים, להלן דוגמה של Set:
// Create a new Set
let mySet = new Set();
// Add values to the Set
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
// Add a duplicate value to the Set
mySet.add('value1');
// Log the Set to the console
console.log(mySet); // Set { 'value1', 'value2', 'value3' }
// Check if a value exists in the Set
console.log(mySet.has('value1')); // true
console.log(mySet.has('value4')); // false
// Remove a value from the Set
mySet.delete('value1');
console.log(mySet); // Set { 'value2', 'value3' }
// Get the size of the Set
console.log(mySet.size); // 2
// Clear all items from the Set
mySet.clear();
console.log(mySet); // Set {}מאד פשוט, שימוש דיי נפוץ של SET זה אם רוצים לקחת מערך ולשמור ממנו רק מידע שאינו חוזר על עצמו אז הרבה פעמים תראו מתכנתים עושים משהו בסגנון הזה:
// Convert an array to a Set
let arr = ['value1', 'value2', 'value3', 'value1'];
let mySet = new Set(arr);
console.log(mySet); // Set { 'value1', 'value2', 'value3' }
// Convert a Set to an array
let newArr = [...mySet];
console.log(newArr); // [ 'value1', 'value2', 'value3' ]לעוד דוגמאות אפשר להסתכל בקודפן הזה:
See the Pen JS map object by YairVin (@NST972) on CodePen.
סיכום Map, Set בjavascript
javascript היא השפה שעליה כל עולם הווב נשען (נכון לעכשיו), ולפעמים אנחנו קצת "שוכחים" איך לרשום JS . לכן על מנת לרענן את זיכרוננו, נרשום פוסטים של ריענון בJS. כמו למשל הפוסט הזה שמדבר על MAP ו SET
לרוב שימושים בMAP יהיו עבור מידע רב ולא עבור מידע מצומצם, כמו כן אם תדרשו למחוק ולהוסיף לתוך אובייקט לעיתים דחופות גם כאן הייתי מציע לעבוד עם MAP.
SET לעומת זאת מאד פשוט וגם פחות בא לידי שימוש. כמו כן אפשר גם לעשות איטרציות על SET עם for loop.
Map ו-Set הם שני כלים חזקים שניתן להשתמש בהם לאחסון נתונים ב-JavaScript. הבחירה בין Map ל-Set תלויה בצורך הספציפי שלכם. בהצלחה 🐊🤩✌️
