سلام و عرض ادب خدمت دوستان عزیز.در این جلسه قصد داریم به تفاوت‌های Object و Map در جاوا اسکریپت بپردازیم.همراه ما باشید.

Map و Object در جاوا اسکریپت برای ذخیره داده‌ها به عنوان مجموعه‌های پویا از جفت‌های کلید-مقدار استفاده می‌شوند. از آنجایی که Map از Object به ارث رسیده است، شباهت هایی بین این دو موجودیت وجود دارد و توابع نمونه اولیه Object را می توان در Map استفاده کرد.

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

Map چیست؟

map یک ساختار داده ای است که داده ها را به عنوان جفت های منحصر به فرد کلید-مقدار ذخیره می کند که در آن ترتیب درج حفظ می شود.

Object چیست؟

مفهوم یک شی بسیار شبیه به map است: داده ها را با استفاده از یک جفت کلید-مقدار ذخیره می کند. با این حال، تغییرات جزئی باعث می شود Map در شرایط خاص بهتر کار کند، عمدتاً به این دلیل که Object ترتیب درج عناصر را هنگام ذخیره داده ها حفظ نمی کند.

تفاوت‌های Object و Map

تفاوت های map و object در جاوا اسکریپت

نحوه ایجاد

map : Map را می توان با استفاده از سازنده Map در جاوا اسکریپت ایجاد کرد.

;const map = new Map([[1, "one"], [2, "two"], [3, "three"]])

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

Object: راه های زیادی برای نمونه سازی یک Object وجود دارد.

const obj1 = { 1: "one", 2: "two", 3: "three" };

const obj2 = new Object({ 1: "one", 2: "two", 3: "three" });

const obj3 = Object.create(obj1);

const obj1 = { 1: "one", 2: "two", 3: "three" };

const obj2 = new Object({ 1: "one", 2: "two", 3: "three" });

const obj3 = Object.create(obj1);

در مثال بالا، obj1 با استفاده از نحو لغوی Object ایجاد می شود در حالی که سازنده Object برای obj2 استفاده می شود. در obj3، یک Object را ارسال کردیم که باید نمونه اولیه Object تازه ایجاد شده باشد. نوع داده فیلد کلید در Object به رشته ها و نمادها محدود می شود. در نتیجه، کلیدهایی که به عنوان اعداد در قطعه کد بالا داده شده اند، به صورت داخلی به رشته تبدیل می شوند.

2. دستکاری ایتم ها

Map: متد های get , set , delete

در Map باید از متد () set برای درج مقادیر، از متد ()get برای دسترسی به عناصر و از متد () delete برای حذف عناصر استفاده کنیم.

const map = new Map();

map.set(1, "one");

console.log(map.get(1)); // output: one

map.delete(1);
console.log(map); // Map(0) {}

const map = new Map();

map.set(1, "one");

console.log(map.get(1)); // output: one

map.delete(1);

console.log(map); // Map(0) {}

متد ()set برای مقدار دهی اولیه کلید و مقدار یک عنصر Map به دو پارامتر نیاز دارد. از طرف دیگر، متد ()get مقدار کلیدی را که به عنوان پارامتر ارسال می کنیم برمی گرداند. ما می توانیم یک عنصر را با ارسال کلید به متد ()delete حذف کنیم.

Object: برای دسترسی به عناصر موجود در یک Object می‌توانیم از علامت نقطه یا علامت براکت استفاده کنیم.

const obj = {};

obj.a = "one"
obj["b"] = "two"

console.log(obj.a); // output: one
console.log(obj["b"]); //output: two

delete obj.a
delete obj["b"]
console.log(obj); // output: {}

const obj = {};

obj.a = "one"

obj["b"] = "two"

console.log(obj.a); // output: one

console.log(obj["b"]); //output: two

delete obj.a

delete obj["b"]

console.log(obj); // output: {}

نشانه گذاری نقطه ( دات نوتیشن)ساده است و ما می توانیم مستقیماً با کلید آنها به عناصر دسترسی پیدا کنیم. از طرف دیگر، هنگام دسترسی پویا به عنصر باید از نماد براکت مربع به طور کامل استفاده شود. همچنین، می توانیم از کلمه کلیدی delete برای حذف عناصر از یک Object استفاده کنیم.

3. خواندن کلید و مقادیر

Map: در Map، می‌توانیم از متد ()keys برای دریافت لیست کلیدها استفاده کنیم.

const map = new Map([[1, "one"], [2, "two"]]);

console.log(map.keys()); // output: [Map Iterator] { 1, 2 }
console.log(Array.from(map.keys())); // output: [1, 2]

console.log(map.values()); // output: [Map Iterator] { 'one', 'two' }
console.log(Array.from(map.values())); // output: ['one', 'two']

console.log(map.entries()); // output [Map Iterator] { [1, 'one'], [2, 'two'] }
console.log(Array.from(map.entries())); // output [ [1, 'one'], [2, 'two']  ]

const map = new Map([[1, "one"], [2, "two"]]);

