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

آخرین مطالب

امکانات وب

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

همونطور که اطلاع دارید در جلسه قبل در مورد 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 کردن، از اون استفاده میکنن. برای مطالعه بیشتر میتونین این لینک رو ببینید.

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

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : آموزش,ویژگی,آموزش, نویسنده : استخدام کار 7learn بازدید : 260 تاريخ : يکشنبه 2 مهر 1396 ساعت: 6:11

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

آخرین مطالب

امکانات وب