مپ ها و ست ها از اهمیت بسیار زیادی در جاوا اسکریپت برخوردار هستند، در این مطلب قصد داریم درباره مپ ها و ست ها در جاوا اسکریپت صحبت کنیم.

این مقاله کوتاه درباره تمامی موارد استفاده از مپ ها و ست ها در جاوا اسکریپت است، مپ ها و ست ها داده ساختارهای جدیدی هستند که در E6 معرفی شدند. در این مقاله قصد داریم توضیحی درباره آن ها، سناریوهای واقعی استفاده از آن ها و دلیل استفاده از مپ ها و ست ها به جای آرایه ها و اشیا استاندارد در جاوا اسکریپت را برای شما پوشش دهیم.

یک یادداشت کوتاه

علاوه بر این نوشته من ویدیوهایی را نیز برای شما  ضبط کرده ام که در صورتی که علاقه مند به استفاده از ویدیوها هستید می توانید با کمی جست و جو در یوتیوب هم ویدیو من و هم بسیاری از ویدیوهای دیگر را مشاهده کنید.

ست ها در جاوا اسکریپت

ابتدا ما یک آرایه نمونه ایجاد می کنیم که حاوی اعداد یک تا پنج است، بعد از آن ما این آرایه را در جاوا اسکریپت تبدیل به یک ست می کنیم.

const myArray = [ 1, 2, 3, 4, 5 ];const mySet = new Set(myArray);

یک شی از نوع ست به شما اجازه می دهد مقادیر منحصر به فرد را از هر نوع داده ای ذخیره کنید که این مقادیر می تواند اشیا اولیه باشد و یا اشیائی از نوع کلاس های شما باشند.

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

شاید بتوان اولین سناریو واقعی از کاربرد ست ها در جاوا اسکریپت را زمان دانست که شما قصد دارید مقادیری که در یک آرایه دو بار تکرار شده اند را حذف کنید. ما برای انجام این کار تنها کافی است که یک ست جدید را بسازیم و یک آرایه را به عنوان آرگومان به آن بدهیم.

حال اگر ما مقادیر تکراری را به آرایه خود اضافه کنیم ست ما به صورت خودکار موارد تکراری را برای ما حذف خواهد کرد، اجازه دهید برخی از مقادیر تکراری را اضافه کنیم:

const myArray = [ 1, 2, 3, 4, 5, 5, 5, 2 ];

حال اگر ما از دستور console.log برای چاپ آرایه و ست استفاده کنیم خواهیم داشت:

console.log(myArray) // [ 1, 2, 3, 4, 5, 5, 5, 2 ];

console.log(mySet) // Set { 1, 2, 3, 4, 5 }

حال می توانیم مشاهده کنیم که آرایه ما تمام مقادیر خود را حفظ کرده است و ست ما نیز تنها مقادیری که تکراری نیستند را دارا است.

نکته بسیار مهم دیگری که باید بدانید این است که ما به راحتی می توانیم یک ست را تبدیل به یک آرایه کنیم که این آرایه تنها شامل مقادیر منحصر به فرد است که توسط , از یکدیگر جدا شده اند.

const uniqueArray = [...mySet]; // [ 1, 2, 3, 4, 5 ]

متدهای یک شی ست

ست ها در جاوا اسکریپت دارای متدهای مختلفی هستند که باعث می شود تا ما بتوانیم داده ها را به راحتی درون آن ها تغییر دهیم.

Set.add() به ما کمک می کند تا هر عنصری که خواستیم را به ست خود اضافه کنیم، همانطور که من نیز قبلا بیان کردم این مقدار می تواند از نوع اشیا اولیه مثل Int و String باشد و یا می تواند حتی یک آرایه و یک ست دیگر نیز باشد.

mySet.add(6);

mySet.add('6');

mySet.add({ channelName: 'JavaScript Mastery' });

mySet.add([ 1, 2, 3 ]);

متد set.delete() به ما کمک می کند تا بتوانیم یک عنصر مشخص را از ست خود حذف کنیم.

mySet.delete(5);

set.clear() متدی است که برای حذف تمامی مقادیر از یک ست به کار می رود.

Set.has() دقیقا مانند array.includes() است که ما می توانیم با کمک آن بررسی کنیم که آیا یک ست دارای عنصری خاص هست یا خیر؟

console.log(mySet.has(5));

set.size() نیز آخرین متد است که به شما سایز ست را باز می گرداند تا بتوانید از آن استفاده کنید:

console.log(mySet.size);

تفاوت آرایه و ست

