دوره آموزش ECMAScript6 قسمت دوم: آرایه ها و آبجکت ها، set و map

در این قسمت به بروز رسانی‌های آرایه و آبجکت در ECMAScript6 می‌پردازیم.

مثال زیر را ببینید:

var fruits = ['apple', 'banana', 'orange']
var fruit1 = fruits[0];
var fruit2 = fruits[1];
var fruit3 = fruits[2];

در بالا به روشی که می‌بینید سه متغیر را با آیتم‌های آرایه مقدار دهی کردیم. در ES6 می‌توانید از روش جدید زیر برای این کار استفاده کنید:

var fruits = ['apple', 'banana', 'orange']
var [fruit1,fruit2,fruit3]= fruits;

به مقدار دهی زیر نیز دقت کنید:

var fruit1,fruit2;
[fruit1,fruit2] = ['apple', 'banana'];

البته این مقدار دهی را می‌توان با توابع نیز انجام داد. مثال زیر را ببینید:

var fruit1,fruit2;
function test(){
	return ['apple', 'banana'];
}
[fruit1,fruit2] = test();

در مثال پایین به متغیرها با روشی که می‌بینید مقدار دهی می‌کنیم:

var fruit1,fruit2;
function test(){
	return ['apple', 'banana', 'orange', 'mango'];
}
[,fruit1,fruit2,] = test();

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

ترکیب آرایه‌ها در ES6

در مثال زیر به سادگی دو آرایه را در هم ترکیب نمودیم:

var arr1 = ['apple', 'banana'];
var arr2 = ['orange', ...arr1, 'mango'];
console.log(arr2);

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

["orange", "apple", "banana", "mango"]

مقدار دهی به آیتم‌ها با استفاده از object در ES6

همانطور که در بالا با استفاده از آرایه متغیرها را مقدار دهی کردیم در ادامه قصد داریم این کار را با استفاده از آبجکت انجام دهیم:

var object = {a: 1, b: 2};
var {a:one,b:two} = object;
console.log(one);
console.log(two);

در بالا دو متغیر به نام‌های one و two را با روشی که می‌بینید مقدار دهی کردیم. اگر بخواهیم متغیرهایی با همان نام ایجاد کنیم دیگر نیازی به استفاده از دو نقطه و انتساب نیست، مانند زیر:

var object = {a: 1, b: 2};
var {a,b} = object;
console.log(a);
console.log(b);

نکته: هیچ الزامی به مقدار دهی تمام آیتم‌ها نیست.

اگر یکی از آیتم‌ها آرایه باشد نیز به سادگی آن آرایه به متغیر نسبت داده شده و در خروجی آرایه چاپ می‌شود:

var object = {a: 1, b: 2, c:[3,4,5]};
var {a:one,b:two,c:three} = object;
console.log(three);

البته می‌توان مقادیر را از همین آرایه نیز دریافت کرد:

var object = {a: 1, b: 2, c:[3,4,5]};
var {a:one,b:two,c:[three,four,five]} = object;
console.log(three +", "+ four +", "+ five);

می توان به سادگی با روش ویرگول گذاری که در بخش قبل گفتیم فقط یک آیتم آرایه را مقدار دهی نمود:

var object = {a: 1, b: 2, c:[3,4,5]};
var {a:one,b:two,c:[,,five]} = object;
console.log(five);

نتیجه خروجی فوق عدد 5 است.

مقدار دهی به آبجکت ها به روشی جالب

در پایین مثال جالبی می‌بینید که به سادگی با آبجکت‌ها مقدار دهی می‌کنیم:

let type = "website";
let name = "hitos.ir";
let info = {
	type,
	name
}
console.log(info);

خروجی دستور فوق مانند زیر است:

{type: "website", name: "hitos.ir"}

ساخت Object با استفاده از تابع

مثال زیر را ببینید:

function test(name, value){
	return {name: value};
}
console.log(test('website', 'hitos.ir'));

خروجی دستور فوق به شکل زیر است:

{name: "hitos.ir"}

همانطور که در بالا می‌بینید باید به جای name مقدار website قرار می‌گیرفت. برای این کار مانند زیر عمل می‌کنیم:

