آنها بسیار مد شده اند، ما آنها را در تمام مقالات جدید می بینیم. و اگر به آنها عادت نداشته باشید، درک کدهای مدرن (ES6) حاوی توابع پیکانی مشکل خواهید داشت.

این مقاله قصد ندارد به شما بگوید چه زمانی و چگونه از آنها استفاده کنید. من فقط سعی می کنم دستور جدید را برای کسانی که برای اولین بار آن را می بینند توضیح دهم. اینکه از آن استفاده می کنید یا نه مهم نیست، اما دیر یا زود باز هم در جایی با آن مواجه خواهید شد. بنابراین بهتر است مکانیزم این نحو جدید را درک کنید.

در اینجا یک مثال کوچک وجود دارد:

Const addOne = تابع (n) (n + 1; )

کد بالا را می توان به صورت زیر نوشت:

Const addOne = (n) => (بازگرداندن n + 1؛ )

یا در در این مورد، حتی کوتاه تر:

Const addOne = (n) => n + 1;

مثال دوم از مهاربندهای فرفری ( ... ) استفاده می کند، اما از آنجایی که فقط یک خط کد است، می توان مهاربندهای فرفری را حذف کرد و بازگشت به طور ضمنی، همانطور که در مثال سوم مشاهده شد، مشخص می شود.

یک پارامتر

هنگامی که یک تابع فلش یک پارامتر دارد، پرانتزها را می توان حذف کرد:

// بود: someCallBack((نتایج) => ( ... )) // اکنون: someCallBack(نتایج => ( ... ))

اما اگر هیچ پارامتری وجود ندارد، باید از پرانتزهای باز و بسته استفاده کنید:

SomeCallBack(() => ( ... ))

توابع پاسخ به تماس

فلش های تابعی به ویژه برای پاسخ به تماس ها مفید هستند. کسانی که با جاوا اسکریپت آشنا هستند با دامنه واژگانی آن آشنا هستند، که بسیار منظم است، اما می توانند ترفندهایی مانند این را انجام دهند ( این):

Var_this = این; someCallBack(function() ( _this.accessOuterScope(); ))

انواع مختلفی از این "_this" وجود دارد (مانند "خود" یا "آن")، اما ایده یکسان است. در توابع برگشت به تماس ما نیاز به دسترسی به نسخه بیرونی محدوده داریم، اما ایده یکسان است. در توابع برگشت به تماس، ما نیاز به دسترسی به نسخه بیرونی این scope داریم، که اکنون با قبل متفاوت است زیرا ما در مورد یک تابع پاسخ به تماس صحبت می کنیم.

با استفاده از توابع فلش، "block scope" و "this" را می گیریم که در هر دو مورد همان "this" است. این بدان معنی است که کد بالا را می توان بدون _this = this بازنویسی کرد:

SomeCallBack(() => ( this.accessOuterScope(); ))

"لفافه"

بیایید وضعیتی مانند React را تصور کنیم، جایی که رویداد روی کلیک کنیدباید doSomething() , () را فراخوانی کند، اما باید آرگومان هایی را نیز به doSomething() ارسال کند (مثلا ID). این مثال در واقع کار نمی کند:

چند کاربر)))

کد اجرا می شود، اما از نظر فنی بلافاصله پس از بارگذاری صفحه، doSomething() را فراخوانی می کند. برای حل این مشکل، برخی از توسعه دهندگان به یک تابع wrapper اشاره می کنند:

Const User = React.createClass(function() ( render: function() (بازگرداندن برخی از کاربران)، onClick: function() (doSomething(this.props.userId)؛ )))

عدم وجود پرانتز در this.onClick به این معنی است که به جای فراخوانی تابع، به سادگی یک مرجع تابع است.

تابع onClick() در حال حاضر چیزی شبیه یک wrapper برای doSomething() است. با توابع جهت دار می توانید از این نوع "Wapper" بسازید:

Const User = React.createClass(function() ( render: function() (doSomething(this.props.userId))> برخی از کاربران ))

به عنوان یک جایگزین، ما همچنین می‌توانیم از .bind() استفاده کنیم که به هیچ wrapper (توابع فلش یا هر چیز دیگری) نیاز ندارد:

Const User = React.createClass(function() ( render: function() (بازگرداندن برخی از کاربران)))

پشتیبانی مرورگر برای عملکردهای پیکان

اگر به پشتیبانی مرورگر نیاز دارید غیر از آخرین نسخه ها کرومو فایرفاکس، استفاده کنید ترانسپایلر بابلبرای تبدیل کد ES6 که نوشتید به ES5.

ES6 راه جدیدی برای ایجاد توابع دارد - با استفاده از عملگر Arrow =>. چنین توابعی را توابع پیکانی می نامند. آنها نحو فشرده تری را ارائه می دهند. اسمی ندارند و با این کارشان متفاوت است.

اولین کاری که ما انجام خواهیم داد این است که یک اسکریپت Babel را اجرا کنیم که فایل‌ها را نظارت می‌کند و نسخه‌های جدیدی را هنگام تغییر ایجاد می‌کند.

پوشه پروژه را باز کنید خط فرمان(KS). دستور را وارد کنید:

و Enter را فشار دهید

در پوشه src یک فایل arr.js ایجاد می کنیم و بلافاصله آن را در فایل index.html نشان می دهیم.

</script>

آخرین نسخه مرورگرها از عملکردهای پیکان بدون ترجمه پشتیبانی می کنند و مرورگر من یکی از آنهاست.

بیایید تابعی بنویسیم که دو عدد را جمع کرده و مجموع آنها را برمی گرداند. بیایید تابع add را فراخوانی کنیم.

