همونطور که اطلاع دارید در جلسه قبل در مورد Template Literalها براتون توضیحاتی رو قرار دادیم و شما رو با قرار دادن رشته به وسیله ` یا Back tick آشنا کردیم. در این جلسه قصد داریم در مورد Rest Parametersها براتون توضیحاتی رو قرار بدیم. همونطور که میدونین به هر تعداد که بخواید میتونین پارامتر برای توابع قرار بدین. مثلا کد زیر رو در نظر بگیرید:
function addition(a, b, c) {
return a + b + c;
}
console.log(addition(1, 2, 3));
همونطور که در کد بالا مشاهده میکنید، 3 پارامتر برای تابع addition قرار دادیم و موقع صدا زدن تابع نیز باید سه آرگومان رو مشخص کنیم و این تابع اونا رو با هم جمع کرده و برگشت میده و در Console مقدار 6 چاپ خواهد شد. حالا فرض کنید بجای 3 عدد بخوایم 4 عدد یا 5 عدد یا 10 عدد رو با هم جمع کنیم. منطقی نیست که این کار رو بصورت دستی انجام بدیم. در ES5 با استفاده از کلمه arguments میتونستید به تمامی آرگومانهای یک تابع در موقع صدا زدن دسترسی داشته باشید. مثلا کد زیر رو در نظر بگیرید:
function addition() {
console.log(arguments);
}
addition(1, 2, 3);
میبینید که در اینجا هیچ پارامتری رو برای تابع مشخص نکردیم و درون تابع arguments رو چاپ کردیم. خروجی در Console بصورت زیر خواهد بود:
همونطور که از خروجی مشخص هست، arguments دقیقا یک آرایه نیست و به اون Array like یا شبیه به آرایه میگن. یعنی یک شئ رو به آرایه شبیه سازی کردند. پس به دلیل اینکه arguments یک آرایه نیست، نمیتونیم برای اون از متدهای آرایه مثل sort و map و ... استفاده کنیم. در ES6 قابلیتی به نام Rest Parameters اضافه شده که علاوه بر حل این مشکل، قابلیتهای دیگه رو به ما میده که کدنویسی رو خیلی لذت بخش‌تر میکنه. قبل از Rest Parametersها ... قرار میگیره. کد زیر رو در نظر بگیرید:
function addition(...theArgs) {
console.log(theArgs);
}
addition(1, 2, 3);
همونطور که میبینید در قسمت تعریف پارامترها، قرار گرفته. چون ... قبل از theArgs قرار گرفته، پس theArgs یک Rest Parameters است و به معنای اینه که هر آرگومانی که باقی مانده است، به عنوان یک عضو درون اون قرار میگیره. theArgs یک آرایه است که همه آرگومانهای باقیمانده رو در خودش جا میده. اگر کد بالا رو اجرا کنیم، خروجی در Console بصورت زیر خواهد بود:
میبینید که اینجا با یک آرایه سروکار داریم و در نتیجه میتونیم همه متدهای آرایه مثل map و sort و find و ... رو برای اون اجرا کنیم. حالا یه مقدار قضیه رو جالب‌تر میکنیم. کد زیر رو در نظر بگیرید:
function addition(a, b, ...theArgs) {
console.log(theArgs);
}
addition(1, 2, 3, 4, 5);
همونطور که دیدید در کد بالا 5 ورودی رو در هنگام صدا زدن تابع مشخص کردیم. در تعریف تابع نیز دو پارامتر a و b و یک Rest Parameter به نام theArgs رو مشخص کردیم. با اینکار مقدار a برابر با 1، مقدار b برابر با 2 خواهد شد و theArgs نیز یک آرایه خواهد بود که اعضای اون بقیه یا باقیمانده آرگومانها هستند. پس theArgs مقادیر 3 و 4 و 5 رو در خودش قرار میده و خروجی کد بالا بصورت زیر است:
برای استفاده از Rest Parametersها باید نکات زیر رو مدنظر داشته باشید:
- در هر تابع بیشتر از یک Rest Parameter رو نمیتونین مورد استفاده قرار بدین
- Rest Parameter همیشه در آخر قرار میگیرند
کد زیر رو در نظر بگیرید:
function multiply(multiplier, ...theArgs) {
return theArgs.map(function(element) {
return multiplier * element;
});
}
var arr = multiply(2, 1, 2, 3);
console.log(arr);
میبینید که یک تابع بنام multiply تعریف کردیم و اون رو با 4 ورودی فراخوانی کردیم. ورودی اول که 2 است به پارامتر multiplier نسبت داده میشه و بقیه آرگومانها در آرایه theArgs قرار میگیرن. بعد از اون با استفاده از متد map، هر کدام از اعضای آرایه theArgs رو در مقدار multiplier ضرب میکنیم و بجای مقدار قبلی قرار میدیم. پس با اینکار مقدار هر یک از اعضای آرایه 2 برابر خواهد شد. پس خروجی در Console آرایه خواهد بود.
به همین راحتی.
موفق و پیروز باشید.
یا علی
اولین دیدگاه این پست رو تو بنویس !