Map در جاوا اسکریپت چیست؟ – آموزش به زبان ساده + نمونه کد

Map در جاوا اسکریپت متشکل از مجموعه‌ای از جفت‌های «کلید – مقدار» (Key - Value) است. Map در واقع بسیار شبیه به «شی» (Object) بوده ولی چند تفاوت کلیدی با آن دارد. بحث Map در زبان برنامه نویسی جاوا اسکریپت از مباحث مهم و در عین حال جذابی است که در این مطلب آموزشی از مجله فرادرس پوشش داده شده است تا کاربران در پایان، با مطالعه این مقاله درک مطلوبی از Map در جاوا اسکریپت بدست آورند.

Map در جاوا اسکریپت چیست ؟

قبل از اینکه «جاوا اسکریپت مدرن» (ES6) معرفی شود، برنامه نویسان مجبور بودند برای نگاشت کلیدها به مقادیر، از «شی» (Object) استفاده کنند. شی در جاوا اسکریپت به آن‌ها اجازه می‌داد تا کلیدها را به مقادیر نگاشت کرده و نوع داده‌ها اعم از داده‌های رشته‌ای، بولی، عددی و غیره اهمیت نداشت. با این حال، استفاده از شی برای «نگاشت» (Map) ممکن است بر کدهای جاوا اسکریپت اثرات جانبی بگذارد.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

در این رابطه، توجه به دو اصل زیر در جاوا اسکریپت کلاسیک بسیار مهم است. این ۲ اصل در ادامه فهرست شده‌اند.

• اشیای جاوا اسکریپت حاوی کلیدی پیش‌فرض مانند «Prototype» بودند.
• کلیدهای اشیا مجاز نبودند از هر نوعی باشند و به عبارت دیگر، تنها مجاز بودند یا از نوع رشته‌ای و یا از نوع «Symbol» باشند.

در جاوا اسکریپت مدرن نوع داده‌ای از جنس «Collection» به نام «Map» فراهم شده که برای رویارویی با این کاستی‌ها در جاوا اسکریپت کلاسیک معرفی شده است.

طبق تعریف، شی Map جفت‌های کلید-مقدار را نگهداری می‌کند. کلیدها در یک مجموعه‌ی Map منحصربه‌فرد هستند یا به بیان دیگر، یک کلید در شی Map تنها یک بار ظاهر می‌شود. کلیدها و مقادیر در Map می‌توانند هر مقداری داشته باشند.

وقتی در طول یک شیِ Map پیمایش انجام می‌شود، در هر تکرار، آرایه‌ای حاوی ۲ عضو به صورت[key, value]بازگردانده خواهد شد. ترتیب تکرار از ترتیب درج تبعیت می‌کند. ترتیب درج هم با ترتیبی مطابقت دارد که در آن هر جفت کلید-مقدار زودتر در داخل Map به وسیله متُدset() درج شده است.

سیتنکس Map در جاوا اسکریپت

سینتکس Map در زبان جاوا اسکریپت به صورت زیر است:

1let map = new Map([iterable]);

Map در جاوا اسکریپت در واقع شیئی قابل پیمایش یا «تکرارپذیر» (Iterable) را می‌پذیرد که عناصر آن جفت‌های کلید-مقدار هستند.

متدهای کاربردی Map در جاوا اسکریپت کدامند؟

Map حاوی متدهای بسیاری است که از مهم‌ترین آن‌ها می‌توان به فهرست موارد زیر اشاره کرد.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

