مشخصات مقاله
-
10
-
0.0
-
1384
-
0
-
0
آموزش کار با پارامتر ES6 Rest
آموزش کار با پارامتر Rest در ES6:
پارامتر Rest در اکما اسکریپت ECMAScript 2015 یا ES6 معرفی شده که قابلیت مدیریت پارامترهای تابع ها را بهبود بخشیده است. پارامتر Rest به ما امکان می دهد تعداد نامشخصی (هر تعداد که می خواهید) از آرگومان (Arguments) را به عنوان یک آرایه دربیاوریم و استفاده کنیم. با استفاده از پارامتر Rest، می توان یک تابع را با هر تعداد آرگومان دلخواه، فراخوانی کرد.
قبل از ES6، از شی arguments object برای پارامترهای تابع استفاده می شد. شی arguments object نمونه ای از نوع داده آرایه Array نیست و خواص آن را ندارد. بنابراین نمی توانید متدهایی مثل ()filter را به صورت مستقیم بر روی آن اعمال کرد.
پارامتر Rest دارای 3 نقطه (...) به عنوان پیشوند است. اگرچه ساختار دستوری پارامتر Rest کاما شبیه عملگر Spread (که در بخش قبل آموزش دادیم) است اما عملکرد آن دقیقا برعکس عملگر Spread است. پارامتر Rest بایستی آخرین آرگومان در تابع باشد، زیرا برای تجمیع و قرار دادن سایر عناصر و آرگومان ها در قالب یک آرایه به کار می رود.
ساختار دستوری استفاده از پارامتر Rest به صورت زیر است:
1 2 3 4 | function fun(a, b, ...theArgs) { // statements } <button></button> |
مثال عملی: در کد مثال زیر تابع ()show را تعریف کرده ایم که یک پارامتر Rest به نام args دریافت می کند و مقدار تمامی اعضای آن را با هم جمع کرده و در خروجی نشان می دهد. در هنگام فراخوانی تابع ()show، سه عدد به تابع ارسال شده که توسط پارامتر Rest با هم تجمیع شده اند:
1 2 3 4 5 6 7 8 9 10 | function show(...args) { let sum = 0; for (let i of args) { sum += i; } console.log("Sum = "+sum); } show(10, 20, 30); <button></button> |
خروجی کد :
1 2 | Sum = 60 <button></button> |
کلیه آرگومان هایی که به تابع ارسال کرده ایم، درون لیست پارامترها نگاشت می شوند. همانطور که در بالا گفته شد، پارامتر rest به صورت (...) باید آخرین عضو لیست آرایه ها باشد (آخر از همه قرار بگیرد)، اگر در جای دیگری قرارش دهید، خطا در کد بروز می کند. برای مثال، نحوه استفاده از پارامتر rest در مثال زیر، باعث بروز خطا در اجرای تابع می شود:
1 2 3 4 | function show(a,...rest, b) { // error }; <button></button> |
بررسی تفاوت شی arguments و پارامتر rest در ES6:
پارامتر rest و شی arguments object با یکدیگر متفاوت هستند، در لیست زیر به این تفاوت اشاره شده است:
-شی arguments object یک شبه آرایه است (یک آرایه واقعی نیست و خواص و متدهای آن را ندارد) اما پارامتر rest یک نمونه از شی آرایه Array است. شی arguments object شامل متدهایی مثل sort، map، forEach یا Pop که مختص شی آرایه است نیست ولی تمامی این متدها را می توانید به صورت مستقیم بر روی پارامتر rest اعمال کنید.
پارامتر rest و تجزیه متغیرها (Destructing):
تخریب یا Destructing به معنای تجزیه ساختارهای پیچیده (مثل آرایه) به قطعات کوچکتر (اعضای آرایه) است. می توان یک آرایه را به عنوان یک پارامتر rest تعریف کنید. آرگومان های ارسالی به تابع، به اجزای آرایه تجزیه می شوند. پارامتر rest فقط می تواند آرایه (Array) را تخریب یا به عبارت دیگر تجزیه کند.
با استفاده از دو پارامتر rest، می توان اعضای باقی مانده یا بخشی از اعضای یک آرایه را در یک آرایه جدید قرار دهید. این مسئله را با ارائه یک مثال عملی به صورت زیر نشان داده ایم:
مثال: در کد مثال عملی زیر، یک آرایه به نام colors با V عضو تعریف کرده ایم. سپس توسط پارامتر rest، اعضای بعد از “Indigo” را درون یک آرایه جدید به نام args ریخته و آنها را در خروجی نشان داده ایم:
1 2 3 4 5 6 7 8 | var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"]; // destructuring assignment var [a,b,...args] = colors; console.log(a); console.log(b); console.log(args); <button></button> |
خروجی کد :
1 2 3 4 | VioletIndigo[ 'Blue', 'Green', 'Yellow', 'Orange', 'Red' ] <button></button> |
آموزش استفاده از پارامتر rest در تابع دینامیک ES6:
جاوا اسکریپت امکان ایجاد تابع های دینامیک (Dynamic Function) را با استفاده از متد سازنده تابع (Function Constructor) فراهم کرده است. می توانید از پارامتر rest درون توابع دینامیک استفاده کنید. روش کار را در قالب یک مثال عملی نشان داده ایم:
مثال: در کد مثال عملی زیر، یک تابع دینامیک را در متغیر num تعریف کرده ایم که یک پارامتر rest به نام args را در ورودی دریافت کرده و در خروجی چاپ می کند. پس از فراخوانی تابع در خط دوم، متغیر args کلیه پارامترهای ارسالی به تابع (10 و 20و 30) را در یک آرایه قرار داده و سپس در خروجی چاپ کرده است.
1 2 3 | let num = new Function('...args','return args'); console.log(num(10, 20, 30)); <button></button> |
خروجی کد :
1 2 | [ 10, 20, 30 ] <button></button> |