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

آخرین مطالب

امکانات وب

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

0 18 ۱۸ مرداد ۹۶

همونطور که اطلاع دارید در جلسه قبل در مورد عملگر 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 ها میتونیم به هر صورتی که بخوایم استفاده کنیم. بهمین راحتی.

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

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 256 تاريخ : جمعه 20 مرداد 1396 ساعت: 18:10

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

آخرین مطالب

امکانات وب

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

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه