نقشه یا Map در جاوااسکریپت (قسمت سی و نهم)

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

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

از این روش ممکن است در پروژه ها کمتر استفاده شود اما یکی از مباحث اصلی جاوااسکریپت است.

این نوع داده دارای متدها و خصوصیاتی مخصوص است این که همگی را آموزش میدهیم.البته تعداد متدها بیشتر از نوع Set است.

نحوه تعریف یک مجموعه با Map

برای ایجاد Map در جاوااسکریپت با استفاده از دستور new می بایست از روی تابع سازنده Map یک آبجکت ایجاد نماییم.

مثال:

new Map();

1	new Map();

اضافه کردن آیتم جدید به Map با متد set

برخلاف دستور Set که می توان مستقیم و در قالب آرایه، مقادیر خود را به تابع Set ارسال کنیم. در نقشه برای اضافه کردن یک مقدار جدید باید از متد set استفاده نمائیم.

به همین منظور این متد دو مقدار key و value از شما دریافت می کند.

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

با متد set می توان مقدار قبلی کلید موردنظر را تغییر بدهید.

مثال:

const letters = new Map();
letters.set("name1","amir javanmir");
console.log(letters);
//Map(1) {'name1' => 'amir javanmir'}

const letters = new Map();

letters.set("name1","amir javanmir");

console.log(letters);

//Map(1) {'name1' => 'amir javanmir'}

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

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

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

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
console.log(letters);
//Map(2) {'name' => 'amir javanmir', 'age' => '30'}

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

console.log(letters);

//Map(2) {'name' => 'amir javanmir', 'age' => '30'}

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

مثال:

const letters = new Map([["name","amir javanmir"],["name","30"]]);
console.log(letters);
//Map(1) {'name' => '30'}

const letters = new Map([["name","amir javanmir"],["name","30"]]);

console.log(letters);

//Map(1) {'name' => '30'}

متد get

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

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
letters.get("name");
//amir javanmir

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

letters.get("name");

//amir javanmir

متد delete

یک مقدار مشخص را از map شما حذف می کند.

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

برای حذف باید نام کلید را درج کنیم.

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
letters.delete("age");
//true

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

letters.delete("age");

//true

متد clear

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

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
letters.clear()
//Map(0) {size: 0}

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

letters.clear()

//Map(0) {size: 0}

متد has

با استفاده از این متد می توان وجود یک مقدار در یک Map را بررسی کرد. در صورت وجود داشتن مقدار true برگشت می دهد.

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
letters.has("name")
//true

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

letters.has("name")

//true

متد keys

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

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
letters.keys();
//MapIterator {'name', 'age'}

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

letters.keys();

//MapIterator {'name', 'age'}

متد values

از این متد درون Map استفاده میشود و آرایه ای iterator از مقادیر آیتم ها را برگشت می‌دهد.

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
letters.values();
//MapIterator {'amir javanmir', '30'}

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

letters.values();

//MapIterator {'amir javanmir', '30'}

متد forEach

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

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
letters.forEach(function(value,key) {
console.log(key + ' = ' + value);
});
/*
name = amir javanmir
VM601:3 age = 30
*/

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

letters.forEach(function(value,key) {

console.log(key + ' = ' + value);

});

name = amir javanmir

VM601:3 age = 30

متد entries

با استفاده از این متد درون Map می توانیم یک آبجکت iterator که دارای کلید و مقدار است بازگشت دهیم و از آن در دستور for…of استفاده نماییم. در حالت عادی کلید و مقدار در خروجی با , از هم جدا میشوند.

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
for(let x of letters.entries()){
console.log(x);
}
/*
(2) ['name', 'amir javanmir']
(2) ['age', '30']
*/

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

for(let x of letters.entries()){

console.log(x);

}

(2) ['name', 'amir javanmir']

(2) ['age', '30']

حلقه بر روی کلیدهای نقشه

برای حلقه بر روی کلیدهای یک نقشه می توان از دستور for…of استفاده کرد. در این نوع حلقه برای دریافت کلید از متد keys استفاده میکنیم.

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
for(let x of letters.keys()){
console.log(x);
}
/*
name
age
*/

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

for(let x of letters.keys()){

console.log(x);

}

name

age

حلقه بر روی مقادیر نقشه

برای حلقه بر روی مقادیر یک نقشه می توان از دستور for…of استفاده کرد. در این نوع حلقه برای دریافت مقدار از متد values استفاده می‌کنیم.

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
for(let x of letters.values()){
console.log(x);
}
/*
amir javanmir
30
*/

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

for(let x of letters.values()){

console.log(x);

}

amir javanmir

حلقه بر روی کلید و مقدار در نقشه