تابع افزودن (x, y) ( بازگشت x + y; ) console.log (افزودن (3, 6));

در کنسول ما نتیجه را خواهیم دید - 9

حالا بیایید این تابع را به یک تابع فلش تبدیل کنیم.

بیایید کلمه function را حذف کنیم، نام تابع را برداریم و پرانتزهای فرفری و کلمه - return را برداریم. بعد از پارامترها یک فلش قرار می دهیم.

اجازه دهید اضافه کنیم = (x, y) => x + y; console.log(add(4, 6));

اگر با استفاده از عملگر typeof به نوع متغیر add نگاه کنید:

Console.log(typeof(add));

این چیزی است که در کنسول عملکرد خواهیم دید

این بدان معنی است که توابع فلش، توابع معمولی هستند. و شما می توانید این را با نگاه کردن به کد ترجمه شده تأیید کنید.

"استفاده سخت"؛ var _typeof = نوع نماد === "function" && type of Symbol.iterator === "symbol" ? تابع (obj) ( نوع برگشتی obj; ) : تابع (obj) (obj بازگشت && نوع نماد === "تابع" && obj.constructor === نماد && obj !== Symbol.prototype ? "symbol" : typeof obj ; ) var add = تابع add(x, y) ( بازگشت x + y; ); console.log(add(4, 6)); console.log(typeof add === "undefined" ? "undefined" : _typeof(add));

می بینیم که Babel کد ما را به یک عبارت تابع ساده تبدیل کرده است.

بیایید یک تابع ساده بنویسیم که یک عدد معین را مربع می کند.

اجازه دهید اضافه کنیم = (x, y) => x + y; console.log(add(4, 6)); console.log(typeof(add)); let square = function(a) ( a * a; ) console.log(square (4));

بیایید در کنسول نگاه کنیم:

تابع فلش به صورت زیر خواهد بود:

اجازه دهید مربع = x => x * x;

اگر یک تابع فلش فقط یک پارامتر بگیرد، دیگر نیازی به قرار دادن آن در پرانتز نیست!

بیایید تابعی بنویسیم که هیچ پارامتری را دریافت نکند.

تابع givNumer () ( return 33; ) console.log(givNumer ());

این تابع به سادگی عدد 33 را در کنسول چاپ می کند.

اجازه دهید givNumer = () => 33; console.log(givNumer());

بیایید یک تابع ایجاد کنیم که چیزی را برنگرداند. به سادگی پیامی را در کنسول مرورگر نمایش می دهد.

اجازه دهید log = function () ( console.log("Hello World!"); ); log();

تعویض:

اجازه دهید log = () => console.log("Hello World!!!"); log();

بیایید تابعی ایجاد کنیم که بدنه آن از دو خط تشکیل شده باشد.

تابع دو پارامتر خواهد داشت. بیایید یک متغیر در بدنه تابع ایجاد کنیم. پس از آن نتیجه را برمی گردانیم.

اجازه دهید mult = تابع (a, b) ( اجازه دهید نتیجه = a * b؛ نتیجه را برگرداند؛ ) console.log(mult (4, 5));

اگر چندین خط در یک تابع فلش وجود داشته باشد، مهاربندهای فرفری - () مورد نیاز است! و مطمئن شوید که با استفاده از کلمه کلیدی بازگشت، مشخص کنید که این تابع چه چیزی را برمی گرداند

تعویض:

اجازه دهید mult = (a, b) => ( اجازه دهید نتیجه = a * b؛ نتیجه را برگرداند؛ ) console.log(mult (4, 5));

حالا بیایید تابعی ایجاد کنیم که یک شی را به معنای واقعی کلمه برمی گرداند:

اجازه دهید literal = تابع () ( return ( نام: "جان"); ) console.log (literal ());

در کنسول خواهیم دید:

حالا بیایید سعی کنیم یک تابع فلش ایجاد کنیم که یک شی را به صورت واقعی برگرداند.

لازم به یادآوری است که اگر یک تابع پیکان یک شی را به صورت واقعی برگرداند، پرانتز مورد نیاز است - ()

تابع پیکانی که یک شی را به معنای واقعی کلمه برمی گرداند:

اجازه دهید literal = () => ((نام: "جان")); console.log(literal());

حالا بیایید سعی کنیم از تابع arrow به عنوان یک IIFE - عبارت تابع فوری فراخوانی شده استفاده کنیم.

به طور خلاصه، این تابعی است که بلافاصله پس از اعلان اجرا می شود

به نظر می رسد این است:

(تابع () ( console.log ("IIFE"); ))();

تابع پیکان IIFE به شکل زیر خواهد بود:

(() => console.log("IIFE"))();

یک ویژگی مهم توابع فلش این است که فلش باید بلافاصله بعد از پارامترها بیاید!

شما نمی توانید آن را بردارید و به یک خط زیر منتقل کنید. خطا خواهد داد!

کاربرد عملی توابع پیکان. توابع پیکان برای استفاده با آرایه ها بسیار راحت هستند.

بیایید یک آرایه با تعدادی اعداد ایجاد کنیم و آن را اعداد بنامیم. فکر می‌کنم می‌دانید که آرایه‌ها روش‌های مفیدی دارند که به شما امکان می‌دهند از طریق آرایه تکرار کنید، آن را فیلتر کنید و غیره.

بیایید مجموع همه متغیرهای آرایه را محاسبه کنیم. برای انجام این کار، متغیر دیگری را اعلام می کنم - اجازه دهید sum = 0;

بیایید از متد forEach() که هر آرایه دارد استفاده کنیم، روی عناصر تکرار می کنیم و به جمع اضافه می کنیم.

