آموزش ویژگی های ECMAScript 6 (جلسه 12) : عملگر Spread

- visibility ۰ mode_comment

همونطور که اطلاع دارید در جلسه قبل در مورد Rest Parameters ها توضیحاتی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه میخوایم در مورد عملگر Spread توضیح بدیم. همونطور که در جلسه قبل دیدید، با استفاده از پارامتر Rest میتونستیم آرگومانها رو درون یک آرایه قرار بدیم و از اون درون تابع استفاده کنیم. عملگر Spread تقریبا برعکس Rest عمل میکنه و در اینجا یک آرایه جدا و پخش میشه و میتونین از اعضای اون در جاهای مختلف استفاده کنید. کد زیر رو در نظر بگیرید:

همونطور که میبینید دو متغیر رو تعریف کردیم و با استفاده از متد max مربوط به شئ Math اونا رو با هم مقایسه کردیم. متد max بزرگترین عدد رو انتخاب میکنه و اون عدد در Console چاپ میشه. پس در اینجا مقدار 50 در Console چاپ میشه. دیدید که خیلی راحت میشه بزرگترین متغیر رو پیدا کرد. حالا بنظر شما اگر یک آرایه داشته باشیم و بخوایم بزرگترین عضو اون رو مشخص کنیم، از چه روشی میتونیم استفاده کنیم؟ سریعترین روشی که قبل از ES6 وجود داره، استفاده از apply است. کد زیر رو در نظر بگیرید:

همونطور که دیدید یک آرایه با 4 عضو رو تعریف کردیم و بعد از اون از متد apply استفاده کردیم و Math و Values رو به عنوان ورودی به اون پاس دادیم. با اینکار بزرگترین عدد آرایه که 40 هست در Console چاپ میشه. این کار شدنیه ولی استفاده از apply مقداری گیج کننده است. در این مواقع میتونین از ویژگی جدیدی بنام Spread Operator که در ES6 معرفی شده است، استفاده کنید. کد زیر رو در نظر بگیرید:

همونطور که دیدید در کد بالا دیگه از apply استفاده نکردیم و مستقیماً آرایه رو به متد max پاس دادیم. تنها تفاوتی که با کد اول داره اینه که قبل از آرایه ... قرار میدیم و به موتور Javascript میگیم که این یک Spread است و باید اون رو جدا کنی و یکی یکی به متد مورد نظر پاس بدی. اگر کد بالا رو اجرا کنید، همانند قبل در خروجی 40 چاپ میشه. میبینید که در اینجا نیز از ... استفاده شده. پس زمانی که ... در بخش پارامترهای تابع باشه، اون پارامتر Rest هست و زمانی که ... در آرگومانها و موقع صدا زدن تابع باشه، اون آرگومان Spread است. کد بالا رو مقداری تغییر میدیم:

میبینید که علاوه بر آرایه Spread شده، 3 آرگومان دیگه رو نیز به تابع پاس دادیم و در نتیجه 70 در خروجی چاپ خواهد شد. پس میبینید که در کنار Spread میتونین از آرگومانهای ساده نیز استفاده کنید.

کارهای زیاد دیگه ای هم وجود دارن که با استفاده از Spread Operator میتونین اونا رو به سادگی انجام بدین. مثلا فرض کنید میخوایم دو آرایه رو با هم ترکیب کنیم. کد زیر رو در نظر بگیرید:

میبینید که 2 آرایه رو تعریف کردیم و در آرایه دوم، آرایه اول رو مورد استفاده قرار دادیم. با اینکار خروجی در Console بصورت زیر خواهد بود:

میبینید که کل آرایه num1 بصورت یک عضو آرایه num2 در اومده. پس تعداد اعضای آرایه num2 برابر با 4 است. بنظر شما اگر بخوایم این اتفاق نیوفته و بجای اون اعضای num1 درون num2 قرار داده بشن، چکاری میتونیم انجام بدیم؟ اینجا هست که باز میتونیم از Spread کمک بگیریم. برای اینکار قبل از آرایه ... قرار میدیم، بصورت زیر:

با اینکار خروجی بصورت زیر میشه:

میبینید که اعضای آرایه اول درون آرایه دوم قرار داده میشن و تعداد اعضای کل 5 میشه. اما اگر همین کار رو بخواید با کدهای قبل از ES6 انجام بدین باید ترکیبی از متدهای push و splice و concat و ... رو استفاده کنید. بهمین راحتی.

به راحتی میتونیم یک کپی از آرایه مورد نظرمون بگیریم. بصورت زیر:

با اینکار یک کپی از محتویات آرایه arr گرفته میشه و درون آرایه copy قرار میگیره. پس آرایه copy، یک آرایه مجزا است و هر کاری بخواید میتونین با اون انجام بدیم.

علاوه بر این موارد، میتونین دو یا چند آرایه رو به سادگی به هم متصل کنید. مثلا کد زیر رو در نظر بگیرید:

به همین راحتی سه آرایه رو با هم ترکیب و اون رو در Console چاپ کردیم. خروجی بصورت زیر خواهد شد:

بهمین راحتی.

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

یا علی

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

نیاز به لاگین

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