آموزش ویژگی های ECMAScript 6 (جلسه 23) : آموزش Map و WeakMap

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۳۱ شهریور ۱۳۹۶

همونطور که اطلاع دارید در جلسه قبل در مورد Set و WeakSet براتون توضیحاتی رو قرار دادیم و شما رو بصورت کامل با اونا آشنا کردیم. در این جلسه میخوایم در مورد Map و WeakMap که در ES6 معرفی شده اند، توضیحاتی رو قرار بدیم. برای این آموزش از این لینک و این لینک به عنوان منبع استفاده میکنیم.

Map و WeakMap نیز مانند Set و WeakSet شئ یا Object هستند. قبل از اینکه Map‌ها معرفی بشن، از Object‌ها استفاده میشه و خیلی با هم شباهت دارند.

همونطور که میدونین اشیاء مجموعه ای از جفتهای کلید و مقدار (Key-Value pair) هستند. پس هر شئ تعدادی کلید دارد که برای هر کدام از اونا هم یک مقدار قرار داده شده است. با استفاده از متدهای زیادی هم که وجود داره میتونین به کلیدها و مقادیر اونا دسترسی داشته باشید.

یکی از محدودیتهایی که در رابطه با اشیاء وجود داره اینه که برای کلید فقط میتونین از رشته یا Symbol (معرفی شده در ES6) استفاده کنید و مثلا نمیتونین یک تابع یا شئ رو بعنوان کلید قرار بدین. با اضافه شدن Map در ES6 امکان چنین کاری وجود داره و هر چیزی رو میتونین برای کلید یا مقدار Map قرار بدین. تعدادی تفاوت نیز بین Map و Object وجود داره که خیلی وارد اونا نمیشیم و بیشتر به خود Map میپردازیم.

آموزش متدهای مربوط به Map

یک Map خالی رو بصورت زیر به وجود میاریم:

let myMap = new Map();

console.log(myMap);

همونطور که دیدید یک Map خالی رو ساختیم و در خط 3 اون رو در Console چاپ کردیم. خروجی در Console بصورت زیر خواهد بود:

همونطور که میبینید یک شئ از نوع Map قرار گرفته و میتونین تمام ویژگی‌ها و متدهای اون رو مشاهده کنید. با استفاده از متد set میتونین یک عضو رو به Map اضافه کنید و با استفاده از متد get میتونین مقدار یک کلید رو بدست بیارید. کد زیر رو در نظر بگیرید:

let myMap = new Map();

myMap.set("name", "Mohammad");
myMap.set("year", 2017);

console.log(myMap.get("name")); // Mohammad
console.log(myMap.get("year")); // 2017

میبینید که با استفاده از متد set کلیدهای name و year رو اضافه کردیم و به ترتیب مقادیر رشته Mohammad و عدد 2017 رو به اونا نسبت دادیم. در خط 6 و 7 نیز با استفاده از متد get به مقدار این کلیدها دسترسی پیدا کردیم و اونا رو در Console چاپ کردیم. خروجی هر خط بعد از // قرار داده شده است.

اگر در متد get نام کلید رو اشتباهی وارد کنید و یا اینکه اون کلید در Map وجود نداشته باشد، مقدار undefined برگشت داده میشه.

همونطور که قبلا هم بیان شد، میتونیم هر نوع داده ای رو برای کلیدها و مقادیر استفاده کنیم. برای مثال در زیر یک شئ و یک تابع رو بعنوان کلید قرار میدیم:

let myMap = new Map();

let key1 = {},
	key2 = function() {};

myMap.set(key1, 5);
myMap.set(key2, 10);

console.log(myMap.get(key1)); // 5
console.log(myMap.get(key2)); // 10

همونطور که میبینید یک شئ و یک تابع خالی رو تعریف کردیم و با استفاده از متد set اونا رو به map اضافه کردیم و مقادیر عددی 5 و 10 رو به اونا نسبت دادیم. در خط 9 و 10 نیز با استفاده از get به اونا دسترسی پیدا کردیم. به همین راحتی.

Map‌ها متدهای دیگه ای هم دارند که در کد زیر از اونا استفاده کردیم:

let myMap = new Map();

let key1 = {},
	key2 = function() {};

myMap.set("name", "Mohammad");
myMap.set("year", 2017);
myMap.set(key1, 5);
myMap.set(key2, 10);

console.log(myMap.size); // 4

console.log(myMap.has("name")); // true

myMap.delete("name");
console.log(myMap.has("name")); // false
console.log(myMap.size); // 3

myMap.clear();
console.log(myMap.size); // 0

همونطور که دیدید 4 تا جفت کلید و مقدار رو به Map اضافه کردیم. با استفاده از متد size در خط 11 میتونیم تعداد اعضای Map رو بدست بیاریم. در خط 13 با استفاده از متد has، وجود یا عدم وجود کلید name رو بررسی کردیم. اگر وجود داشته باشه true و در غیر اینصورت false نمایش داده میشه.

در خط 15 با استفاده از متد delete، کلید و مقدار name رو حذف کردیم و در خطوط بعدی اگر بررسی کنیم، دیگه وجود نداره و یک عضو از Map کم شده است. با استفاده از متد clear هم میتونیم همه اعضای Map رو حذف کنیم. بعد از این کار ویژگی size عدد 0 رو برگشت میده. شما میتونین با استفاده از آرایه‌ها نیز یک map رو مقداردهی کنید. کد زیر رو در نظر بگیرید:

let key1 = {};

let myMap = new Map([["name", "Mohammad"], ["year", 2017], [key1, 5]]);

console.log(myMap);

همونطور که میبینید آرایه ای از آرایه‌های دو عضوی رو به Map پاس دادیم. عضو اول هر آرایه بعنوان کلید و عضو دوم هر آرایه بعنوان مقدار در نظر گرفته میشه. بهمین راحتی.

استفاده از forEach برای Map

با استفاده از متد forEach میتونیم به ازای هر عضو Map، تابع مشخصی رو اجرا کنیم. درون تابع نیز میتونیم به مقدار و کلید اون عضو دسترسی داشته باشیم. کد زیر رو در نظر بگیرید:

let myMap = new Map([["name", "Mohammad"], ["year", 2017], ["age", 24]]);

myMap.forEach((value, key) => {
	console.log(`${key} - ${value}`);
});

همونطور که میبینید یک Map سه عضوی رو تعریف کردیم و با استفاده از forEach تابع ساده ای رو برای همه اعضای اون اجرا کردیم. با اینکار خروجی بصورت زیر خواهد بود:

name - Mohammad
year - 2017
age - 24

بهمین راحتی.

از WeakSet‌ها در جاهای خیلی خاص و پیشرفته استفاده میشه و شاید خیلی بدرد کار ما نخوره و بیشتر Framework‌ها برای بهینه یا Optimize کردن، از اون استفاده میکنن. برای مطالعه بیشتر میتونین این لینک رو ببینید.

موفق و پیروز باشید.

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.