اجازه دهید اعداد = ; مجموع = 0; numbers.forEach(function(num) ( sum += num; )); console.log(sum);

در کنسول شاهد 55 خواهیم بود. بیایید این تابع را به یک تابع پیکان تبدیل کنیم: numbers.forEach(num => sum += num); console.log(sum);

بنابراین، آنچه قبلاً ما را سه خط می برد، اکنون یک خط می گیرد.

همچنین می توانیم هر عنصر آرایه را مربع کنیم.

اجازه دهید مربع = numbers.map(n => n * n); console.log(squared);

توابع فلش و این. برای انجام این کار، یک شی به معنای واقعی کلمه ایجاد می کنم که آن را در متغیر person ذخیره می کنم.

شی شخص دارای یک ویژگی نام با مقدار 'Bob' و یک ویژگی greet با مقدار 'Greet' خواهد بود. ما تبریک را به کنسول چاپ می کنیم و همچنین هدف از این کار را بررسی می کنیم.

Let person = ( name: "Bob", greet: function () ( console.log("Hello! name is " + this.name); console.log(this); ) ); person.greet();

در کنسول مرورگر ما سلام و خود شخص را می بینیم.

حالا تابع را با یک فلش جایگزین می کنیم و ببینیم چه اتفاقی برای این می افتد.

Let person = ( name: "Bob", greet: () => ( console.log("Hello! name is " + this.name); console.log(this); ) ); person.greet();

حالا ما مقدار نام را دریافت نکردیم و مقدار این پنجره است!

اما چرا؟ نکته این است که مقدار این از زمینه ای که تابع در آن اعلان شده است گرفته می شود. ! مهم نیست که این عملکرد در کجا انجام می شود. این را می توان در تصویر مشاهده کرد:

ما برنامه داریم

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

اگر به یک تابع منظم نگاه کنیم، می دانیم که این به خود شی شخص اشاره دارد. ممکن است بپرسید که چرا مقدار این در توابع فلش از متن گرفته شده است؟ و پاسخ بسیار ساده است - آنها این کار را به این روش انجام دادند! :-) نکته این است که توابع فلش برای حل مشکلات در موقعیت های مختلف ایجاد شده اند. بیایید به یک مثال نگاه کنیم. برای دیدن مشکل به تابع پیکان خود برمی گردیم.

Let person = ( name: "Bob", greet: function () ( console.log("Hello! name is " + this.name); console.log(this); ) );

بیایید تصور کنیم که باب ما کاملاً شلوغ است و برای تکمیل کار خود به چند ثانیه زمان نیاز دارد. 2 ثانیه صبر کنید. ما با استفاده از تابع setTimeout() شبیه سازی می کنیم. این تابع تابعی را به عنوان پارامتر اول و تعداد میلی ثانیه منتظر ماندن را به عنوان پارامتر دوم می گیرد.

