10 שיטות מפת JavaScript שכדאי לשלוט בהן היום

מפת JavaScript היא אוסף המאחסן כל אחד מהאלמנטים שלו כזוג מפתח-ערך. סוג נתונים זה מכונה גם מערך אסוציאטיבי או מילון.

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

במאמר זה תלמדו על עשר שיטות מפת JavaScript שכדאי לשלוט בהן היום.

1. כיצד ליצור מפה חדשה ב-JavaScript

אתה יכול ליצור אובייקט מפה חדש באמצעות ה מַפָּה() בַּנַאִי. בנאי זה מקבל פרמטר אחד: אובייקט שניתן לחזור עליו שהאלמנטים שלו הם זוגות מפתח-ערך.

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן'],
[1992, 'באטמן חוזר'],
[1995, 'באטמן לנצח'],
[2005, 'באטמן מתחיל'],
[2008, 'האביר האפל'],
[2012, 'האביר האפל עולה']
]);
console.log (mapObj);

תְפוּקָה:

מפה (7) {
1966 => 'באטמן: הסרט',
1989 => 'באטמן',
1992 => 'באטמן חוזר',
1995 => 'באטמן לנצח',
2005 => 'באטמן מתחיל',
2008 => 'האביר האפל',
2012 => 'האביר האפל עולה'
}

אם לא תספק את הפרמטר, JavaScript תיצור מפה ריקה חדשה.

let mapObj = מפה חדשה();
console.log (mapObj);

תְפוּקָה:

מפה (0) {}

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

תן mapObj = מפה חדשה([
['key1', 'value1'],
['key2', 'value2'],
['key2', 'newValue2']
]);
console.log (mapObj);

תְפוּקָה:

מפה (2) {
'key1' => 'value1',
'key2' => 'newValue2'
}

כאן, הערך המאוחסן מול ה מפתח 2 המפתח הוא newValue2, לא מוקדם יותר ערך2.

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

תן mapObj = מפה חדשה([
["string1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

תְפוּקָה:

מפה (4) {
'string1' => 1,
2 => 'מחרוזת2',
'string3' => 433.234,
23.56 => 45
}

2. הוסף אלמנטים חדשים לאובייקט מפה

אתה יכול להוסיף אלמנט חדש לאובייקט המפה באמצעות ה מַעֲרֶכֶת() שיטה. שיטה זו מקבלת מפתח וערך, ולאחר מכן מוסיפה אלמנט חדש לאובייקט המפה. לאחר מכן, השיטה מחזירה את אובייקט המפה החדש עם הערך המוסף. אם המפתח כבר קיים במפה, הערך החדש יחליף את הערך הקיים.

let mapObj = מפה חדשה();
mapObj.set (1966, 'באטמן: הסרט');
mapObj.set (1989, 'באטמן');
mapObj.set (1992, 'באטמן חוזר');
mapObj.set (1995, 'באטמן לנצח');
console.log (mapObj);

תְפוּקָה:

מפה (4) {
1966 => 'באטמן: הסרט',
1989 => 'באטמן',
1992 => 'באטמן חוזר',
1995 => 'באטמן לנצח'
}

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

const year1 = 1966;
const movieName1 = 'באטמן: הסרט';
תן שנה2 = 1989;
var movieName2 = 'באטמן';
let mapObj = מפה חדשה();
mapObj.set (שנה1, שם סרט1);
mapObj.set (שנה2, שם סרט2);
console.log (mapObj);

תְפוּקָה:

מפה (2) {
1966 => 'באטמן: הסרט',
1989 => 'באטמן'
}

ה מַעֲרֶכֶת() השיטה תומכת בשרשור.

let mapObj = מפה חדשה();
mapObj.set (1966, 'באטמן: הסרט')
.set (1989, 'באטמן')
.set (1992, 'באטמן חוזר')
.set (1995, 'באטמן לנצח');
console.log (mapObj);

תְפוּקָה:

מפה (4) {
1966 => 'באטמן: הסרט',
1989 => 'באטמן',
1992 => 'באטמן חוזר',
1995 => 'באטמן לנצח'
}

3. הסר את כל האלמנטים מאובייקט מפה

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

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן']
]);
console.log("גודל אובייקט המפה: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("גודל אובייקט המפה לאחר ניקוי אלמנטים: " + mapObj.size);
console.log (mapObj);

תְפוּקָה:

גודל אובייקט המפה: 2
מפה (2) { 1966 => 'באטמן: הסרט', 1989 => 'באטמן' }
גודל אובייקט המפה לאחר ניקוי אלמנטים: 0
מפה (0) {}

4. מחק אלמנט מסוים ממפה

אתה יכול להסיר אלמנט מסוים מאובייקט מפה באמצעות ה לִמְחוֹק() שיטה. שיטה זו מקבלת את המפתח של האלמנט שיש למחוק מהמפה. אם המפתח קיים, השיטה חוזרת נָכוֹן. אחרת, זה חוזר שֶׁקֶר.

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן']
]);
console.log("מפה ראשונית: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("מפה לאחר מחיקת האלמנט בעל המפתח הוא 1966");
console.log (mapObj);

תְפוּקָה:

מפה ראשונית:
מפה (2) { 1966 => 'באטמן: הסרט', 1989 => 'באטמן' }
מפה לאחר מחיקת הרכיב בעל המפתח 1966
מפה (1) { 1989 => 'באטמן' }

5. בדוק אם קיים אלמנט במפה

אתה יכול לבדוק אם קיים אלמנט באובייקט מפה באמצעות ה יש ל() שיטה. שיטה זו מקבלת את המפתח של האלמנט כפרמטר לבדיקת נוכחות באובייקט המפה. השיטה הזו חוזרת נָכוֹן אם המפתח קיים. אחרת, זה חוזר שֶׁקֶר.

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן'],
[1992, 'באטמן חוזר'],
[1995, 'באטמן לנצח'],
[2005, 'באטמן מתחיל'],
[2008, 'האביר האפל'],
[2012, 'האביר האפל עולה']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

תְפוּקָה:

נָכוֹן
שֶׁקֶר

אלמנט עם מפתח 1966 קיים באובייקט Map, אז השיטה חזרה נָכוֹן. אבל, מכיוון שאין אלמנט עם מפתח 1977 באובייקט Map, השיטה חזרה שֶׁקֶר מהשיחה השנייה.

קָשׁוּר: מה זה JavaScript ואיך זה עובד?

6. גישה לערך עבור מפתח ספציפי

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

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן'],
[1992, 'באטמן חוזר'],
[1995, 'באטמן לנצח'],
[2005, 'באטמן מתחיל'],
[2008, 'האביר האפל'],
[2012, 'האביר האפל עולה']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

תְפוּקָה:

באטמן: הסרט
לא מוגדר

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

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

לדברי הפקיד MDN Web Docs:

השיטה entries() מחזירה אובייקט Iterator חדש המכיל את הזוגות [מפתח, ערך] עבור כל אלמנט באובייקט Map לפי סדר הוספה. במקרה הספציפי הזה, גם אובייקט איטרטור זה ניתן לחזרה, כך שניתן להשתמש בלולאת for-of. כאשר נעשה שימוש בפרוטוקול [Symbol.iterator], הוא מחזיר פונקציה שכאשר היא מופעלת, מחזירה איטרטור זה בעצמו.

אתה יכול לגשת לכל רכיב במפה באמצעות איטרטור זה ו-a בשביל הַצהָרָה:

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן'],
[1992, 'באטמן חוזר'],
[1995, 'באטמן לנצח'],
[2005, 'באטמן מתחיל'],
[2008, 'האביר האפל'],
[2012, 'האביר האפל עולה']
]);
for (תן כניסה של mapObj.entries()) {
console.log (ערך);
}

