مشخصات مقاله

تعداد دانلود:
0
امتیاز :
0.0
تعداد بازدید:
1551
تعداد نظرات:
0
لایک ها :
0

آموزش کار با تابع Arrow Function در ES6

آموزش کار با تابع Arrow Function در ES6:

توابع Arrow Function ویژگی جدیدی هستند که در ES6 معرفی شده و روش دقیق تری جهت نوشتن تابع ها در جاوا اسکریپت فراهم کرده اند. این ویژگی امکان نوشتن توابع با ساختار دستوری خلاصه تر را می دهد. تابع های Arrow Function باعث می شوند کدهای شما خواناتر شده و ساختار بهتری داشته باشند.
تابع های Arrow Function تابع های بی نام یا anonymous function (تابع هایی فاقد نام که به هیچ شناسه یا identifier ی در برنامه متصل نیستند) هستند. آنها هیچ مقدار (value) ای را بر نمی گردانند و می توانند بدون استفاده از کلمه کلیدی function تعریف شوند. تابع های Functions Arrow را نمی توانید به عنوان تابع های سازنده یا Constructor به کار ببرید. دستور درون تابع های Arrow Function به صورت ایستاتیک یا عبارت متنی تعیین می شوند. به این نوع تابع ها در برخی دیگر از زبان های برنامه نویسی lambda Function می گویند.
تابع های Arrow Function نمی توانند شامل خاصیت های prototype بوده و با کلمه کلیدی new به کار روند.
ساختار دستوری تعریف یک تابع Arrow به صورت زیر است:

const functionName = (arg1, arg2, ?..) => {  
    //body of the function  
} 
            <button></button>

تابع های Arrow Function یا Lambda Function دارای 3 بخش اصلی هستند:

پارامترها (Parameters): هر تابع می تواند از 1 تا چندین پارامتر داشته یا اصلا پارامتر نداشته باشد.
نشانه فلش arrow notation یا lambda notation این نشانه به صورت یک فلش با مساوی (<=) درون تابع قرار می گیرد.
دستورات Statements: این بخش عبارت دستوری یا محاسباتی تابع را شامل می شود.

موارد فوق را در قالب یک مثال توضیح داده ایم.
مثال: در کد مثال عملی زیر، 3 نوع تابع پر کاربرد جاوا اسکریپت را به ترتیب اعلان تابع (Function Expression)، تابع های بی نام (Anonymous Function) و تابع فلش دار (Arrow Function) کد نویسی کرده ایم، به تفاوت هر تابع و نحوه عملکرد آنها دقت نمایید:

// function expression  
   
var myfun1 = function ()show {  
 console.log("It is a Function Expression");     
}  
   
// Anonymous function  
   
var myfun2 = function () {  
    console.log("It is an Anonymous Function");     
   }  
      
//Arrow function  
   
var myfun3 = () => {  
    console.log("It is an Arrow Function");     
   };  
   
myfun1();  
myfun2();  
myfun3();  
            <button></button>

خروجی :

It is a Function Expression
It is an Anonymous Function
It is an Arrow Function
            <button></button>

تغییرات کدنویسی مجاز در تابع های Arrow Function:

بعضی تغییرات در ساختار کدنویسی تابع های Arrow Function مجاز هستند که توضیح می دهیم.
-استفاده از پرانتز در هنگام تکی بودن پارامتر تابع، اختیاری است. در کد مثال زیر، تابع فقط یک پارامتر X دارد که آن را درون پرانتز قرار نداده ایم:

var num = x => {  
    console.log(x);  
}  
num(140);  
            <button></button>

خروجی :

-در زمانی که تابع فقط یک دستور (Statement) دارد، کاربرد آکولادها اختیاری است و در صورتی که تابع هیچ پارامتری ندارد بایستی دو پرانتز خالی حتما استفاده شود. برای مثال در کد زیر، تابع هیچ پارامتری ندارد، بنابراین از () استفاده کرده ایم:

var show = () => console.log("Hello World");  
()show;  
            <button></button>

خروجی :

1 2	`Hello World` `<button></button>`

آموزش کاربرد پارامترها با تابع Arrow Function:

اگر لازم است بیش از یک پارامتر به تابع Arrow ارسال کنید، بایستی آن ها را درون پرانتز قرار دهید. در کد مثال عملی زیر، تابع ()show دارای 3 پارامتر است که درون پرانتز قرار گرفته و با کاما از هم جدا شده اند:

var show = (a,b,c) => {  
    console.log(a + " " + b + " " + c );  
}  
show(100,200,300);  
            <button></button>

خروجی :

100 200 300

آموزش کاربرد پارامتر با مقدار پیش فرض در تابع Arrow Function:

در ES6، چنانچه مقداری (value) به یک پارامتر ارسال نشده باشد یا تعریف نشده باشد، می توانید پارامترها را با مقدار پیش فرض تعیین نمایید. در کد مثال زیر، تابع ()show دارای دو پارامتر a و b است که برای پارامتر b مقدار پیش فرض 200 را تعیین کرده ایم. همان طور که در خط آخر کد مشاهده می کنید، در هنگام فراخوانی تابع، فقط برای پارامتر a مقدار تعیین شده و پارامتر b مقداردهی نشده است:

var show = (a, b=200) => {
    console.log(a + " " + b);
}
show(100);
            <button></button>

خروجی :

100 200

مثال2: اگر در هنگام فراخوانی تابع فوق، به صورت مشخص مقداری برای پارامتر دوم (b) تعیین شود، این مقدار با مقدار پیش فرض آن جایگزین می شود. در مثال زیر، برای پارامتر b مقدار 500 ارسال شده که جایگزین مقدار پیش فرض 200 می شود:

var show = (a, b=200) => {  
    console.log(a + " " + b);  
}  
show(100,500);  
            <button></button>

خروجی :

100 500

=>آموزش کاربرد پارامتر Rest در تابع Arrow Function:

با استفاده از پارامتر Rest می توانید بدون اینکه از قبل تعیین کنید چند پارامتر می خواهید به تابع ارسال نمایید، از یک تا چندین پارامتر را بفرستید، فقط بایستی همه آنها از یک نوع داده ای باشند. به عبارت دیگر پارامتر Rest محدودیت الزام تعیین تعداد پارامترها از قبل را برطرف کرده است. می توان گفت پارامتر Rest یک حمل کننده یا نگهدارنده برای ارسال چندین آرگومان با یک نوع داده ای به تابع است.
برای تعیین پارامتر Rest، بایستی قبل از نام پارامتر عملگر spread operator به صورت 3 نقطه ... (نه 3 نقطه بیشتر و نه کمتر) را قرار دهید.
مثال: در کد مثال عملی زیر، یک پارامتر Rest به نام args را برای تابع ()show تعیین کرده ایم که در هنگام فراخوانی تابع، چندین پارامتر عددی را به آن پاس می دهد:

var show = (a, ...args) => {  
    console.log(a + " " + args);  
}  
show(100,200,300,400,500,600,700,800);  
            <button></button>

خروجی :

1 2	`100 200,300,400,500,600,700,800` `<button></button>`

عدم استفاده از پرانتز در تابع Arrow Function:

اگر تابع Arrow مورد استفاده، فقط یک پارامتر دارد، آنگاه استفاده از پرانتز در ساختار دستوری آن اختیاری است، همانند مثال زیر:

var show = x => {  
    console.log(x);  
}  
show("Hello World");  
            <button></button>

خروجی :

1 2	`Hello World` `<button></button>`

مزایای استفاده از تابع های Arrow Function:

استفاده از تابع های پیکان یا Arrow Function دارای چندین مزیت است که در ادامه به تشریح آنها پرداخته ایم:

حجم کدنویسی را کم می کند: هنگامی که از تابع Arrow Function استفاده می کنیم، سایز کدی که می نویسیم کاهش می یابد. با استفاده از تابع های arrow می توانید برای یک هدف یکسان، کد کمتری بنویسید.
دستور Return و آکولاد و پرانتز برای تابع های یک خطی، اختیاری هستند : در ES5 مجبور بودیم در همه تابع ها دستور Return را قرار بدهیم اما در ES6 برای تابع های یک خطی مثل Arrow تعیین دستور Return و استفاده از آکولاد یا پرانتزها اختیاری است.

برای نمونه در دو مثال زیر، تفاوت کدنویسی ES5 و ES6 را می توانید مشاهده نمایید:

نحوه نوشتن کد در ES5:

function show(value){  
return value/2;  
}  
            <button></button>

نحوه نوشتن همان کد در ES6:

var show = value => value/2;  
console.log(show(100)); 
            <button></button>

نکته :

اگر از آکولاد باز و بسته در دستورات یا تابع Arrow تک خطی استفاده نکنید، نیازی به به کاربردن کلمه کلیدی return نیز ندارید اما اگر از آکولادها، حتی در دستورات تک خطی استفاده کنید، آنگاه بایستی کلمه کلیدی return را بعدش به کار ببرید.

در کد مثال زیر، مفهوم فوق و تفاوت کدها را نشان داده ایم. مورد اول بدون استفاده از کلمه کلیدی return (برنامه دچار خطا می شود):

var show = value => {  
    value/2;  
}  
console.log(show(50));  
            <button></button>

خروجی :

1 2	`undefined` `<button></button>`

در مورد دوم کلمه return به کار رفته و خروجی موفقیت آمیز است:

var show = value => {  
   return value/2;  
}  
console.log(show(50));  
            <button></button>

خروجی :

متصل کردن (bind) خودکار دستورات: تابع های Arrow Function به صورت ایستاتیک یا متنی، دستورات را به هم متصل یا bind می کنند. عملکرد کلمه کلیدی this در تابع های Arrow با تابع های معمولی متفاوت است. در تابع های Arrow Function نیاز به متصل کردن کدها با کلمه کلیدی this نیست. در تابع های معمولی، کلمه this شی (object) ای که تابع را فراخوانی کرده است می باشد که می تواند مثلا یک پنجره (window)، دکمه (button)، سند (document) یا هر چیز دیگری باشد.
اما در تابع های Arrow Function، کلمه کلیدی this جایگزین شی ای است که تابع arrow را تعریف کرده است. در مثال زیر، تفاوت این عملکردها را نشان داده ایم.

مثال: یک کلاس را در نظر بگیرید که دارای آرایه ای از اعداد است. اگر تعداد آنها کمتر از 30 عدد باشد، می خواهیم آنها را در یک صف زیر مجموعه قرار دهیم. نحوه نوشتن کد هدف در ES5 و ES6 به لطف تابع های Arrow Function متفاوت خواهد بود.
در ES5، کد باستی به صورت زیر نوشته شود:

this.num.forEach(function(num) {   
    if (num < 30)   
        this.child.push(num);   
}.bind(this));  
            <button></button>

اما در ES6 با کمک تابع arrow کد بدون نیاز به کلمه کلیدی this به صورت زیر خلاصه تر می شود:

this.num.forEach((num) => {   
    if (num < 30)   
        this.child.push(num);   
});  
            <button></button>

در نتیجه با استفاده از تابع Arrow Function نیازی نیست به صراحت کدها را به هم متصل (bind) کنیم، زیرا به صورت خودکار توسط تابع Arrow انجام می شود.

نتیجه گیری :

همانطور که مشاهده کردید، استفاده از تابع Arrow پیچیدگی نوشتن کد تابع را کاهش داده و باعث کمتر شدن تعداد خطوط کد می شود.

آموزش تابع Generator در ES6

1400/06/12 1551 0

سوالات و نظرات

نظرات شما