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

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

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

let value1 = 25,
	value2 = 50;

console.log(Math.max(value1, value2));

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

let values = [10, 20, 30, 40];

console.log(Math.max.apply(Math, values));

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

let values = [10, 20, 30, 40];

console.log(Math.max(...values));

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

let values = [10, 20, 30, 40];

console.log(Math.max(...values, 50, 60, 70));

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

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

let num1 = ['two', 'three'];
let num2 = ['one', num1,'four', 'five']; 

console.log(num2);

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

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

let num1 = ['two', 'three'];
let num2 = ['one', ...num1,'four', 'five']; 

console.log(num2);

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

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

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

let arr = ['one', 'two', 'three'];
let copy = [...arr];

console.log(copy);

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

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

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let concate = [...arr1, ...arr2, ...arr3];

console.log(concate);

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

بهمین راحتی.

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

یا علی

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

جلسات دوره

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

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

نیاز به لاگین

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