بررسی کاربرد Map و Set در جاوااسکریپت (مقدماتی)

در این مطلب قصد داریم تا با دستورات Map و Set آشنا شویم. این دو مورد را می‌توان ساختارهای داده‌ای جدیدی دانست که در ES6 به جاوااسکریپت اضافه شدند. در این مطلب به صورت ساده آن‌ها را توضیح خواهیم داد و پس از آن دلایل استفاده از این موارد را در مقابل آرایه و شئ خواهیم گفت.

Set

ابتدای کار بیایید یک آرایه جدید را که شامل اعداد ۱ تا ۵ می‌شود ایجاد کنیم. بعد از انجام این کار این آرایه را به یک Set تبدیل می‌کنیم:

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

اما چرا قرار است از Set استفاده کنیم؟ Set تنها مقادیر غیر تکراری را (در هر نوعی از داده) در خود نگه‌داری می‌کند. بنابراین در سناریوهای واقعی Set باعث می‌شود تا تمام اعضای تکراری یک آرایه حذف شوند. برای انجام چنین کاری تنها کافی‌ست تا یک متغیر جدید را اضافه کرده و مقدار Set همراه با آرایه مورد نظر را در آن قرار دهیم. این دقیقاً کاری‌ست که در قطعه کد قبلی انجام دادیم.

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

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

حال اگر شما به داده‌های mySet دقت کنید متوجه خواهید شد که خروجی به صورت زیر است:

{ 1, 2, 3, 4, 5 }

همانطور که مشاهده می‌کنید Set در این حالت تمام مقادیر تکراری را از آرایه myArray حذف کرده است.

موضوع بعدی که باید بدانید آن است که می‌توانید از طریق داده‌های موجود در یک ساختار Set یک آرایه جدید را ایجاد کنید (داده‌هایی که اینبار دیگر محتوای تکراری ندارند). برای انجام چنین کاری می‌توانید به صورت زیر عمل نمایید:

const uniqueArray = [...mySet];

اگر خروجی uniqueArray را مشاهده کنید لیست زیر را مشاهده خواهید کرد:

[ 1, 2, 3, 4, 5 ]

متد‌های مربوط به Set

دستور Set چندین متد متفاوت در اختیار دارد که به ما اجازه می‌دهد تا داده‌های مربوط به آرایه‌مان را ویرایش کنیم.

()Set.add متدی‌ست که به ما اجازه می‌دهد تا هر شکلی از داده‌ها را به Set مورد نظر اضافه کنیم. همانطور که قبلاً اشاره کردم Set برای هر نوع داده‌ای استفاده خواهد شد. این داده می‌تواند عدد، رشته، یک آرایه دیگر و یا حتی یک شئ باشد.

mySet.add(6);
mySet.add('6');
mySet.add({ channelName: 'JavaScript Mastery' });
mySet.add([ 1, 2, 3 ]);

Set.delete() متدی‌ست که به ما قابلیت حذف یک المان را از لیست مورد نظر می‌دهد:

mySet.delete(5);

Set.clear() متدی‌ست که ورودی نمی‌گیرد؛ با استفاده از این متد می‌توانید تمام داده‌های موجود در یک لیست را پاک کنید.

mySet.clear();

Set.has() متدی‌ست که یک مقدار boolean را برمی‌گرداند. این مقدار براساس وجود یا نبود یک مقدار در set برگشت داده می‌شود.

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

Set.size() متدی‌ست که تعداد خانه‌های set را بررسی می‌کند.

console.log(mySet.size);

تفاوت میان Set و Array

آرایه لیستی از اشیاء ترتیبی است که از طریق ایندکس (براساس اعداد صحیح) قابل دسترس است. اما Set مجموعه‌ای از داده‌هاست که به صورت غیرمرتب و البته منحصر به فرد (غیرتکراری) قرار گرفته، از این رو هیچگونه ایندکسی در این ساختار وجود ندارد.

چه زمانی از Set در مقابل Array باید استفاده شود؟

ابتدای امر باید این موضوع را درک کنید که Set نسبت به Array متفاوت است. از این رو نمی‌تواند به صورت کامل جایگزین آرایه شود. با این حال Set کاربردهایی را ارائه می‌کند که در آرایه وجود ندارد. اگر قرار است با مجموعه‌ای از داده‌ها سر و کار داشته باشید اما قصد وجود المان تکراری در آن‌ها را ندارید می‌توانید از Set در مقابل آرایه استفاده کنید.

Map

دستور Map مقادیر Key-Value را در خود نگه‌ داشته و ترتیب Keyها را براساس ایجاد‌شان به خاطر می‌سپرد. هر مقداری در این ساختار ممکن است یا به صورت Key و یا به صورت Value استفاده شود.

Map یک ساختار داده‌ای است و جدای از جاوااسکریپت در زبان‌های برنامه‌نویسی دیگری نیز موجود است. برای تعریف Map در جاوااسکریپت می‌توانید به صورت زیر اقدام نمایید:

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

مشکلی که Map حل می‌کند:

ساختار داده Object در جاوااسکریپت تنها از یک Key در تعریف شئ پشتیبانی می‌کند. اگر چندین Key Object را وارد کنیم تنها مورد آخر ذخیره خواهد شد. اما Map بدین شکل نیست:

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 می‌تواند چندین Object را به عنوان Key ذخیره کند.

متدهای Map

Map متدهای متفاوتی دارد که به ما اجازه می‌دهد تا داده‌های داخل آن را ویرایش کنیم.

Map.set() متدی‌ست که به ما اجازه می‌دهد تا یکسری Key و Value را تعیین کنیم:

myMap.set(key, value);

در ساختار Map مقدار Key می‌تواند یک شئ و یا یکی از ساختارهای اولیه باشد.

map.delete() متدی‌ست که برای حذف یک المان از یک Map استفاده می‌شود:

myMap.delete(5);

Map.clear() متدی‌ست که تمام المان‌های موجود را حذف خواهد کرد.

myMap.clear();

map.has()متدی‌ست برای بررسی وجود یا عدم وجود یک مقدار استفاده می‌شود. خروجی این متد یک مقدار boolean خواهد بود.

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

map.size() متدی‌ست که تعداد المان‌های موجود در Map را برمی‌گرداند.

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

در این مطلب سعی کردیم تا شما را با یکی از ویژگی‌های مهم ES6 آشنا کنیم.برای آشنایی بیشتر با توانایی‌های این استاندارد می‌توانید دیگر مقالات آموزشی بنده را در صفحه ام «حسین شاه محمدی» مشاهده نمایید.

منبع:

freecodecamp