درک مفاهیم Spread و rest Operator در ES

Spread_and_rest_operator_thumb

بسیار خب.

خیلی فوری و بدون مقدمه میریم سر اصل مطلب

برای اینکه وارد دنیای جاوا اسکریپت و فریمورک های مدرنش بشید ( حدودا از سال 2015 به بعد ) لازمه که اکما اسکریپت یا به اختصار همون ES رو بلد باشید.

مفاهیم اغلب ساده ای داره اما خب گاهی ممکنه نیاز به درک بیشتری برای برخی مفاهیمش باشه!

برای همین تصمیم گرفتم یکم این مفاهیم رو با زبان ساده تری توضیح بدم.

اول بریم ببینیم این Spread که میگن یعنی چی 💡

در نگاه اول از منظر گوگل ترنسلیت این لغت به معنای انتشار دادن گفته شده که ترجمه ی درستی نیست !

حداقل برای هدفی که ما داریم.

بسط دادن و گسترش دادن لغت مناسب تری هست برای این کار.

مفهوم Spread

بیایم فرض کنیم دو تا آرایه به صورت زیر داریم :

حالا میخوایم در ادامه ی آرایه ی اول ؛ آرایه ی دوم رو چاپ کنیم.

اون قدیم ندیم ها از این دستور استفاده می کردیم :

در واقع ما اینجا تابع concat رو صداش می زنیم و میگیم آرایه ی دوم رو به انتهای آرایه اول بچسبون !

و خب نتیجه اش هم میشه این :

اما توی ES راه ساده تری وجود داره :

حالا بیاین یکم توضیح بیشتری بدیم در مورد Spread Operator ها

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

این یعنی اگر بخوایم آرایه ی اول رو به انتهای آرایه ی دوم بچسبونیم کافیه جاهاشونو عوض کنیم ( امتحان کنین ) 🙂

اون علامت های [ ] در واقع داره شرح میده که من میخوام نتیجه ی نهایی رو در یک آرایه بریزم و شما می تونید اون ها رو در آبجکت بریزید و یا اینکه همینطوری نمایش بدید.

خب پس فهمیدیم که Spread Operator ها چیز زیاد سختی نیست. در واقع وقتی میخوایم چیزی رو وصل کنیم به انتهای چیزی یا ابتدای چیزی از این روش ها استفاده می کنیم.

برای اطلاعات بیشتر : The Spread Syntax

مفهوم Rest Operator

حالا بیایم و ببینیم اولا rest operator[tooltip text=”پروژه متن باز” gravity=”nw”]اغلب ماها زبان انگلیسی خوبی نداشتیم از روز اول و چه بهتر که در کنار هم یه پلتفرمی رو توسعه بدیم که این لغات رو توضیح داده باشه! ((فعلا در حد یک ایده است))[/tooltip] ! 💡

اگه توی گوگل ترنسلیت عزیز بزنید بهتون جواب میده اپراتور استراحت :mrgreen:

اما خب به طور جداگانه اگه سرچ کنید میبینید که برای rest معانی دیگه ای هم ذکر شده که بهترینش الباقی و باقی مانده هاست.

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

از مثال قبل استفاده می کنیم و فرض می کنیم که میخوایم عنصر اول آرایه اول و عنصر دوم آرایه دوم رو در 2 تا متغیر بریزیم

خب روش اول همون روش شامل درد و خونریزی :

اما خب همونطور که اشاره کردیم این روش مناسبی نیست و قراره روش ساده تری رو آموزش بدیم :

حالا این یک خط کد بالا که نوشتم میخواد بهمون بگه که خونه ی اول و دوم آرایه ی arr رو بریز به ترتیب توی a و b

عه !! جالب شد 😆

حالا یه سوال پیش میاد که اگه ما خواستیم خونه ی اول و سوم آرایه رو نشون بده باید چیکار کنیم؟

پاسخ رو به صورت کد در زیر براتون نوشتم دوستان:

خب دیدید که فقط کافیه یک فاصله بدیم و اصطلاحا از اون مقداری که نیازش نداریم رد شیم.

اما تا اینجا که اومدین حیفم میاد اگه مفهومی به نام Destruction رو بهتون نگم !

مفهوم Destruction

معنی و مفهوم این کلمه رو در بازی های کامپیوتری بیشتر مشاهده کردید و شنیدید که فرمانده به سربازش میگه Destroy it

درسته ! همون معنی خراب کردن رو میده اما نه به بار آوردن یک افتضاح بلکه بیشتر به معنی تخریبه مثل تخریب یک ساختمون.

با در نظر گرفتن این مفهوم به مثال زیر نگاه کنید:

خب ما تا اینجا یه آرایه به نام arr تعریف کردیم و حالا میخوایم عنصر اول و دوم این آرایه رو در دو متغیر جداگانه با روشی که بالا گفتیم بریزیم و باقی عناصر رو به یک آرایه ی دیگه ارسال کنیم.

اول کد رو می نویسیم بعد توضیحش رو میگم بهتون :

خب دوستان روال کارمون مشخصه ما عنصر اول و دوم یک آرایه رو میخواستیم پس یه متغیر آرایه ای رو تعریف کردیم و عنصر اول و دوم رو بهش پاس دادیم و اما عنصر سوم رو با … شروع کردیم. 😯

اکما اسکریپت این دستور ما رو برای جاوا اسکریپت اینطوری ترجمه می کنه :

عنصر اول آرایه ی arr رو داخل عنصر a از آرایه ی متقابل بریز

عنصر دوم آرایه ی arr رو داخل عنصر b از آرایه ی متقابل بریز

باقی عناصر آرایه ی arr رو داخل آرایه ای به نام otherParams بریز!

به این عمل میگن destruction یعنی در واقع ما آرایه ی arr رو تخریب کردیم ابتدا 2 تا عنصر رو ریختیم درون 2 تا متغیر و سپس باقی عناصر این آرایه رو ریختیم درون یک آرایه ی دیگه !

خروجی این کد های سری آخر رو میزارم به عهده ی خودتون.

اگه سوالی داشتید حتما بپرسید 😎

Share:

ارسال یک پاسخ

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

7 + 1 =