اجازه دهید شخص = ( نام: "Bob", greet: function () ( setTimeout(function () (consol.log("Hello! ;)) person.greet();

اگر با جاوا اسکریپت تجربه دارید، فکر می کنم متوجه شده اید که مشکل چیست. به هر حال، بیایید ببینیم در مرورگر چه اتفاقی خواهد افتاد. دقیقا دو ثانیه بعد این تصویر را در مرورگر خواهیم دید.

اما چرا؟ اگر به کد ما نگاه کنید، منطقی است که فرض کنید. که این به شی شخص اشاره دارد زیرا ما از یک تابع منظم استفاده می کنیم. مسئله این است که setTimeout() متعلق به شی پنجره است. اگر آن را به این صورت بنویسید: window.setTimeout() ، پس فکر می کنید به چه چیزی اشاره می کند؟ و در کنسول هم همین نتیجه را خواهیم گرفت! راه های مختلفی برای حل این مشکل در ES5 وجود دارد. ما متداول‌ترین مورد را بررسی می‌کنیم: قبل از setTimeout()، متغیر دیگری را اعلام می‌کنم و آن را به عنوان مقدار اختصاص می‌دهم. و حالا در بدنه تابع به جای این به آن اشاره می کنیم.

اجازه دهید شخص = ( نام: "باب"، سلام: تابع () ( اجازه دهید که = این؛ setTimeout(تابع () (consol.log("سلام! نام من " + that.name است); console.log(that) ;)، 2000))؛ person.greet();

اکنون، به لطف بسته شدن، تابعی که به setTimeout() ارسال می کنیم، به متغیری دسترسی خواهد داشت که مقدار آن این خواهد بود، یعنی در این حالت، شی شخص است.

برای وضوح، می توانید به آنچه که و این ما اشاره دارد نگاه کنید.

let person = ( name: "Bob", greet: function () ( let that = this; setTimeout(function () ( console.log("سلام! نام من " + that.name است); console.log("این is my That = " + that); console.log("It my This = " + this); ), 2000); ) ); person.greet();

ما تایید را در کنسول خواهیم دید:

می بینیم که این شی پنجره خواهد بود - This =، و آن شی شخص ما خواهد بود - That =.

در ES6 به سادگی می توانیم از تابع فلش برای حل این مشکل استفاده کنیم.

اجازه دهید شخص = ( نام: "باب"، سلام: تابع () ( setTimeout(() => (consol.log("سلام! نام من " + this.name است); console.log("این من است = "+ this); ), 2000); )); person.greet();

در نتیجه، در کنسول خواهیم دید:

که در مثال گرافیکیبرای یک تابع فلش، متن یک شی شخص خواهد بود، نه یک شی پنجره. به همین دلیل این به شخص اشاره خواهد کرد.

علاوه بر نحو فشرده، توابع فلش برای حل مشکلاتی از این قبیل معرفی شدند.

برای مرجع، می توانید ببینید که چگونه بابل این را حل کرد

Var person = ( نام: "Bob", greet: function greet() ( var _this = this; setTimeout(function () (consol.log("سلام! نام من " + _this.name) است؛ console.log(" It is my This = " + _this); ), 2000); ) ); person.greet(); بابل از همان روشی استفاده کرد که ما در ES5 استفاده کردیم. تنها تفاوت این است که ما متغیر را that نامیدیم و بابل آن را - _this نامید. به لطف بسته شدن، تابعی که به setTimeout ارسال می کنیم به متغیر _this و در نتیجه به شی شخص دسترسی خواهد داشت.

من فکر می‌کنم سخت‌ترین بخش این بخش، درک نحوه عملکرد بسته شدن است.

برخی از ویژگی های دیگر توابع پیکان:
شما می توانید اطلاعات بیشتر در مورد عملکردهای ES6 و پیکان را در پست من مشاهده کنید

سلام به همه! در این مقاله به بررسی عملکردهای پیکان در ES6 و نحوه استفاده از آنها خواهیم پرداخت.

توابع پیکان توابعی هستند که با استفاده از عملگر پیکان (=>) نوشته می شوند.

بیایید فوراً به یک مثال نگاه کنیم:

اجازه دهید اضافه کنیم = (x, y) => x + y;
console.log(add(5, 2));

در نتیجه اجرای این تابع، عدد 7 را در کنسول مشاهده خواهیم کرد.

ابتدا آرگومان های داخل پرانتز را پاس می کنیم سپس علامت فلش را می گذاریم و سپس کد خود تابع را می نویسیم. در مورد ما، به سادگی دو عدد می گیرد و آنها را جمع می کند. در تئوری، این همان بیان تابع در ES5 است. اگر از Babel یا کامپایلرهای مشابه استفاده می کنید، به احتمال زیاد چیزی شبیه به این می نویسند:

Var add = تابع add (x, y) (
بازگشت x + y;
};

اگر تابع شما فقط یک پارامتر بگیرد، پرانتز اختیاری است.

اجازه دهید مربع = x => x*x;

این تابع فقط یک آرگومان می گیرد و عدد داده شده را مربع می کند.

عملکرد بدون پارامتر:

اجازه دهید func = () => 77;

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

ضرب کنیم = (x,y) => (
اجازه دهید نتیجه = x*y;
نتیجه بازگشت؛
};

اگر باید یک شی را به صورت واقعی برگردانید، باید آن را در پرانتز بپیچید:

اجازه دهید getObject = () => (( نام تجاری: "BMW" ));

تابع خود فراخوانی به صورت زیر است:

یک عبارت تابع فلش از لحاظ نحوی یک جایگزین فشرده برای یک عبارت تابع معمولی است، اگرچه بدون پیوندهای خاص خود به کلمات کلیدی this، آرگومان، super یا new.target. عبارات تابع پیکان به عنوان روش مناسب نیستند و نمی توان از آنها به عنوان سازنده استفاده کرد.

نحو نحو پایه (param1, param2, …, paramN) => ( عبارات ) (param1, param2, …, paramN) => عبارت // معادل: => ( عبارت بازگشتی؛ ) // پرانتزها در صورت وجود اختیاری هستند فقط یک نام پارامتر: (singleParam) => ( دستورات ) singleParam => ( دستورات ) // لیست پارامترهای یک تابع بدون پارامتر باید با یک جفت پرانتز نوشته شود. پرانتز کردن بدنه یک تابع برای برگرداندن عبارت تحت اللفظی شیء: params => ((foo: bar)) // پارامترهای Rest و پارامترهای پیش فرض پشتیبانی می شوند (param1, param2, ...rest) => ( دستورات ) (param1 = defaultValue1, param2, …, paramN = defaultValueN) => ( عبارات ) // تخریب در لیست پارامترها نیز پشتیبانی می شود var f = ( = , (x: c) = (x: a + b)) => a + b + c؛ f(); // 6 توضیحات

دو عامل بر معرفی توابع پیکان تأثیر گذاشت: نیاز به توابع کوتاهتر و رفتار این کلمه کلیدی.

توابع کوتاهتر var element = [ "هیدروژن"، "هلیوم"، "لیتیوم"، "بریلیم" ]; // این دستور آرایه را برمی گرداند: element.map (function(element) ( return element.length; )); // تابع منظم بالا را می توان به عنوان تابع فلش در زیر عناصر نوشت.map((عنصر) => ( return element.length; )); // // وقتی فقط یک پارامتر وجود دارد، می‌توانیم پرانتزهای اطراف را حذف کنیم element.map (element => ( return element.length; )); // // هنگامی که تنها عبارت در تابع فلش 'return' است، می توانیم 'return' را حذف کرده و // براکت های مجعد اطراف را حذف کنیم element.map(element => element.length); // // در این مورد، چون ما فقط به ویژگی length نیاز داریم، می‌توانیم از پارامتر تخریب‌کننده استفاده کنیم: // توجه داشته باشید که `length` با خاصیتی که می‌خواهیم به دست آوریم مطابقت دارد، در حالی که // آشکارا غیر خاص`lengthFooBarX: فقط نام متغیری که می‌توان // را به هر نام متغیر معتبری که می‌خواهید تغییر داد. // // این تخصیص پارامتر تخریب ساختاری را می توان به شکل زیر نیز نوشت. با این حال، توجه داشته باشید که در // این مثال، مقدار "length" را به ویژگی ساخته شده اختصاص نمی دهیم. در عوض، نام تحت اللفظی // خود متغیر `length` به عنوان ویژگی که می خواهیم از شی بازیابی کنیم استفاده می شود. element.map ((( طول )) => طول); // این را جدا نکنید

قبل از توابع فلش، هر تابع جدید این مقدار را بر اساس نحوه فراخوانی تابع تعریف می‌کرد:

• یک شی جدید در مورد سازنده.
• در فراخوانی عملکرد حالت سخت تعریف نشده است.
• شی پایه اگر تابع به عنوان "روش شی" فراخوانی شود.

ثابت شده است که این با سبک برنامه نویسی شی گرا کمتر از ایده آل است.

Function Person() (// سازنده ()Person "this" را به عنوان یک نمونه از خودش تعریف می کند. this.age = 0؛ setInterval(function growUp() (// در حالت غیر دقیق، تابع growUp() " را تعریف می کند. this` // به‌عنوان شی سراسری (زیرا جایی است که growUp() اجرا می‌شود.)، // که با «this» // که توسط سازنده ()Person تعریف شده متفاوت است. this.age++; ), 1000) ; ) var p = new Person();

در ECMAScript 3/5، این مشکل با تخصیص مقدار در این به متغیری که می‌توانست روی آن بسته شود، قابل رفع بود.

Function Person() ( var that = this; that.age = 0; setInterval(function growUp() ( // callback به متغیر "that" اشاره دارد که // مقدار آن شی مورد انتظار است. that.age++; ) ، 1000); ) "استفاده از سخت"; var obj = (a: 10); Object.defineProperty(obj, "b", ( get: () => ( console.log(this.a, typeof this.a, this); // undefined "undefined" Window (...) (یا جهانی object) return this.a + 10؛ // نشان دهنده شی جهانی "Window" است، بنابراین "this.a" "undefined" را برمی گرداند) ));

استفاده از اپراتور جدید

توابع پیکان را نمی توان به عنوان سازنده استفاده کرد و در صورت استفاده با new خطا ایجاد می کند.

Var Foo = () => (); var foo = new Foo(); // TypeError: Foo سازنده نیست

استفاده از ویژگی نمونه اولیه

توابع پیکان خاصیت نمونه اولیه ندارند.

Var Foo = () => (); console.log(Foo.prototype); // تعریف نشده

استفاده از کلمه کلیدی بازده

کلمه کلیدی yield را نمی توان در بدنه یک تابع پیکان استفاده کرد (مگر در مواردی که در توابعی که بیشتر در داخل آن قرار دارند مجاز است). در نتیجه، توابع پیکان را نمی توان به عنوان مولد استفاده کرد.

بدن عملکرد

توابع پیکان می توانند "بدنه مختصر" یا "بدنه بلوک" معمولی داشته باشند.

در یک متن مختصر، فقط یک عبارت مشخص می شود که به مقدار بازگشتی ضمنی تبدیل می شود. در یک بدنه بلوک، باید از دستور بازگشت صریح استفاده کنید.

Var func = x => x * x; // نحو مختصر بدن، به معنای "بازگشت" var func = (x, y) => ( بازگشت x + y; ); // با بدنه بلوک، "بازگشت" صریح مورد نیاز است

برگرداندن حروف تحت اللفظی شیء

به خاطر داشته باشید که برگرداندن لفظ شیء با استفاده از پارامترهای نحو مختصر بدن => (object:literal) آنطور که انتظار می رود کار نخواهد کرد.

Var func = () => ( foo: 1 ); // فراخوانی func() تعریف نشده برمی گردد! var func = () => ( foo: function() ()); // SyntaxError: دستور تابع نیاز به نام دارد

این به این دلیل است که کد داخل پرانتز (()) به عنوان دنباله ای از عبارات تجزیه می شود (یعنی foo مانند یک برچسب در نظر گرفته می شود، نه یک کلید در یک شی به معنای واقعی کلمه).

شما باید شی را به صورت تحت اللفظی در پرانتز قرار دهید:

Var func = () => (( foo: 1 ));

خط می شکند

یک تابع فلش نمی تواند یک خط شکن بین پارامترهای خود و فلش خود داشته باشد.

Var func = (a, b, c) => 1; // SyntaxError: عبارت مورد انتظار، دریافت "=>"

با این حال، این را می‌توان با قرار دادن خط شکسته بعد از فلش یا استفاده از پرانتز/پرانتز همانطور که در زیر مشاهده می‌کنید اصلاح کرد تا اطمینان حاصل شود که کد زیبا و کرکی باقی می‌ماند. همچنین می‌توانید بین آرگومان‌ها شکاف خط قرار دهید.

Var func = (a, b, c) => 1; var func = (a, b, c) => (1); var func = (a, b, c) => ( return 1 ); var func = (a, b, c) => 1; // خطای دستوری پرتاب نشده است

ترتیب تجزیه

اگرچه فلش در یک تابع فلش یک عملگر نیست، توابع فلش قوانین تجزیه خاصی دارند که با اولویت عملگر در مقایسه با توابع معمولی تعامل متفاوتی دارند.

اجازه پاسخ به تماس برگشت به تماس = برگشت به تماس || تابع()؛ // ok callback = callback || () => (); // SyntaxError: آرگومان‌های تابع فلش نامعتبر callback = callback || (() => ()); // خوب

مثال های بیشتر // یک تابع پیکان خالی تعریف نشده برمی گرداند let vala = () => (); (() => "foobar")(); // "foobar" را برمی گرداند // (این یک عبارت تابع فوری است) var simple = a => a > 15 ? 15: الف; ساده (16)؛ // 15 simple(10); // 10 حداکثر = (a, b) => a > b ? الف: ب // فیلتر آسان آرایه، نقشه برداری، ... var arr = ; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // var double = arr.map(v => v * 2); // // زنجیره های وعده مختصرتر وعده می دهند.then(a => ( // ... )).then(b => ( // ... )); // توابع پیکان بدون پارامتر که تجزیه بصری آسان‌تر است setTimeout(() => (consol.log("من زودتر اتفاق می‌افتم"); setTimeout(() => (// کد عمیق‌تر console.log("بعدا اتفاق می‌افتم") یازده)؛ مشخصات فنی نظر وضعیت مشخصات

ECMAScript 2015 (نسخه ششم، ECMA-262)	استاندارد	تعریف اولیه
آخرین پیش نویس ECMAScript (ECMA-262) تعریف "تعریف تابع پیکان" در آن مشخصات.	پیش نویس

سازگاری با مرورگر

جدول سازگاری در این صفحه از داده های ساخت یافته تولید می شود. اگر می‌خواهید در داده‌ها مشارکت کنید، لطفاً https://github.com/mdn/browser-compat-data را بررسی کنید و یک درخواست برای ما ارسال کنید.

داده های سازگاری را در GitHub به روز کنید

سرور دسکتاپ موبایلکروم اج فایرفاکس اینترنت اکسپلورر اپرا سافاری اندروید مرور وب کروم برای اندروید فایرفاکس برای اندروید اپرا برای اندروید سافاری در iOS سامسونگ اینترنت Node.jsتوابع پیکان کاما دنباله دار در پارامترها

پشتیبانی کامل کروم 45

Edge پشتیبانی کامل بله

پشتیبانی کامل فایرفاکس 22 یادداشت پشتیبانی کامل 22 یادداشت یادداشت قبل از فایرفاکس 39، پایان دهنده خط (\n) به اشتباه پس از آرگومان های تابع پیکان مجاز بود. این برای مطابقت با مشخصات ES2015 و کدهایی مانند () \n => برطرف شده است

IE بدون پشتیبانی شماره

پشتیبانی کامل اپرا 32

سافاری پشتیبانی کامل 10

WebView Android پشتیبانی کامل 45

Chrome Android پشتیبانی کامل 45

فایرفاکس اندروید پشتیبانی کامل 22 یادداشت پشتیبانی کامل 22 یادداشت یادداشت اجرای اولیه توابع فلش در فایرفاکس آنها را به طور خودکار سخت می کند. این مورد از فایرفاکس 24 تغییر کرده است. اکنون مورد نیاز است. یادداشت قبل از فایرفاکس 39، پایان دهنده خط (\n) به اشتباه پس از آرگومان های تابع پیکان مجاز بود. این مشکل برای مطابقت با مشخصات ES2015 برطرف شده است و کدی مانند () \n => () اکنون در این و نسخه‌های بعدی یک خطای دستوری ایجاد می‌کند.

اپرا اندروید پشتیبانی کامل 32

سافاری iOS پشتیبانی کامل 10

سامسونگ اینترنت اندروید پشتیبانی کامل 5.0

nodejs پشتیبانی کامل بله

پشتیبانی کامل کروم 58

حاشیه، غیرمتمرکز؟

پشتیبانی کامل فایرفاکس 52

IE بدون پشتیبانی شماره

پشتیبانی کامل اپرا 45

سافاری؟

WebView Android پشتیبانی کامل 58

Chrome Android پشتیبانی کامل 58

فایرفاکس اندروید پشتیبانی کامل 52

اپرا اندروید پشتیبانی کامل 43

سافاری iOS؟

سامسونگ اینترنت اندروید پشتیبانی کامل 7.0

nodejs پشتیبانی کامل بله

Legend پشتیبانی کامل پشتیبانی کامل بدون پشتیبانی بدون پشتیبانی سازگاری ناشناخته سازگاری ناشناخته به یادداشت های اجرایی مراجعه کنید. به یادداشت های اجرایی مراجعه کنید.

• آموزش

یکی از جالب‌ترین بخش‌های استاندارد جدید ECMAScript 6، عملکردهای پیکانی است. توابع پیکان، همانطور که از نام آن پیداست، با یک دستور جدید که از یک فلش => استفاده می کند، تعریف می شوند. با این حال، علاوه بر نحو عالی، توابع فلش با توابع سنتی به طرق دیگر متفاوت هستند:

• صحافی واژگانی. ارزش های متغیرهای خاصاین، super و آرگومان‌ها نه با نحوه فراخوانی توابع فلش، بلکه با نحوه ایجاد آنها تعیین می‌شوند.
• غیر قابل تغییر این , فوق العاده و استدلال . مقادیر این متغیرها در داخل توابع پیکان بدون تغییر باقی می مانند چرخه زندگیکارکرد.
• توابع پیکان را نمی توان به عنوان سازنده استفاده کرد و هنگام استفاده با عملگر جدید خطا ایجاد می کند.
• در دسترس نبودن مقدار "بومی" متغیر آرگومان ها.

دلایل متعددی برای معرفی این تفاوت ها وجود داشت. اولین مورد این است که binding اغلب در جاوا اسکریپت استفاده می شود. هنگام استفاده از توابع سنتی، از دست دادن صحیح این مقدار بسیار آسان است، که می تواند منجر به عواقب غیرمنتظره شود. دلیل دیگر این است که موتورهای JS به دلیل این محدودیت‌ها می‌توانند اجرای توابع پیکان را به راحتی بهینه کنند (برخلاف توابع سنتی که می‌توانند به‌عنوان سازنده مورد استفاده قرار گیرند و برای تغییر آزاد هستند. متغیرهای خاص).

توجه: این مقاله تلفیقی از ترجمه رایگان مقاله درک عملکردهای پیکان ECMAScript 6 و خواندن آخرین پیش نویس مشخصات (20 ژانویه 2014 پیش نویس Rev 22) است.

نحو به طور کلی، نحو توابع فلش مانند این است:

Var fun = (x) => x;
این بسیار شبیه به نحو مشابه در زبان هایی مانند Scala، CoffeeScript و نحو عبارات لامبدا از سی شارپ است.

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

یک پارامتر اعلان یک تابع فلش که یک آرگومان را می گیرد و به سادگی آن را برمی گرداند بسیار ساده است:

Var reflect = value => value; // معادل var reflect = تابع (مقدار) (مقدار بازگشتی؛)
وقتی یک تابع پیکان فقط یک آرگومان داشته باشد، می توان آن را بدون پرانتز اعلان کرد. بدنه تابعی که از پیکان می‌آید نیز ممکن است فاقد پرانتز باشد و ممکن است حاوی کلمه کلیدی بازگشتی نباشد.

چند پارامتر اما اگر می خواهید بیش از یک پارامتر را اعلام کنید، باید لیست پارامترها را در پرانتز قرار دهید:

Var sum = (num1, num2) => num1 + num2; // معادل var sum = تابع (num1, num2) ( num1 + num2; );
تابع sum به سادگی دو آرگومان اضافه می کند. تنها تفاوت با مثال قبلی وجود پرانتز و کاما است (درست مانند توابع سنتی).

بدون پارامتر به طور مشابه، یک تابع بدون هیچ آرگومان باید یک لیست پارامتر خالی در داخل پرانتز داشته باشد:

مجموع Var = () => 1 + 2; // معادل var sum = function() ( return 1 + 2; );

سینتکس بدنه تابع سنتی شما می توانید از دستور تابع سنتی برای بدنه یک تابع فلش زمانی که حاوی بیش از یک عبارت باشد استفاده کنید. یعنی تابع را در پرانتز پیچیده و کلمه کلیدی بازگشتی را اضافه کنید:

مجموع var = (num1, num2) => ( برگردان num1 + num2; ) // معادل var sum = تابع (num1, num2) ( num1 + num2; );
بدنه تابع دقیقاً به همان روشی که برای توابع کلاسیک پردازش می شود، با این تفاوت که مقادیر متغیرهای خاصاین، سوپر و آرگومان ها متفاوت ارزیابی خواهند شد.

Object literal به طور جداگانه، لازم به ذکر است که بدنه تابعی که دارای مهاربندهای فرفری نیست و صرفاً یک شی را به معنای واقعی کلمه برمی گرداند، باید در داخل پرانتز قرار گیرد:

Var getTempItem = id => (( id: id, name: "Temp" )); // معادل var getTempItem = function(id) ( return ( id: id, name: "Temp" ) );
قرار دادن یک شی در پرانتز به تجزیه کننده می گوید که پرانتزهای فرفری شروع نحو سنتی برای یک بدنه تابع نیستند، بلکه شروع یک حرف هستند.

تعداد متغیر پارامترها از آنجایی که شیء آرگومان های "بومی" در داخل یک تابع فلش موجود نیست (مقدار آرگومان ها از نظر لغوی با مقدار آرگومان های تابع سنتی که تابع فلش در آن اعلام شده است مرتبط است)، پس برای توابع فلش با یک تعداد متغیر پارامترهایی که برای استفاده از الگوی استراحت نیاز دارید الگوهای تخریب کننده. مثال:

Var getTempItems = (... استراحت) => استراحت; // معادل var getTempItems = function() ( return .slice.apply(arguments) );

در حال تخریب الگو به عنوان پارامتر برای اهداف این مقاله، ما الگوهای تخریب را در نظر نمی گیریم - می توانید درباره آنها در مقاله بررسی اجمالی ECMAScript 6، نسخه بعدی جاوا اسکریپت، بخوانید، اگرچه این اطلاعات تا حدی قدیمی است.

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

Var a = ((a)) => a; var b = ([b]) => b;

استفاده از توابع پیکان تنظیم زمینه یکی از سناریوهای رایج در جاوا اسکریپت، تنظیم صحیح این مقدار در داخل یک تابع (binding) است. از آنجا که مقدار این را می توان تغییر داد، بسته به زمینه ای که تابع در آن اجرا می شود، ممکن است زمانی که منظور شما چیزی کاملا متفاوت است، به اشتباه روی یک شی عمل کنید. به مثال زیر نگاه کنید:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", function(event) ( this.doSomething(event.type); // error )); ) , doSomething: function( type) ( console.log("Handling" + type + " for " + this.id) ) );
در کد بالا، شی pageHandler باید کلیک‌های روی صفحه را مدیریت کند. متد ()init یک handler را به رویداد مورد نظر متصل می کند که به صورت داخلی this.doSomething() را فراخوانی می کند. با این حال، کد به درستی کار نخواهد کرد. ارجاع به این اگر سعی کنید این کد را اجرا کنید، با خطا مواجه می شوید زیرا شی سند دارای متد doSomething نیست.

می توانید این مقدار را با استفاده از handleEvent یا با فراخوانی متد ()bind استاندارد در تابع به شی pageHandler متصل کنید:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", (function(event) ( this.doSomething(event.type); // error )).bind(this)) ;) , doSomething: function(type) ( console.log("Handling" + type + " for " + this.id) ) );
اکنون کد همانطور که در نظر گرفته شده است کار می کند، اما به نظر دست و پا گیرتر است. علاوه بر این، هر بار با فراخوانی bind(this) یک تابع جدید ایجاد می‌کنید که این مقدار به مقدار pageHandler گره خورده است، اما کد همانطور که در نظر داشتید کار می‌کند.

توابع پیکان مشکل را به روشی ظریف‌تر حل می‌کنند زیرا از صحافی واژگانی برای مقدار این (و همچنین سوپر و آرگومان‌ها) استفاده می‌کنند و مقدار آن با مقدار آن در محلی که تابع فلش ایجاد شده است تعیین می‌شود. مثلا:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", event => this.doSomething(event.type)); ) , doSomething: function(type) ( console.log( "Handling " + type + " for " + this.id) ) );
در این مثال، handler یک تابع پیکانی است که () this.doSomething را فراخوانی می کند. مقدار این همان تابع init() و کد داخل خواهد بود در این مثالبه درستی کار خواهد کرد، شبیه به موردی که از bind() استفاده کرده است. صرف نظر از اینکه فراخوانی ()this.doSomething مقداری را برمی گرداند یا خیر، عبارت داخل بدنه یک تابع فلش نیازی به محصور شدن در پرانتزهای فرفری ندارد.

علاوه بر این، مثال بالا نیز کارآمدتر از فراخوانی ()bind است زیرا مانند کد زیر برای مرورگر است:

Var pageHandler = ( id: "123456" , init: function() ( var self = this; document.addEventListener("click", function(event) ( return self.doSomething(event.type) )); ) , doSomething: function(type) ( console.log("Handling" + type + " for " + this.id) ) );
یعنی خلقت اتفاق نمی افتد خصوصیت جدید، همانطور که در مورد فراخوانی bind() وجود دارد.

«پرتاب کردن» زمینه بین چند فراخوان بدیهی است که می‌توانید یک تابع فلش را در یک تابع دیگر قرار دهید، بنابراین این مقدار را از طریق آنها «پرتاب» کنید:

Var obj = ( arr1: , arr2: ["a"، "b"، "c"] , concatenate: function(a, b)( return a + "|" + b ) , intersection: function() (این را برگردانید .arr1.reduce((sum, v1) => // arrow function 1 this.arr2.reduce((sum, v2) => ( // arrow function 2 sum.push(this.concatenate(v1, v2)) بازگشت sum;) , sum) , ) ) ); var arrSum = obj.intersection();//["1|a"، "1|b"، "1|c"، "2|a"، "2|b"، "2|c"، "3 |a»، «3|b»، «3|c»]

استفاده به عنوان آرگومان نحو کوتاه توابع پیکانی آنها را به کاندیدای ایده آل برای ارسال به عنوان آرگومان به فراخوانی های دیگر تابع تبدیل می کند. به عنوان مثال، اگر می خواهید یک آرایه را مرتب کنید، معمولا چیزی شبیه به این می نویسید:

Var result = values.sort(function(a, b) ( return a - b ));
برای یک عملیات ساده بسیار پرمخاطب. مقایسه با نماد کوتاه یک تابع پیکان:

Var result = values.sort((a, b) => a - b);
استفاده از روش هایی مانند array() , map() , reduce() و غیره را می توان با استفاده از دستور تابع فلش کوتاه ساده کرد.

سایر ویژگی های توابع فلش اگرچه توابع فلش با توابع سنتی متفاوت هستند، اما دارای برخی ویژگی های مشترک هستند:

• عملگر typeof "تابع" را برای یک تابع پیکان برمی گرداند
• یک تابع فلش نیز نمونه ای از Function "class" است، بنابراین instanceof مانند یک تابع سنتی کار می کند.
• همچنان می‌توانید از متدهای call() ، application() و bind() استفاده کنید، اما به یاد داشته باشید که آنها بر مقدار این تأثیر نمی‌گذارند.
• می توانید از متد ()toMethod استفاده کنید، اما مقدار super () را تغییر نمی دهد. روش toMethod() در es6 معرفی شد و در این مقاله پوشش داده نشده است).

تفاوت قابل توجهی با توابع سنتی این است که تلاش برای فراخوانی یک تابع فلش با استفاده از عملگر جدید باعث خطای زمان اجرا می شود.توابع پیکان خلاصه یکی از جالب ترین نوآوری ها در ECMAScript 6 است که با داشتن یک نحو تعریف مختصر، ساده تر می شود. انتقال توابع به عنوان مقدار پارامتر به تابع دیگر.

نحو مختصر به شما این امکان را می دهد که چیزهای پیچیده را حتی پیچیده تر به روشی ساده تر بنویسید. برای مثال، این چیزی است که مولد شناسه به نظر می رسد (که در es5 بسیار پرمخاطب تر به نظر می رسد):

اجازه دهید idGen = (start = 0، id = start، reset = (newId = start) => id = newId، next = () => id++) => ((تنظیم مجدد، بعدی)); اجازه دهید gen = idGen(100); console.log(gen.next()، gen.next()، gen.reset(10)، gen.next());//100 101 10 10
و صحافی واژگانی یکی از بزرگترین منابع درد و ناامیدی را برای توسعه دهندگان می بندد و همچنین عملکرد را به دلیل بهینه سازی در سطح موتور js بهبود می بخشد.


اگر می‌خواهید عملکردهای پیکان را امتحان کنید، می‌توانید نمونه‌های بالا را در کنسول فایرفاکس که روشن است اجرا کنید این لحظه(02.2014 FF28) تقریباً به طور کامل از توابع پیکان پشتیبانی می کند (FF28 مقدار آرگومان ها را به اشتباه محاسبه می کند).

همچنین می توانید عملکردهای پیکان و سایر ویژگی های es6 را در مترجم آنلاین Traceur امتحان کنید.

برچسب ها: اضافه کردن برچسب