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

- visibility ۰ mode_comment

همونطور که اطلاع دارید در جلسه قبل بحث مربوط به Iterator ها رو به شروع کردیم و شما رو بصورت مقدماتی با اون آشنا کردیم. در این جلسه میخوایم این موضوع رو ادامه بدیم و شما رو تقریبا با همه ویژگی های اونا آشنا کنیم.

همونطور که در جلسه قبل دیدیم رشته ها iterable هستند و میتونیم با استفاده از متد next به همه کاراکترهای اون بصورت تک تک دسترسی داشته باشیم.

Iterable های از پیش تعریف شده

تعدادی داده Javascript وجود دارند که بصورت از پیش تعریف شده iterable هستند و با استفاده از قواعد iterator ها میتونیم به همه اعضای اونا دسترسی داشته باشیم. داده های از پیش تعریف شده بصورت زیر هستند:

  • آرایه ها
  • رشته ها
  • ساختار داده DOM یا همون المنتهای درون صفحه. برای مثال میتونین [...document.querySelectorAll('p')] رو در Console تست کنید. عملگر ... فقط برای مواردی که iterable هستند کار میکنه و در مثالی که زدیم، همه تگ های p موجود در صفحه پشت سر هم در آرایه قرار داده میشن.
  • Set و Map
  • TypedArray

مواردی که در بالا بیان شد بصورت از پیش تعریف شده iterable هستند و میتونین با استفاده از قواعد iterator ها از اطلاعات اونا استفاده کنید. زمانی که میگیم یک نوع داده بصورت از پیش تعریف شده iterable هست، یعنی متد Symbol.iterator برای اون تعریف شده است. در جلسه قبل در مورد iteration در رشته ها مثالی رو قرار دادیم. در زیر تعدادی مثال قرار میدیم و کار با موارد بالا رو بهتون توضیح میدیم.

تکرار در آرایه ها

آرایه ها بصورت پیش فرض iterable هستند و میتونین به داده های اون دسترسی داشته باشید. کد زیر رو ببینید:

میبینید که یک آرایه بنام arr با 4 عضو تعریف کردیم و در خط 3 متد Symbol.iterator اون رو فراخوانی کردیم. با اینکار میتونیم بر روی آرایه iteration کنیم و به اعضای اون دسترسی داشته باشیم. در خط 5 تا آخر با استفاده از متد next یکی یکی به اعضا دسترسی پیدا کردیم. خروجی در Console بصورت زیر خواهد شد:

میبینید که در هر شئ چاپ شده، مقدار Value ها همون اعضای آرایه هستند و تا زمانی که اعضا وجود داشته باشند، مقدار ویژگی done برابر با false و بعد از اتمام به true تبدیل خواهد شد و مقدار Value نیز برابر با undefined میشه.

از هر داده iterable میتونین هر تعداد که بخواید iterator درست کنید و این موارد کاملا مستقل از هم هستند. مثلا کد زیر رو در نظر بگیرید:

میبینید که تکرارهای مختلف و مستقلی بر روی آرایه مورد نظر انجام دادیم.

تکرار در Set و Map

در جلسات قبل در مورد Set و Map ها توضیحاتی رو قرار دادیم. این موارد همانند رشته و آرایه ها نیز iterable هستند و میتونین بر روی اونا تکرار انجام بدین. کد زیر رو در نظر بگیرید:

میبینید که در خط اول و دوم Set و Map رو به وجود آوردیم و در خط 4 و 5 نیز اونا رو قابل تکرار کردیم. همانند آرایه ها به المنتهای اون دسترسی پیدا کردیم و خروجی بصورت زیر خواهد بود:

به همین راحتی. شما با استفاده از متدهای keys و values و entries میتونین iterator هایی از کلیدها و مقادیر مربوط به Set و Map رو به وجود بیارید. مثال:

هر کدام از این موارد یک iterator رو برگشت میدن که میتونین با استفاده از متد next روی اونا تکرار انجام بدین. مثلا بصورت زیر میتونیم بر روی colors.keys() تکرار انجام بدیم:

