אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » ECMAScript 6 » ECMAScript 6 – שמירת מידע ב-Map ו-Set

ECMAScript 6 – שמירת מידע ב-Map ו-Set

רן בר-זיק דצמבר 4, 2016 7:07 am 2 תגובות

מבני המידע החדשים והשימושיים להפליא של es6.

המאמר הקודםפעולות במחרוזות טקסט ותאריכים עם ECMAScript 6
המאמר הבאECMAScript 6 – לולאת for of
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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


var o = {1: 'a', 2: 'b'};

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


Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

// Get the size of an object
var size = Object.size(myArray);

גם יש בעיה עם המפתחות שתמיד חייבים להיות טקסט, למשל:


var o = {1: 'a', 2: 'b'};
o[1] // a
o['1'] // a

הקיצר, שימוש באובייקט כ-map הוא אפשרי אך בעייתי. תודה לאל, בדיוק בשביל זה יש את ECMAScript 6 ואובייקט map. עושים instance ל-map עם new ויש יש כמה מתודות בסיסיות: get ו-set שמשמשות להכנסה והוצאת נתונים לפי key value וכמובן את has שמחזירה בוליאני (כלומר true או false) אם יש בכלל את המפתח. הנה הדוגמאות המיוחלות:


var myMap = new Map();
    
myMap.set('foo', 123);
var a = myMap.get('foo');
console.log(a); //123
console.log(myMap.has('foo')); //true
myMap.delete('foo')
console.log(myMap.has('foo')); //false

כמובן שכל דבר (אפילו אובייקט) יכול להיות מפתח – בלי שום קשר לכך שהוא מספר או מחרוזת טקסט. למשל:


var myMap = new Map();
    
myMap.set(1, 'some value');
console.log(myMap.has(1)); //true
console.log(myMap.has('1')); //false


מתודות נוספות הן size שמחזירה את גודל ה-map ו-clear שמנקה אותו. פה אני מראה דוגמה כאשר כבר ביצירת ה-map אני מכניס איברים.


var myMap = new Map([
  [1, 'some value'],
  [2, 'another value']
  ]);
    
console.log(myMap.size); //2
myMap.clear();
console.log(myMap.size); //0

כמובן שקל לעשות איטרציות על map. ככה עושים את זה עם for of בנוגע ל-keys:


var myMap = new Map([
  [1, 'some value'],
  [2, 'another value']
  ]);
    
for (var key of myMap.keys()) {
    console.log(key);
} //1, 2

וגם עם values:


var myMap = new Map([
  [1, 'some value'],
  [2, 'another value']
  ]);
    
for (var value of myMap.values()) {
    console.log(value);
} //"some value", "another value"

חדי העין ישימו לב שהשתמשתי פה בשתי תכונות – values ו-keys שמוציאות מערך של המפתחות ושל הערכים. אפשר להוציא גם entries שהם מערך של ה-key וה-value:


var myMap = new Map([
  [1, 'some value'],
  [2, 'another value']
  ]);
    
for (var entry of myMap.entries()) {
    console.log(entry[0], entry[1]);
} //1 "some value", 2 "another value"

WeakMap

קשה להבין את WeakMap בלי להבין את עניין זליגות הזכרון של JavaScript. באופן עקרוני, WeakMapהוא בדיוק כמו map, רק שהוא מקבל רק אובייקטים כ-keys ואי אפשר לעשות לו איטרציה. כלומר יש את כל המתודות, אבל לא תצליחו לעשות לזה איטרציה. למה צריך את WeakMap בכלל? בשביל זה אני צריך להבין קצת בנושא זליגות זכרון. בואו נתאר מצב כזה – נניח שיש לי אלמנטים ב-DOM. את חלקם אני שומר ב-map מכל מיני סיבות. אם אני מוחק אותם מה-DOM. הייתי מצפה ש-JS יפנה את המקום בזכרון של האלמנטים האלו. אבל ה-map ישמור את הרפרנסים לאלמנטים האלו למרות שהם נמחקו! כי ה-garbage collector לא יבין שהוא יכול למחוק את האלמנטים האלו.
בדיוק בשביל זה יש לי את weakMap – המפתחות של ה-map הזה הם 'חלשים' ולא יכולים למנוע ממה שנכנס לתוכם להתפוגג כפלוץ ברוח. מאוד קשה להדגים את זה, אבל אני מקווה שהדוגמה הזו תהיה ברורה:

See the Pen ALrrBk by Ran Bar-Zik (@barzik) on CodePen.

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

Set ו-WeakSet

כמו map, גם set הוא מבנה נתונים שלא היה עד היום בג'אווהסקריפט. בגדול התפקיד שלו זה להכיל ערכים ואנחנו יכולים לוודא אם ערך מסוים בפנים. זה שימושי לכל מיני מצבים ובעיקר ליצירת רשימות לשימוש המשכי – למשל אם יש לי רשימה של שמות שהמשתמש מוסיף ואני שולח לשרת אבל אני צריך לדאוג שאין דופליקציה, set הוא אידיאלי.


var set = new Set();
set.add('red')
console.log(set.has('red')); //true
set.delete('red')
console.log(set.has('red')); //false

אפשר גם לעשות איטרציה. אין פה מפחחות כמובן אלא רק ערכים.


var set = new Set(['red', 'green', 'blue']);
for (var x of set) {
    console.log(x); //red, green, blue
}

יש לי גם את מתודת clear לניקוי מוחלט של ה-set ותכונת size לגודל ה-set.

כמו שיש לנו את WeakMap, יש לנו גם את WeakSet שיש לה שלוש מתודות – has, set ו-delete. גם WeakSet מאפשרת לזכרון להשתחרר אם אובייקטים שנכנסים לתוכה נמחקים.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
למדריך המלא של ECMAScript 6
ECMAScript 6

2 תגובות

  1. Amit הגב דצמבר 4, 2016 בשעה 9:09 am

    מאמר מצוין, תודה.

    למה אתה לא משתמש בדוגמאות בlet?

  2. שמואל דרמר הגב דצמבר 4, 2016 בשעה 12:27 pm

    patzatz

    רק בשביל זה שווה להתקין את בבל בNODE

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד