استفاده از Set و Map در JavaScript

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

در گذشته تنها راه ذخیره‌سازی گروهی اطلاعات استفاده از دو ساختار آرایه و object بود. هرچند هنگام استفاده از این دو محدودیت‌هایی وجود داشت که به عنوان مثال می‌توان به موارد زیر اشاره کرد:

· آرایه‌ها می‌توانند مقادیر تکراری را ذخیره کنند.

·  برای object ها متدی برای بازیابی تعداد عناصر object وجود ندارد.

· تنها نوع داده string در object ها قابل ذخیره‌سازی است. از طرفی object ها ترتیب ذخیره‌سازی اطلاعات را نگهداری نمی‌کنند.

· توسعه دهندگان بر اساس نیازمندی خود تنها باید یکی از این دو روش را برای ذخیره‌سازی اطلاعات استفاده کنند.

· برای انجام برخی عملیات‌های پیچیده نیازمند کتابخانه‌های خارجی مثل lodash هستیم.

اما با معرفی ES6 در سال ۲۰۱۵ خیلی از کمبود‌های جاوااسکریپت رفع شد و بهبود پیدا کرد. در ES6 شاهد ظهور Map و Set هستیم که محدودیت‌های یاد شده برای آرایه‌ها و object رو مرتفع کرده است.

مفهوم Set و Map چیست؟

همانطور که در بالا ذکر شد Set و Map در ES6 معرفی شده است.

Set مجموعه‌ای از داده‌هاست که در آن داده‌ها بدون تکرار هستند. بنابراین در این ساختار داده عناصر تکراری وجود ندارند.  همچنین این مجموعه دارای ترتیب است. در Set ساختار key:value وجود ندارد.

در طرف دیگر Map ساختاری متشکل از امکانات object و array با یکدیگر است. Map مانند object مجموعه‌ای از key:value هاست که در آن داده‌ها به صورت ترتیبی ذخیره می‌شوند و همچنین دارای متدی برای دریافت تعداد داده‌هاست.

 Set:

برای ساخت یک set در ES6 کافیست از دستور زیر استفاده کنیم:

const set = new Set();

 حال برای اضافه کردن یک داده در set از متد ()add استفاده میکنیم:

const set = new Set();

set.add('sokanAcademy');

set.add('digiKala');

set.add('snappMarket');

set.add('cafeBazzar');

// add duplicate value : 'sokanAcademy'

set.add('sokanAcademy');

console.log(set);

// set = {'sokanAcademy', 'digiKala', 'snappMarket', 'cafeBazzar'}

 اگر دقت کرده باشید در کد بالا داده‌ی تکراری به set اضافه شد اما در نتیجه‌ی نهایی تنها ما داده‌های یکتا داریم. بنابراین در این ساختار داده داده‌های تکراری وجود ندارند.

برای حذف کردن یک داده از set از متد ()delete استفاده می‌کنیم:

set.delete('sokanAcademy');
// set = {'digiKala', 'snappMarket', 'cafeBazzar'}

 همچنین برای حذف کردن همه‌ی داده‌ها از set می‌توان از متد clear() استفاده کرد:

set.clear();
// set = {}

 برای به دست آوردن تعداد عناصر set از size. استفاده می‌کنیم:

console.log(set.size);
// 3

 برای دستیابی به المان‌ها در set از SetIterator استفاده میکنیم. برای این منظور به صورت زیر عمل می‌کنیم:

let iterator = set.values();
console.log(iterator.next().value);

 همچنین می‌توان از forEach در set استفاده نمود:

set.forEach(v => console.log(v));

 برای بررسی وجود یک داده در set می‌توان از متد ()has استفاده کرد:

console.log(set.has('sokanAcademy'));

برای تبدیل یک آرایه به یک set می‌توان به عنوان ورودی Set آرایه را به آن ارسال کرد:

const arr = [1, 2, 3];
const set = new Set(arr);

 از آنجایی که set ساختار key:value ندارد متدهایی مانند ()keys و ()entries در آن تعریف شده نیستند.

 تفاوت Set و Array

Set و Array از بسیاری جهات شبیه به یکدیگر هستند. با این وجود تفاوت‌هایی با یکدیگر دارند. بزرگترین تفاوت این دو این است که در set بر خلاف Array عناصر تکراری ذخیره نمی‌شوند. همچنین در Set عناصر در زمان ذخیره‌سازی دارای ترتیب هستند.

در set عملیات‌های اجتماع و اشتراک تعریف شده هستند. بنابراین به عنوان مثال می‌توان تفاوت دو set را با یکدیگر بررسی کرد.

 برای آشنایی بیشتر با set می‌توانید به لینک زیر مراجعه کنید:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

Map

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

const map = new Map();

 در Map مانند object ها ساختار key:value وجود دارد. بنابراین برای اضافه کردن داده جدید در Map باید یک کلید به آن اضافه کرد. برای اضافه کردن داده جدید از دستور زیر استفاده می‌شود:

const map = new Map();
map.set('Name', 'SokanAcademy');
map.set('Field', 'Computer Science');
map.set('Location', 'Tehran, Iran');

// Map(3) {'Name' => 'SokanAcademy','Field' => 'Computer Science','Location' => 'Tehran, Iran'}

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

map.delete('Name');

// Map(3) {'Field' => 'Computer Science','Location' => 'Tehran, Iran'}

برای حذف همه عناصر Map از متد ()clear استفاده می‌شود:

map.clear();

// Map(3) {}

برای دستیابی به اندازه Map از size استفاده می‌شود:

console.log(map.size);

// 3

 برای دریافت مقدار یک داده در Map از ()get استفاده می‌کنیم:

console.log(map.get('Name'));

// SokanAcademy

 می‌توان برای دریافت کلیدها و مقادیر از متدهای ()key و ()values استفاده کرد:

console.log(map.keys());

// { 'Name', 'Field', 'Location' }

console.log(map.values());

// { 'SokanAcademy', 'Computer Science', 'Tehran, Iran' }

 همچنین می‌توان از forEach در Map به صورت زیر استفاده نمود:

map.forEach((value, key) => {

  // do something

});

 برای بررسی وجود یک مقدار در Map از متد ()has استفاده می‌کنیم. این متد بررسی میکند که کلید مورد نظر وجود داشته باشد:

console.log(map.has('Name'));

// true

 برای تبدیل یک object به Map به صورت زیر عمل میکنیم:

const obj = {
  Name: 'SokanAcademy',
  Field: 'IT Company',
  Location: 'Tehran, Iran'
};

const map = new Map(Object.entries(obj)); //object to map

const anotherObj = Object.fromEntries(map); // map to object

 همانطور که میبینید برای ساخت یک object از یک Map از متد ()fromEntries استفاده شده است.

برای آشنایی بیشتر با Map می‌توانید به لینک زیر مراجعه کنید:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

سخن پایانی:

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

سکان آکادمی امیدوار است که این مقاله مورد استفاده شما قرار گرفته شده باشد.