تخفیف ویژه

آموزش ویژگی های ECMAScript 6 (جلسه 33) : آموزش کار با Generator - قسمت 1

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

همونطور که اطلاع دارید در جلسه قبل بحث مربوط به Iterator‌ها رو به پایان رساندیم و شما رو بصورت کامل با اونا آشنا کردیم. در این جلسه میخوایم کار با Generator‌ها رو شروع کنیم و اطلاعاتی کافی برای فهمیدن اونا رو در اختیارتون قرار بدیم.

توضیحات مقدماتی در مورد Generator ها

تا اینجای کار با Iterator‌ها آشنا شدید. رابطه خاصی بین Generator‌ها و Iterator‌ها همونطور که از اسمشون هم معلوم هست، وجود دارد. زمانی که یک تابع Generator رو فراخوانی یا اجرا میکنید، یک Iterator ساخته میشه و میتونین با استفاده از متدهای مختلف از جمله next، بر روی اون تکرار انجام بدین و Generator رو اجرا کنید.

همونطور که در بالا نیز بیان شد، Generator‌ها نوع خاصی از توابع هستند. در زیر تعدادی از تفاوتهای تابع Generator با تابع معلومی و متداول رو قرار میدیم:

  • در توابع Generator بعد از کلمه function یک علامت ستاره یا * قرار داده میشه
  • توابع Generator سازنده Iterator‌ها هستند
  • با استفاده از کلمه کلیدی yield میتونیم توابع Generator رو متوقف کرده و با استفاده از متد next میتونیم تابع رو مجددا Play یا اجرا کنیم. توابع معمولی زمانی که صدا زده میشن، کلا و به یکباره اجرا میشن و تمام کدهای درون اون انجام میشه. اما در توابع Generator این قابلیت وجود داره که تابع رو در موقعیت خاصی با استفاده از yield متوقف کنیم و بعدا تحت شرایط خاصی با استفاده از متد next اون رو مجددا اجرا کنیم. با استفاده از این قابلیت کارهایی که قبلا نمیشد انجام داد رو به راحتی میشه اجرایی کرد.
  • در توابع Generator نیز میتونیم از return استفاده کنیم. return باعث میشه که تابع Generator بصورت کامل به پایان برسه و فورا از تابع خارج میشیم. اما yield نوع خاصی از return هست که فقط باعث متوقف شدن تابع میشه و مقدار مقابل خودش رو برمی گردونه.

تعریف کردن اولین تابع سازنده

در بالا تعدادی از تفاوتهای توابع معمولی با توابع Generator قرار داده شد. حالا تعدادی مثال رو با هم بررسی میکنیم تا بهتر با Generator‌ها آشنا بشیم.

کد زیر رو در نظر بگیرید:

function* letterMaker() {
    yield 'a';
    yield 'b';
    yield 'c';
}

همونطور که میبینید یک سازنده بنام letterMaker رو تعریف کردیم و درون اون سه yield  رو قرار دادیم. اگر دقت کنید یک * بعد از function قرار داده شده است. شما میتونین این ستاره رو بصورت‌های دیگه نیز قرار بدین و هیچ تفاوتی بین اونا وجود ندارد. میتونین ستاره رو بین function و نام تابع قرار بدین. بصورت زیر:

function * letterMaker() {
    yield 'a';
    yield 'b';
    yield 'c';
}

میتونین ستاره رو قبل از نام تابع قرار بدین و به اون متصلش کنید. بصورت زیر:

function *letterMaker() {
    yield 'a';
    yield 'b';
    yield 'c';
}

هیچ تفاوتی بین روشهای بالا وجود ندارد و هر کدام رو که دوست داشتید انتخاب کنید.

حالا میتونیم این تابع رو فراخوانی کنیم و اون رو درون یک متغیر ذخیره کنیم بصورت زیر:

function* letterMaker() {
    yield 'a';
    yield 'b';
    yield 'c';
}

const letters = letterMaker();

همونطور که قبلا نیز بیان شد، با اجرا کردن تابع سازنده یک iterator ساخته میشه. پس متغیر letters در کد بالا یک iterator هست که میتونین با استفاده از متد next به مواردی که با استفاده از yield برگشت داده شده است، دسترسی داشته باشید.

کد زیر رو در نظر بگیرید:

function* letterMaker() {
    yield 'a';
    yield 'b';
    yield 'c';
}

const letters = letterMaker();

console.log(letters.next().value);
console.log(letters.next().value);
console.log(letters.next().value);
console.log(letters.next().value);

میبینید که letters یک iterator هست و میتونیم از اون استفاده کنیم. از خط 9 تا آخر از متد next استفاده کردیم و مقدار value اون رو در Console چاپ کردیم. با اینکار خروجی بصورت زیر خواهد بود:

همونطور که میبینید اون مقادیری که با استفاده از yield برگشت داده شده بود با استفاده از متد next چاپ شده اند. میبینید که بعد از اینکه 3 حرف مورد نظر چاپ شدند، undefined قرار گرفته و نشون میده که دیگه چیزی برای برگشت داده شدن وجود ندارد.

در جلسه بعد بیشتر در مورد این تابع سازنده براتون توضیح میدیم.

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

یا علی

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

جلسات دوره

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

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

نیاز به لاگین

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