توابع پیکان ES6: نحو چربی و مختصر در JavaScript

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

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

تبدیل یک عملکرد Pre-ES6 به یک عملکرد Arrow

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

در اینجا یک روش استاندارد برای اعلام عملکرد و سپس فراخوانی آن در JavaScript وجود دارد:

// function declaration
function sayHiStranger() {
  return 'Hi, stranger!'
}

// call the function
sayHiStranger()

همچنین می توانید عملکرد مشابه a را بنویسید بیان عملکرد، مثل این:

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

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

const sayHiStranger = () => 'Hi, stranger'

مزایای این شامل موارد زیر است:

• فقط یک خط کد
• نه function کلمه کلیدی
• نه return کلمه کلیدی
• بدون بریس فرفری {}

در جاوا اسکریپت ، توابع “شهروندان درجه یک” هستند. یعنی می توانید توابع را در متغیرها ذخیره کنید ، آنها را به توابع دیگر به عنوان آرگومان منتقل کنید و آنها را از توابع دیگر به عنوان مقادیر برگردانید. همه این کارها را می توانید با استفاده از توابع پیکان انجام دهید.

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

نحو No Parens

در مثال بالا ، عملکرد هیچ پارامتری ندارد. در این حالت ، باید مجموعه ای از پرانتزهای خالی را اضافه کنید () قبل از پیکان چاق (=>) نماد. همان موقع که دارید همین است بیش از یک پارامتر:

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log(getNetflixSeries('Bridgerton', '2020') )
// output: The Bridgerton series was released in 2020

با فقط یک پارامتراما ، می توانید جلو بروید و پرانتزها را کنار بگذارید (لازم نیست ، اما می توانید):

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log(favoriteSeries("Bridgerton"))
// output: "Let's watch it"

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

// with parentheses: correct
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log(bestNetflixSeries())

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

و فقط به این دلیل که می توانید ، به این معنی نیست که باید. کایل سیمپسون (از شهرت تو نمی دانید JS) با کمی کنایه از سبک بینی و حسن نیت مخلوط شده است ، افکار خود را در مورد حذف پرانتز در این نمودار جریان.

بازگشت ضمنی

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

// using the JS sort() function to sort the titles in descending order 
// according to the number of likes (more likes at the top, fewer at the bottom
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// call the function 
// output:the titles and the n. of likes in descending order
console.log(orderByLikes)

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

const greeter = greeting => name => `${greeting}, ${name}!`

اونجا چه خبره؟ از نحو عملکرد منظم استفاده کنید:

function greeter(greeting) {
  return function(name) {
    return `${greeting}, ${name}!` 
  }
} 

اکنون ، شما می توانید به سرعت نحوه عملکرد خارجی را ببینید greeter یک پارامتر دارد ، greeting، و یک تابع ناشناس را برمی گرداند. این عملکرد درونی به نوبه خود پارامتری به نام دارد name و یک رشته را با استفاده از مقدار هر دو برمی گرداند greeting و name. در اینجا نحوه فراخوانی عملکرد ذکر شده است:

const myGreet = greeter('Good morning')
console.log( myGreet('Mary') )   

// output: 
"Good morning, Mary!" 

مراقب این خریدهای ضمنی بازگشت باشید

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

const seriesList = netflixSeries.map( series => {
  const container = {}
  container.title = series.name 
  container.summary = series.summary

  // explicit return
  return container
} )

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

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

این نحو در نسخه کوتاه تر کد قبلی نشان داده شده است:

// Uncaught SyntaxError: unexpected token: ':'
const seriesList = netflixSeries.map(series => { title: series.name });

// Works fine
const seriesList = netflixSeries.map(series => ({ title: series.name }));

توابع پیکان را نمی توانید نام ببرید

توابعی که بین آنها شناسه نامی ندارند function کلمه کلیدی و لیست پارامترها فراخوانی می شوند توابع ناشناس. در اینجا شکل یک تابع ناشناس منظم به این صورت است:

const anonymous = function() {
  return 'You can't identify me!' 
}

توابع پیکان همه توابع ناشناس هستند:

const anonymousArrowFunc = () => 'You can't identify me!' 

از ES6 ، متغیرها و روش ها می توانند نام یک تابع ناشناس را از موقعیت نحوی آن ، با استفاده از آن استنتاج کنند name ویژگی. این امکان را می دهد که هنگام بازرسی مقدار یا گزارش خطا ، عملکرد را شناسایی کنید.

اینو ببین استفاده كردن anonymousArrowFunc:

console.log(anonymousArrowFunc.name)
// output: "anonymousArrowFunc"

اما توجه داشته باشید که این استنباط می شود name ویژگی فقط زمانی وجود دارد که تابع ناشناس به یک متغیر اختصاص داده شود ، مانند مثال های بالا. به عنوان مثال اگر از یک عملکرد ناشناس به عنوان پاسخ استفاده می کنید ، این ویژگی مفید را از دست می دهید. این مثال در نسخه ی نمایشی زیر که در آن تابع ناشناس در داخل است .setInterval() روش نمی تواند از آن سود ببرد name ویژگی:

let counter = 5
let countDown = setInterval(() => {
  console.log(counter)
  counter--
  if (counter === 0) {
    console.log("I have no name!!")
    clearInterval(countDown)
  }
}, 1000)

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

ناشناس بودن ذاتی توابع پیکان باعث شده است كه كایل سیمپسون نظر خود را درباره توابع پیكان به شرح زیر بیان كند:

از آنجا که فکر نمی کنم توابع ناشناس برای استفاده مکرر در برنامه های شما ایده خوبی باشد ، من طرفدار استفاده از آن نیستم => فرم عملکرد پیکان. – شما JS را نمی دانید

ادامه کارکردهای پیکان ES6: نحو چربی و مختصر در JavaScript در SitePoint را ادامه دهید.