Object Literal Syntax Extensions در ES6

در این آموزش در مورد پسوندهای دستورالعمل شئ Literal در ES6 که کد شما را مرتب‌تر و انعطاف پذیرتر می کند، خواهید آموخت.

شئ Literal به دلیل سادگی، یکی از محبوب ترین الگوهای ایجاد شئ در جاوا اسکریپت است. ES6 شئ Literal را با گسترش دادن آن خلاصه تر و قدرتمندتر می سازد.

مختصرنویسی اولیه ویژگی شئ

در ES6 قبلی، اشیا Literal مجموعه ای از جفت های نام و مقدار بودند. به عنوان مثال:

function createMachine(name, status) {
    return {
        name: name,
        status: status
    };
}

تابع createMachine() دو‌ نشانگر name و status, را گرفته و شئ Literal جدیدی با دو‌ویژگی name و status, باز می گرداند. ویژگی های name و status مقادیر پارامترهای status  و name را می گیرد. چون به name  و status دوبار در نام و مقدار ویژگی ها اشاره شده،  دستور العمل تکراری به نظر می رسد.

وقتی یک ویژگی شئ مشابه با نام‌ متغیر بومی است ES6 با قرار دادن نام بدون دو نقطه و مقدار، به شما اجازه می دهد تا تکرارها را حذف کنید.

به عنوان مثال، می توانید تابع createMachine() را در ES6 مانند نمونه بازنویسی کنید:

function createMachine(name, status) {
    return {
        name,
        status
    };
}

طبیعتا وقتی ویژگی یک شئ Literal فقط یک نام دارد، موتور جاوااسکریپت برای آن به دنبال یک متغیر با همان نام در دامنه اطراف جستجو می کند. اگر پیدا کند، ویژگی متغیر را تعیین می کند. در این مثال موتور جاوا اسکریپت مقدار ویژگی name و status را از نشانگرهای name و status تعیین می کند.

نام ویژگی محاسبه شده

پیش تر در ES6 می توانستید از محدوده کروشه ( [])  برای فعالسازی نام های ویژگی محاسبه شده برای ویژگی های نمونه های شئ استفاده کنید. محدوده کروشه به شما اجازه می دهد تا از رشته Literal و متغیرها به عنوان نام های ویژگی استفاده کنید.

مثال زیر را مشاهده کنید:

let name = 'machine name';
let machine = {
    [name]: 'server',
    'machine hours': 10000
};
 
console.log(machine[name]); // server
console.log(machine['machine hours']); // 1000

متغیر name برای مقدار ‘machine name’ ارزش گذاری شده. چون هردو ویژگی شئ ‌ machine دارای یه فاصله است، می توانید آنها را فقط با استفاده از محدوده کروشه بازتاب دهید.

در ES6 نام ویژگی محاسبه شده بخشی از دستور شئ Literal است، و از محدوده کروشه نشانه گذاری شده استفاده می کند. وقتی یک نام‌ ویژگی  داخل محدوده کروشه قرار گیرد، موتور جاوا اسکریپت آن را به عنوان یک رشته ارزیابی می کند، به این معنی که می توانید یک عبارت برای ویژگی استفاده کنید. مانند مثال زیر:

var prefix = 'machine';
var machine = {
    [prefix + ' name']: 'server',
    [prefix + ' hours']: 10000
};
 
console.log(machine['machine name']); // server
console.log(machine['machine hours']); // 10000

ویژگی های شئ machine برای ‘machine name’ و ‘machine hours’ ارزیابی می شود، بنابراین می توانید آنها را به عنوان ویژگی های شئ machine بازتاب دهید.

دستور متد مختصرنویسی

قبلا در ES6، هنگام تعریف یک متد برای یک شئ Literal ، باید نام و تعریف کامل تابع را بصورتی که در مثال زیر مشخص شده معین می کردید:

var server = {
    name: 'server',
    restart: function () {
        console.log('The' + this.name + ' is restarting...');
    }
};

ES6 باعث می شود دستور ساخت یک‌ متد از شئ Literal با حذف دو نقطه (:) و ‌کلمه کلیدی function ، خلاصه تر شود.

مثال زیر شئ server را با استفاده از دستور ES6 بازنویسی می کند:

var server = {
    name: 'server',
    restart() {
        console.log(`The ${this.name} is restarting...`);
    }
};

این دستور مختصرنویسی همچنین به عنوان دستور متد دو نقطه هم شناخته شده است.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5٫00 out of 5)
Loading...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

counter customizable free hit