یک آرایه در واقع یک لیست مرتب شده از اشیا است، شما می توانید به یک عنصر از آرایه با کمک ارسال مقدار int مربوط به پوزیشن آن به لیست دسترسی پیدا کنید:

myArray[3]

اما یک ست یک مجموعه نامرتب از عناصر منحصر به فرد است، از آن جایی که این مجموعه نا مرتب است ایندکس از نوع عددی ندارد که بتوانید با استفاده از آن به یک عنصر خاص در این ست دسترسی پیدا کنید.

چه زمانی بهتر است از ست استفاده کنیم و چه زمانی بهتر است از آرایه استفاده کنیم؟

در ابتدا باید توجه داشته باشید که ست با آرایه فرق دارد، یعنی این به آن معنا نیست که شما می توانید به صورت کامل یک ست را جایگزین یک آرایه کنید، اما با این حال برای این که پشتیبانی از انواع مختلف اشیا را فراهم کنید می توانید از ست ها استفاده کنید.

از آن جایی که ست ها تنها شامل عناصر متمایز هستند استفاده از آن ها کار شما را راحت تر می کند، بنابراین اگر شما قصد داشته باشید که از ورود مقادیر تکراری جلوگیری کنید می توانید از آن ها به خوبی بهره مند شوید.

مپ ها در js

یک شی مپ زوج های کلید-مقدار را نگهداری می کنند و دستور درج مقادیر را به ترتیب اجرا می کنند. هر مقدار( توجه داشته باشید که هم کلید و هم مقدار از نوع اشیا اولیه هستند) می تواند هم به عنوان مقدار و هم به عنوان کلید مورد استفاده قرار گیرد.

مپ در واقع یک داده ساختار است که در سایر زبان های برنامه نویسی دیگر به جزو جاوا اسکریپت نیز وجود دارد، جاوا اسکریپت آن را در نسخه E6 معرفی کرد که به شما اجازه می دهد تا مقادیر دلخواه را به مقادیر دیگری مپ کنید. مهم ترین نکته در مپ این است که شما می توانید از اشیا به عنوان کلید استفاده کنید.

شما می توانید یک مپ را به شکل زیر تعریف کنید:

const myMap = new Map([ [key, value] ]);

مشکلاتی که توسط مپ در js حل می شود

یک شی جاوا اسکریپت تنها یک شی را به عنوان کلید پشتیبانی می کند، اگر ما اشیا زیادی را به عنوان کلید اضافه کنیم این زبان تنها آخرین مورد را نگهداری می کند و این دلیل نیاز ما به مپ است.

const myObject = {};

const a = {};

const b = {};


myObject[a] = 'a';

myObject[b] = 'b';


console.log(myObject); // { '[object Object]': 'b' }

با استفاده از مپ ها ما می توانیم کارهایی به شکل زیر را انجام دهیم:

const a = {};

const b = {};


const myMap = new Map([ [ a, 'a'], [b, 'b'] ]);

console.log(myMap); // Map { {} => 'a', {} => 'b' }

همانطور که می توانید مشاهده کنید مپ ها می توانند اشیا زیادی را به عنوان کلید ذخیره کنند.

متدهای مپ در جاوا اسکریپت

مپ دارای متدهای مختلف و متنوعی است که به شما کمک می کند تا بتوانید داده های درون آن را تغییر دهید.

Map.set() با استفاده از ست ما می توانیم زوج های کلید مقدار را به مجموعه خود اضافه کنیم.

myMap.set(key, value);

همانطور که در بالاتر نیز بیان شد کلیدها می توانند از نوع اشیا اولیه و یا هر شی دیگری باشند.

Map.delete() به شما کمک می کند تا به راحتی بتوانید عنصر دلخواه خود را از مپ پاک کنید.

myMap.delete(5);

map.clear() به شما کمک می کند تا بتوانید کل مجموعه خود را به صورت یکباره حذف کنید.

myMap.clear();

map.has() به سادگی بررسی می کند که عنصر مد نظر شما درون مپ قرار دارد یا خیر؟

console.log(myMap.has(5)); // true

map.size() این متد نیز اندازه مپ را به شما باز می گرداند که می توانید از آن برای کارهای مختلف استفاده کنید:

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

جمع بندی

حال شما به خوبی با مفهوم ست و مپ در جاوا اسکریپت آشنا شده اید، اگر در طول مسیر یادگیری این مفاهیم در جایی گیر کردید می توانید نظر خود را در بخش نظرات بنویسید تا بتوانیم به خوبی به آن پاسخ دهیم.