ฟังก์ชั่นลูกศรพื้นฐาน

มีไวยากรณ์ที่เรียบง่ายและกระชับอีกประการหนึ่งสำหรับการสร้างฟังก์ชัน ซึ่งมักจะดีกว่า Function Expressions

เรียกว่า "ฟังก์ชันลูกศร" เพราะมีลักษณะดังนี้:

 ให้ func = (arg1, arg2, ..., argN) => นิพจน์;

สิ่งนี้จะสร้างฟังก์ชั่น func ที่ยอมรับอาร์กิวเมนต์ arg1..argN จากนั้นประเมิน expression ทางด้านขวาตามการใช้งานและส่งกลับผลลัพธ์

กล่าวอีกนัยหนึ่ง มันเป็นเวอร์ชันที่สั้นกว่าของ:

 ให้ func = ฟังก์ชั่น (arg1, arg2, ..., argN) {
  ส่งคืนนิพจน์;
-

ลองดูตัวอย่างที่เป็นรูปธรรม:

 ให้ผลรวม = (a, b) => a + b;

/* ฟังก์ชันลูกศรนี้มีรูปแบบสั้นกว่าของ:

ให้ผลรวม = ฟังก์ชั่น (a, b) {
  กลับ + b;
-
-

การแจ้งเตือน( ผลรวม(1, 2) ); // 3

อย่างที่คุณเห็น (a, b) => a + b หมายถึงฟังก์ชันที่ยอมรับสองอาร์กิวเมนต์ชื่อ a และ b เมื่อดำเนินการ จะประเมินนิพจน์ a + b และส่งคืนผลลัพธ์

• หากเรามีอาร์กิวเมนต์เดียว ก็สามารถละเว้นวงเล็บรอบพารามิเตอร์ได้ ซึ่งจะทำให้สั้นลงอีก

  ตัวอย่างเช่น:

   ให้ double = n => n * 2;
  // ประมาณเหมือนกับ: ให้ double = function(n) { return n * 2 }
  
  การแจ้งเตือน( สองเท่า(3) ); // 6

• หากไม่มีข้อโต้แย้ง วงเล็บจะว่างเปล่า แต่ต้องมี:

   ให้ sayHi = () => alert("Hello!");
  
  พูดว่าสวัสดี();

ฟังก์ชันลูกศรสามารถใช้ได้ในลักษณะเดียวกับนิพจน์ฟังก์ชัน

ตัวอย่างเช่น หากต้องการสร้างฟังก์ชันแบบไดนามิก:

 ให้อายุ = prompt ("คุณอายุเท่าไร", 18);

ยินดีต้อนรับ = (อายุ < 18) ?
  () => alert('สวัสดี!') :
  () => alert("สวัสดี!");

ยินดีต้อนรับ();

ฟังก์ชั่นลูกศรอาจดูไม่คุ้นเคยและอ่านไม่ค่อยได้ในตอนแรก แต่จะเปลี่ยนไปอย่างรวดเร็วเมื่อดวงตาคุ้นเคยกับโครงสร้าง

สะดวกมากสำหรับการดำเนินการบรรทัดเดียวง่ายๆ เมื่อเราขี้เกียจเกินกว่าจะเขียนหลายคำ

ฟังก์ชั่นลูกศรหลายบรรทัด

ฟังก์ชั่นลูกศรที่เราเคยเห็นมานั้นเรียบง่ายมาก พวกเขารับข้อโต้แย้งจากด้านซ้ายของ => ประเมินและส่งคืนนิพจน์ด้านขวาด้วย

บางครั้งเราต้องการฟังก์ชันที่ซับซ้อนมากขึ้น โดยมีนิพจน์และคำสั่งหลายรายการ ในกรณีนี้ เราสามารถใส่ไว้ในวงเล็บปีกกาได้ ข้อแตกต่างที่สำคัญคือวงเล็บปีกกาต้องมี return ภายในเพื่อส่งคืนค่า (เหมือนกับที่ฟังก์ชันทั่วไปทำ)

แบบนี้:

 ให้ sum = (a, b) => { // เครื่องหมายปีกกาเปิดฟังก์ชันหลายบรรทัด
  ให้ผลลัพธ์ = a + b;
  ส่งคืนผลลัพธ์; // หากเราใช้วงเล็บปีกกา เราจำเป็นต้องมี "การส่งคืน" ที่ชัดเจน
-

การแจ้งเตือน( ผลรวม(1, 2) ); // 3

มากขึ้นที่จะมา

ที่นี่เรายกย่องฟังก์ชันลูกศรเพื่อความกระชับ แต่นั่นไม่ใช่ทั้งหมด!

ฟังก์ชั่นลูกศรมีคุณสมบัติที่น่าสนใจอื่นๆ

เพื่อศึกษาพวกมันในเชิงลึก ก่อนอื่นเราต้องทำความรู้จักกับแง่มุมอื่นๆ ของ JavaScript ก่อน ดังนั้นเราจะกลับมาที่ฟังก์ชันลูกศรในบทที่ Arrow features revisited ในภายหลัง

ในตอนนี้ เราสามารถใช้ฟังก์ชันลูกศรสำหรับการดำเนินการบรรทัดเดียวและการโทรกลับได้แล้ว

สรุป

ฟังก์ชันลูกศรมีประโยชน์สำหรับการดำเนินการง่ายๆ โดยเฉพาะสำหรับบรรทัดเดียว มี 2 ​​รสชาติ:

1. ไม่มีเครื่องหมายปีกกา: (...args) => expression – ด้านขวาคือนิพจน์: ฟังก์ชันจะประเมินและส่งกลับผลลัพธ์ วงเล็บสามารถละเว้นได้ หากมีเพียงอาร์กิวเมนต์เดียว เช่น n => n*2

2. ด้วยเครื่องหมายปีกกา: (...args) => { body } – วงเล็บปีกกาอนุญาตให้เราเขียนคำสั่งหลายคำสั่งภายในฟังก์ชันได้ แต่เราต้องการ return ที่ชัดเจนเพื่อส่งคืนบางสิ่ง

งาน

เขียนใหม่ด้วยฟังก์ชันลูกศร

แทนที่ Function Expressions ด้วยฟังก์ชันลูกศรในโค้ดด้านล่าง:

 ฟังก์ชั่นถาม (คำถาม ใช่ ไม่ใช่) {
  ถ้า (ยืนยัน (คำถาม)) ใช่ ();
  อย่างอื่นไม่มี();
-

ถาม(
  “คุณเห็นด้วยไหม”,
  function() { alert("คุณตกลง"); -
  function() { alert("คุณยกเลิกการดำเนินการ"); -
-

สารละลาย

 ฟังก์ชั่นถาม (คำถามใช่ไม่ใช่) {
  ถ้า (ยืนยัน (คำถาม)) ใช่ ();
  อย่างอื่นไม่มี();
-

ถาม(
  “คุณเห็นด้วยไหม”,
  () => alert("คุณตกลง")
  () => alert("คุณยกเลิกการดำเนินการ")
-

ดูสั้นและสะอาดใช่ไหม?