function test(name, value){
	return {[name]: value};
}
console.log(test('website', 'hitos.ir'));

که خروجی مانند زیر خواهد بود:

{website: "hitos.ir"}

استفاده از متد assign برای ادغام عناصر آبجکت

مثال زیر را ببینید:

let object_1= {one: 1, two: 2};
let object_2= {three: 3, four: 4};
let object_3= {five: 5};
let copy = Object.assign({}, object_1, object_2, object_3);
console.log(copy);

همانطور که در بالا می‌بینید در سه سطر اول سه آبجکت داشتیم که در سطر چهارم با استفاده از Object.assign سعی کردیم تمام آبجکت‌ها را در »تغیر copy قرار دهیم.

اگر ورودی اول assign را برابر {} قرار ندهیم تمام مقادیر در ورودی اول که در مثال فوق object_1 است کوپی می‌شوند.

موجودیت set در اکما اسکریپت 6

تا پیش از این تنها از آرایه‌ها و آبجکت‌ها برای دسته بندی اطلاعات استفاده می‌کردیم، ولی در نسخه جدید JavaScript موجودیت set را نیز می‌توانیم استفاده کنیم.

در واقع set مانند یک آرایه است که مقادیر تکراری را نمی‌تواند در خود جای دهد. مثلا:

let array = [1,2,3,3];
console.log(array);
console.log(array.length);

let set = new Set([1,2,3,3]);
console.log(set);
console.log(set.size);

خروجی به شرح زیر خواهد بود:

(4) [1, 2, 3, 3]
4
Set(3) {1, 2, 3}
3

همانطور که می‌بینید خروجی سوم با نام set تنها سه مقدار دارد و طول آن نیز 3 است.

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

let set = new Set(["one","one","three","four"]);
console.log(set);

خروجی دستور فوق نیز به شرح زیر است:

Set(3) {"one", "three", "four"}

از متد add برای اضافه کردن آیتم به set و از delete برای پاک کردن آیتم استفاده می‌شود. مثال:

let set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set);
set.delete(1);
console.log(set);

 در دستور فوق با سه بار استفاده از متد add سه مقدار به set اضافه کردیم و با دستور delete مقدار یک را حذف کردیم. خروجی دستورات فوق به شرح زیر است:

Set(3) {1, 2, 3}
Set(2) {2, 3}

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

let set = new Set([1,2,3]);
console.log(set.has(5));

خروجی دستور فوق false است.

با متد clear اطلاعات موجود در set را پاک می‌کنیم:

let set = new Set([1,2,3]);
set.clear();
console.log(set);

 موجودیت map در اکما اسکریپت 6

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

let map = new Map([['type','website'],['name','hitos'],['name','hitos.ir']]);
console.log(map);
console.log(map.size);
console.log(map.has('type'));
map.set('port',80);
console.log(map);
map.delete('type');
console.log(map);
map.clear();
console.log(map);

سطر اول: یک شی جدید از نوع Map و با مقادیری که در بالا می‌بینید ایجاد کردیم.

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

Map(2) {"type" => "website", "name" => "hitos.ir"}

سطر سوم: اندازه map را در این جا دریافت می‌کنیم که معادل عدد 2 است.

سطر چهارم: در این سطر بررسی می‌کنیم که آیا موجودیت type در آرایه وجود دارد یا خیر که در این جا true چاپ می‌شود.

سطر پنجم: مقدار جدیدی به نام port با مقدار 80 به map اضافه می‌کنیم.

سطر ششم: اطلاعات جدید را چاپ می‌کنیم که به شرح زیر خواهد بود:

Map(3) {"type" => "website", "name" => "hitos.ir", "port" => 80}

سطر هفتم: از بین شیء‌ها type را حذف می‌کنیم.

سطر هشتم: map را چاپ می‌کنیم که خروجی به شرح زیر خواهد بود:

Map(2) {"name" => "hitos.ir", "port" => 80}

سطر نهم: map را کاملا خالی می‌کنیم.

سطر دهم: در این جا بدلیل خالی بودن map اطلاعاتی برای نمایش در خروجی وجود ندارد.

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