תְפוּקָה:

[1966, 'באטמן: הסרט']
[1989, 'באטמן']
[1992, 'באטמן חוזר']
[1995, 'באטמן לנצח']
[2005, 'באטמן מתחיל']
[2008, 'האביר האפל']
[2012, 'האביר האפל עולה']

לחלופין, אתה יכול להשתמש בתכונת ההקצאה של ES6 כדי לגשת לכל מפתח וערך:

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן'],
[1992, 'באטמן חוזר'],
[1995, 'באטמן לנצח'],
[2005, 'באטמן מתחיל'],
[2008, 'האביר האפל'],
[2012, 'האביר האפל עולה']
]);
for (תן [מפתח, ערך] של mapObj.entries()) {
console.log("מפתח: " + מפתח + " ערך: " + ערך);
}

תְפוּקָה:

מפתח: 1966 ערך: באטמן: הסרט
מפתח: 1989 ערך: באטמן
מפתח: 1992 ערך: באטמן חוזר
מפתח: 1995 ערך: באטמן לנצח
מפתח: 2005 ערך: באטמן מתחיל
מפתח: 2008 ערך: האביר האפל
מפתח: ערך 2012: האביר האפל עולה

8. כיצד לחזור על ערכי המפה

ה ערכים() שיטה מחזירה an איטרטור אובייקט שמכיל את כל הערכים במפה, והוא עושה זאת לפי סדר הוספה.

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן'],
[1992, 'באטמן חוזר']
]);
const iteratorObj = mapObj.values();
for (תן ערך של iteratorObj) {
console.log (ערך);
}

תְפוּקָה:

באטמן: הסרט
באטמן
באטמן חוזר

9. חזור על המפתחות של המפה

ה keys() שיטה מחזירה an איטרטור אובייקט שמכיל את כל המפתחות במפה, והוא עושה זאת לפי סדר הוספה.

תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן'],
[1992, 'באטמן חוזר']
]);
const iteratorObj = mapObj.keys();
for (תן מפתח של iteratorObj) {
console.log (מפתח);
}

תְפוּקָה:

1966
1989
1992

קָשׁוּר: פונקציות חץ JavaScript יכולות להפוך אותך למפתח טוב יותר

10. חזור על אלמנטים במפה באמצעות התקשרות חוזרת

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

function printKeyValue (מפתח, ערך) {
console.log("מפתח: " + מפתח + " ערך: " + ערך);
}
תן mapObj = מפה חדשה([
[1966, 'באטמן: הסרט'],
[1989, 'באטמן'],
[1992, 'באטמן חוזר']
]);
mapObj.forEach (printKeyValue);

תְפוּקָה:

מפתח: באטמן: ערך הסרט: 1966
מפתח: באטמן ערך: 1989
מפתח: באטמן מחזיר ערך: 1992

עכשיו אתה יודע על מפות ב-JavaScript

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

15 שיטות מערך JavaScript שכדאי לשלוט בהן היום

רוצים להבין מערכי JavaScript אבל לא מצליחים להתמודד איתם? בדוק את דוגמאות מערך ה-JavaScript שלנו לקבלת הדרכה.

קרא הבא

על הסופר