در صورتی که بخواهیم بر روی آیتم های نقشه حلقه ایجاد کنیم علاوه بر دستور for…of باید از متد entries استفاده کنیم. این متد یک iterator که دارای کلید و مقدار است برگشت می دهد. در این روش برای جداسازی کلید و مقدار می توانیم از روش [destructing] استفاده کنیم.

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
for(let [x,y] of letters.entries()){
console.log("key is "+x+" and value is "+y);
}
/*
key is name and value is amir javanmir
key is age and value is 30

*/

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

for(let [x,y] of letters.entries()){

console.log("key is "+x+" and value is "+y);

}

key is name and value is amir javanmir

key is age and value is 30

خصوصیت size

یک مقدار عددی که بیانگر تعداد آیتم های موجود درون نقشه Map است.

مثال:

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
letters.size;
//2

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

letters.size;

//2

تفاوت Map با آبجکت

از لحاظ iterable بودن: آبجکت مستقیما iterable نیست اما Map دارای iterable مستقیم درونی است.
از لحاظ خصوصیت size: دستور Map دارای خصوصیت size است اما آبجکت اندازه آیتم برگشت نمی‌دهد.
از لحاظ کلید: در دستور map نوع کلیدش حتما باید رشته یا symbol باشد در صورتی که آبجکت کلیدش می تواند از هر نوع داده ای باشد.
چیدمان کلید: در آبجکت کلیدها به خوبی چیدمان نشده اند اما در Map کلیدها سفارشی و مرتب است.
از لحاظ پیش فرض بودن: آبجکت دارای کلید پیش فرض است اما Map نیست.

ترفندهای کار کردن با Set و Map

شما می توانید هر مقداری که دارای iterator درونی هستند چه Map چه Set چه String و … از عملگر spread (…) استفاده نمائید.

مثال:

const letters = new Set(["a","b","c"]);
[...letters];
//(3) ['a', 'b', 'c']

const letters = new Set(["a","b","c"]);

[...letters];

//(3) ['a', 'b', 'c']

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
[...letters];
//(2) [Array(2), Array(2)]

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

[...letters];

//(2) [Array(2), Array(2)]

روش دیگر تبدیل هر نوع آبجکتی که قابلیت iterable شدن به آرایه را دارند، استفاده از متد from از طریق تابع سازنده Array است.

مثال:

const letters = new Set(["a","b","c"]);
Array.from(letters);
//(3) ['a', 'b', 'c']

const letters = new Set(["a","b","c"]);

Array.from(letters);

//(3) ['a', 'b', 'c']

const letters = new Map([["name","amir javanmir"], ["age","30"]]);
Array.from(letters);
//(2) [Array(2), Array(2)]

const letters = new Map([["name","amir javanmir"], ["age","30"]]);

Array.from(letters);

//(2) [Array(2), Array(2)]

حذف عناصر تکراری از یک آرایه با روش سریع

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

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

مثال:

let arr = [10,20,4,7,4,20];
let arrFilter = Array.from(new Set(arr));
console.log(arrFilter);
//(4) [10, 20, 4, 7]

let arr = [10,20,4,7,4,20];

let arrFilter = Array.from(new Set(arr));

console.log(arrFilter);

//(4) [10, 20, 4, 7]

کلمات کلیدی را وارد نمایید

نقشه یا Map در جاوااسکریپت (قسمت سی و نهم)

آموزش جاوااسکریپت ES5

نحوه تعریف یک مجموعه با Map

اضافه کردن آیتم جدید به Map با متد set

متد get

متد delete

متد clear

متد has

متد keys

متد values

متد forEach

متد entries

حلقه بر روی کلیدهای نقشه

حلقه بر روی مقادیر نقشه

حلقه بر روی کلید و مقدار در نقشه

خصوصیت size

تفاوت Map با آبجکت

ترفندهای کار کردن با Set و Map

حذف عناصر تکراری از یک آرایه با روش سریع

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش جاوااسکریپت ES5

دسترسی سریع

کلمات کلیدی را وارد نمایید

نقشه یا Map در جاوااسکریپت (قسمت سی و نهم)

آموزش جاوااسکریپت ES5

نحوه تعریف یک مجموعه با Map

اضافه کردن آیتم جدید به Map با متد set

متد get

متد delete

متد clear

متد has

متد keys

متد values

متد forEach

متد entries

حلقه بر روی کلیدهای نقشه

حلقه بر روی مقادیر نقشه

حلقه بر روی کلید و مقدار در نقشه

خصوصیت size

تفاوت Map با آبجکت

ترفندهای کار کردن با Set و Map

حذف عناصر تکراری از یک آرایه با روش سریع

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش جاوااسکریپت ES5

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب