آموزش ویژگی های ECMAScript 6 (جلسه 13) : موارد بهبود یافته Object

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۱۸ مرداد ۱۳۹۶

همونطور که اطلاع دارید در جلسه قبل در مورد عملگر Spread توضیحاتی رو قرار دادیم و شما رو با اون آشنا کردیم. در این جلسه میخوایم در موارد بهبودیافته Object‌ها در ES6 توضیح بدیم. همونطور که میدونین تقریبا هر چیزی که در Javascript وجود داره، یک Object هست. مثلا توابع در Javascript نوعی خاص از object هستند و همچنین آرایه و رشته و اعداد و ... نیز نوعی شئ به حساب میان. همونطور که میدونین اشیاء نقش زیاد و پررنگی در برنامه‌های ساخته شده با Javascript دارند و استفاده از اونا با گذشت زمان بیشتر و بیشتر میشه و بهبود و ارتقائ عملکرد Object‌ها امری ضروری به حساب میاد و به همین دلیل ES6 اصلاحات زیادی در مورد اشیا به وجود آورده که کار با اونا رو راحت‌تر کرده است. کد زیر رو در نظر بگیرید:

function getPerson() {
	let name = 'Mohammad';
	let age = 25;

	return {
		name: name,
		age: age
	};
}

console.log(getPerson().name);

همونطور که میبینید یک تابع بنام getPerson به وجود آوردیم و مثلا کار اون اینه که یک شخص رو از دیتابیس یا ... بگیره و برگشت بده ولی ما در اینجا نام و سن شخص مورد نظر رو خودمون قرار دادیم و در آخر یک شئ که حاوی name و age هست رو برگشت دادیم. بعد از اون هم تابع رو صدا زدیم و ویژگی name اون رو در console چاپ کردیم. پس Mohammad در Console چاپ میشه. این روش برگشت دادن شئ در ES5 هست و همونطور که میبینید چیزای تکراری زیاد داره و مجبوریم که هم property و هم value رو برابر با هم قرار بدیم. ES6 یک روش مختصرنویسی به وجود آورده و در جاهایی که مثل کد بالا، نام ویژگی object یا نام متغیر یکی هست، میتونیم دیگه اون رو قرار ندیم و به کارمون سرعت ببخشیم. با اینکار کد بصورت زیر میشه:

function getPerson() {
	let name = 'Mohammad';
	let age = 25;

	return {
		name,
		age
	};
}

console.log(getPerson().name);

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

function getPerson() {
	let name = 'Mohammad';
	let age = 25;

	return { name, age };
}

console.log(getPerson().name);

میبینید که چقد میتونه در کدنویسی سریع به ما کمک کنه. علاوه بر موارد قبل، روشی برای مختصرنویسی متدها نیز ارائه شده است. در ابتدا بزارید به روش ES5 یک متد رو اضافه کنیم. کد زیر رو در نظر بگیرید:

function getPerson() {
	let name = 'Mohammad';
	let age = 25;

	return {
		name,
		age,
		welcome: function() {
			return `Welcome ${this.name}`;
		}
	};
}

console.log(getPerson().welcome());

همونطور که دیدید یک متد بنام welcome به وجود آوردیم و درون اون یک رشته رو برگشت دادیم. در خط آخر هم مقدار برگشتی رو در Console چاپ کردیم و با اینکار مقدار Welcome Mohammad در Console چاپ میشه. حالا شما میتونین function و : رو حذف کنید و کدهاتون رو خلاصه‌تر کنید. بصورت زیر:

function getPerson() {
	let name = 'Mohammad';
	let age = 25;

	return {
		name,
		age,
		welcome() {
			return `Welcome ${this.name}`;
		}
	};
}

console.log(getPerson().welcome());

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

نکته بعدی که در مورد اون توضیح میدیم Computed Property Name هستش. فرض کنید که شما بخواید یک property رو برای یک متد قرار بدین که بین اون space یا فضای خالی وجود داره. مثلا کد زیر رو در نظر بگیرید:

var person = {};
person.first_name = 'Mohammad';

console.log(person.first_name);

همونطور که دیدید یک ویژگی بنام first_name برای شئ person قرار دادیم و با استفاده از عملگر . به اون دسترسی پیدا کردیم. اما اگر بخوایم بجای first_name ویژگی بنام first name داشته باشیم، دیگه نمیتونیم از . استفاده کنیم و باید از [] استفاده کنیم. بصورت زیر:

var person = {};
person['first name'] = 'Mohammad';

console.log(person['first name']);

میبینید که با استفاده از computed property‌ها میتونیم هر نوع رشته ای رو برای property قرار بدیم. همچنین میتونین رشته مربوط به property رو درون یک متغیر ذخیره کنید و از اون استفاده کنید. بصورت زیر:

var person = {},
	firstName = 'first name';

person[firstName] = 'Mohammad';

console.log(person[firstName]);

همچنین شما این امکان رو دارید که با استفاده از expression درون براکت، رشته‌های داینامیک و پویا رو به وجود بیارید و بعنوان property قرار بدین. کد زیر رو در نظر بگیرید:

var person = {},
	suffix = 'name';

person['first ' + suffix] = 'Mohammad';

console.log( person['first ' + suffix] );

با اینکار به راحتی property پویا برای شئ person تعریف کردیم و مقدار Mohammad رو به اون نسبت دادیم. میتونیم کدی بصورت زیر رو هم به وجود بیاریم:

function getPerson() {
	let suffix = 'name';
 
	return {
		['first ' + suffix]() {
			return 'Mohammad';
		}
	};
}
 
console.log(getPerson()['first name']());

میبینید که از Computed Property‌ها میتونیم به هر صورتی که بخوایم استفاده کنیم. بهمین راحتی.

موفق و پیروز باشید.

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.