بهمین راحتی. خروجی بصورت زیر خواهد بود:

روشهای مختلف استفاده از Iterator ها

همونطور که دیدید تا اینجای کار مستقیما به متد Symbol.iterator مربوط به Iterable ها دسترسی پیدا میکردیم و بعد با استفاده از متد next یکی یکی از اعضای اونا استفاده میکردیم. در اینجا میخوایم روشهای مخصوص استفاده از iterable ها رو بیان کنیم:

  • استفاده از حلقه های for..of
  • استفاده از عملگر Spread
  • استفاده از Destructuring

با استفاده از موارد بالا میتونیم به اعضای هر Iterable به راحتی دسترسی داشته باشیم. مثلا کد زیر رو ببینید:

میبینید که Set ساخته شده در مثالهای قبل رو دوباره قرار دادیم. در خط 3 یک حلقه از نوع for..of قرار دادیم. در هر تکرار در پشت صحنه یک iterator از Set مورد نظر ساخته میشه و متد next مربوط به اون صدا زده میشه و مقدار value درون متغیر color قرار میگیره. با اینکار خروجی بصورت زیر میشه:

میبینید که به راحتی اعضای Set مورد نظر رو در Console چاپ کردیم.

روش بعدی استفاده از عملگر Spread هست. مثال بالا رو با استفاده از روش Spread Operator مجددا انجام میدیم:

به همین راحتی.

 Iterable کردن انواع دیگر داده بصورت دستی

همونطور که دیدید تعداد محدودی از داده ها از جمله رشته ها و آرایه ها بصورت پیش فرض iterable هستند و میتونین بر روی اونا تکرار انجام بدین. شما میتونین بصورت دستی برای اشیاء، توابع، کلاسها نیز متد Symbol.iterator رو شبیه سازی کنید و قدرت iterate شدن رو به اونا بدین. زمانی که یک تابع یا کلاس یا شئ رو iterable میکنید، تمام قوانین بالا برای اونا صدق میکنه و میتونین کارهای بیان شده رو نیز برای اونا انجام بدین و برای مثال اونا رو در حلقه for..of مورد استفاده قرار بدین.

Iterable کردن تابع بصورت دستی

ما برای Iterable کردن هر کدام از موارد بیان شده، باید چنتا قاعده رو رعایت کنیم. باید متد next رو بسازیم و خروجی ما یک شئ باشه که دارای دو ویژگی done و value باشد. کد زیر رو ببینید که در اون یک تولید کننده اعداد طبیعی قرار داده شده است:

همونطور که میبینید یک تابع بنام Natural ساختیم و یک متغیر بنام index با مقدار اولیه 1 در اون تعریف کردیم. بعد از اون هم متد next رو شبیه سازی کرده و برگشت دادیم. با اینکار هر بار که next رو فراخوانی کنیم یک عدد به 1 اضافه شده و برگشت داده میشه و با اینکار مجموعه ای از اعداد طبیعی ساخته میشه.

Iterable کردن اشیاء بصورت دستی

فرض کنید که میخوایم یک شمارش معکوس رو به وجود بیاریم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که در خط 1 یک شئ بنام countdownIterator رو به وجود آوردیم و مقدار اولیه 10 رو برای متغیر countdown در نظر گرفتیم. با اینکار شمارش معکوس از 10 شروع میشه تا به 1 برسه. در خط 4 متد Symbol.iterator رو به وجود آوردیم و متدهای next و بقیه موارد رو در اون شبیه سازی کردیم. در سه خط آخر نیز با استفاده از حلقه for..of از این تابع استفاده کردیم و شمارش معکوس رو در Console چاپ کردیم. با اینکار خروجی بصورت زیر خواهد شد:

به همین راحتی. امیدوارم به خوبی با Iterator ها آشنا شده باشید.

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

یا علی

comment دیدگاه کاربران

نیاز به لاگین

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