console.log(map.keys()); // output: [Map Iterator] { 1, 2 }

console.log(Array.from(map.keys())); // output: [1, 2]

console.log(map.values()); // output: [Map Iterator] { 'one', 'two' }

console.log(Array.from(map.values())); // output: ['one', 'two']

console.log(map.entries()); // output [Map Iterator] { [1, 'one'], [2, 'two'] }

console.log(Array.from(map.entries())); // output [ [1, 'one'], [2, 'two'] ]

()map.keys یک Map Iterator را با کلیدها برمی گرداند، در حالی که ()map.values یک Map Iterator را با مقادیر برمی گرداند. از طرف دیگر،()map.entries را می توان برای برگرداندن Map Iterator با جفت های کلید-مقدار استفاده کرد. ما می توانیم این تکرار کننده ها را با استفاده از ()Array.from به آرایه تبدیل کنیم.

Object:برای بدست آوردن کلیدهای یک Object، می توانیم از ()Object.keys و برای بدست آوردن مقادیر از ()Object.values استفاده کنیم، در حالی که ()Object.entries می تواند برای بدست آوردن جفت های key-value استفاده شود.

const obj = { 1: "one", 2: "two" };

console.log(Object.keys(obj)); // output: ['1', '2']

console.log(Object.values(obj)); // output: ['one', 'two']

console.log(Object.entries(obj)); // output: [ ['1', 'one'], ['2', 'two'] ]

const obj = { 1: "one", 2: "two" };

console.log(Object.keys(obj)); // output: ['1', '2']

console.log(Object.values(obj)); // output: ['one', 'two']

console.log(Object.entries(obj)); // output: [ ['1', 'one'], ['2', 'two'] ]

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

4. بررسی وجود کلید

map: Map دارای متد ()has برای بررسی وجود کلید است.

console.log(map.has(2)); // output: true or false

1	console.log(map.has(2)); // output: true or false

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

console.log(2 in obj); // output: true or false
console.log(obj.hasOwnProperty(2)); // output: true or false

1 2	console.log(2 in obj); // output: true or false console.log(obj.hasOwnProperty(2)); // output: true or false

5. به دست اوردن اندازه

Map: با استفاده از ویژگی size می توانیم اندازه یا تعداد عناصر نقشه را بدست آوریم.

console.log(map.size); // output: 2

1	console.log(map.size); // output: 2

Object: می توانیم اندازه یک Object را مطابق شکل زیر بدست آوریم.

console.log(Object.keys(obj).length); // output: 2

1	console.log(Object.keys(obj).length); // output: 2

در اینجا، آرایه کلیدها را از Object دریافت کردیم و از length برای بدست آوردن تعداد عناصر، مشابه اندازه Object استفاده کردیم.

6. iteration

Map: چندین روش برای تکرار روی عناصر در map وجود دارد. مثال کد زیر تکرار با استفاده از حلقه‌های for و forEach را نشان می‌دهد.

//method 1
for (const [ key, value ] of map) {
	console.log(value);
};
//method 2
map.forEach((value, key) => console.log(value));

//method 1

for (const [ key, value ] of map) {

console.log(value);

};

//method 2

map.forEach((value, key) => console.log(value));

Object: مشابه مپ، Object نیز می تواند به طرق مختلف تکرار شود. مثال کد زیر تکرار با استفاده از حلقه‌های for و forEach را نشان می‌دهد.

//method 1
for (const [key, value ] of Object.entries(obj)) {
	console.log(value);
};

//method 2
Object.entries(obj).forEach(([ key, value ]) => console.log(value));

//method 1

for (const [key, value ] of Object.entries(obj)) {

console.log(value);

};

//method 2

Object.entries(obj).forEach(([ key, value ]) => console.log(value));

برخلاف map، ما به توابع کمکی برای دسترسی به جفت‌های کلید-مقدار در Object نیاز داریم.

چه زمانی از Map و Object استفاده کنیم?

Map عملکرد بالاتری دارد و برای نوشتن به کد کمتری نیاز دارد که به آنها برتری نسبت به Object می دهد.

موارد زیر مواردی است که می توانید از Map استفاده کنید:

اگر می خواهید از انواع داده های پیچیده به عنوان کلید استفاده کنید.
اگر حفظ ترتیب درج کلیدهای شما الزامی است.
هنگام انجام هش.

با این حال، برخی موارد استفاده از یک شی را ضروری می کند. در زیر به برخی از آنها اشاره می شود:

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

سخن پایانی

اگرچه map عملکرد بهتری دارد، اما همه چیز به نوع داده های مورد استفاده و عملیاتی که باید انجام شود برمی گردد. در موقعیت های مناسب از Map و Object عاقلانه استفاده کنید.

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

سایر مقالات:

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

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

برای امتیاز به این نوشته کلیک کنید!

[کل: 5 میانگین: 4.2]

اشتراک‌گذاری

کاتلین کوروتین چیست و دارای چه ویژگی هایی می‌باشد ؟ نوشته قبل

توابع pure نوشته بعد

علی فرجی

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