• clear()‎ : این متد تمامی عنصرها را از شی Map حذف خواهد کرد.
• delete(key)‎ : کار این متد حذف یک عنصر مشخص شده توسط کلید است. اگر عنصر مربوطه در Map موجود باشد، آن را باز می‌گرداند، در غیر این صورت، مقدار بازگردانده شدهfalse خواهد بود.
•   entries()‎ : این متد، شی «تکرارشونده» (Iterator) جدیدی را باز می‌گرداند که حاوی آرایه‌ای از [key, value] برای هر عنصر در شی Map است. ترتیب اشیا در Map با ترتیب درج یکسان است.
•   forEach(callback[, thisArg]) : «بازفراخوانی» (Callback) را برای هر جفت کلید-مقدار در Map به ترتیب درج فراخوانی می‌کند. می‌توان به وسیله پارامتر اختیاریthisArg مقدار this را برای هر Callback مشخص کرد.
• get(key) : این متد مقداری را بازمی‌گرداند که به کلید مرتبط است. اگر کلید وجود نداشته باشد، مقدار «تعریف نشده» (Undefined) باز گردانده خواهد شد.
• has(key) : این متد در صورتی که مقداری مرتبط با کلید موجود باشد، آن را باز می‌گرداند و در غیر اینصورت مقدار false را باز می‌گرداند.
• keys()‎ : این متد «تکرارپذیر» (Iterator) جدیدی را بازمی‌گرداند که حاوی کلیدهای عنصر به ترتیبی است که درج شده‌اند.
• set(key, value) : کار این متد تعیین مقدار کلید در شی Map است. همچنین این متد خودِ شی Map را بازمی‌گرداند، بنابراین می‌توان این این متُد را با سایر متدها به اصطلاح زنجیر کرد.
• values()‎ : این متد شی Iterator جدیدی را باز می‌گرداند که این شی حاوی مقادیری برای هر عنصر به ترتیب درج است.

مثال‌ هایی از Map در جاوا اسکریپت

در این بخش چند مثال کاربردی از Map در Javascript ارائه شده است تا بتوان درک بهتری را نسبت به این مفهوم بدست آورد.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

مثال ساخت شی Map جدید

در مثال زیر، فرض بر این است که فهرستی از اشیایuserبه صورت زیر موجود هستند.

1let Ali = {name: 'Ali Ahmadi'},
2    Reza= {name: 'Reza Karimi'},
3    Amir= {name: 'Amir Mohammadi'};

اگر بخواهیم برای کاربران و نقش آن‌ها، Map ایجاد کنیم، باید این کار را به‌ صورت زیر انجام داد.

1let userRoles = new Map();

در قطعه کد بالا، userRoles «وهله‌ای» (Instance) از Map است و نوع آن‌ همان‌طور که در مثال زیر نشان داده شده است، از نوع «شی» (object ) به حساب می‌آید.

1
21
32
4console.log(typeof(userRoles)); // object
5console.log(userRoles instanceof Map); // true

مثال اضافه کردن عناصر به Map

برای تخصیص نقش به کاربران باید از متد set()‎ به صورت زیر استفاده کرد.

1userRoles.set(Ali, 'admin');

در قطعه کد بالا، متدset()‎نقش admin را به کاربری به نام Ali نگاشت می‌کند. همچنین از آنجا که متدset()‎قابل زنجیر شدن است، می‌توان همان‌طور که در قطعه کد زیر آمده است، کدهای کمتری نوشت.

1userRoles.set(Reza, 'editor')
2          .set(Amir, 'subscriber');

مثال مقدار دهی به Map با شی تکرارپذیر

همان‌طور که پیشتر بیان شد، می‌توان شیئی «تکرار‌پذیر» (Iterable) را به سازندهMap() ارسال کرد.

1let userRoles = new Map([
2    [Ali, 'admin'],
3    [Reza, 'editor'],
4    [Amir, 'subscriber']
5]);

مثال دریافت عناصر از Map با کلید

اگر بخواهیم نقشAliرا بدانیم، باید به صورت زیر از متد get()  برای این منظور استفاده کنیم.

1userRoles.get(Ali); // admin

اگر کاربر کلیدی را ارسال کند که اصلاً این کلید وجود ندارد، در نتیجه متدget()‎ ، مقدار undefined  (تعریف نشده) را بازمی‌گرداند:

1let foo = {name: 'Amin'};
2userRoles.get(Amin); //undefined

مثال بررسی وجود عناصر با کلید

برای بررسی وجود کلید در Map، از متد has()‎ مانند مثال زیر استفاده می‌شود.

1userRoles.has(Amin); // false
2userRoles.has(Reza); // true

مثال بدست آوردن تعداد عناصر موجود در Map

برای محاسبه تعداد عناصر Map در Javascript باید از خصیصه size به صورت زیر استفاده کرد.