ฟังก์ชัน JavaScript Arrow สามารถทำให้คุณเป็นนักพัฒนาที่ดีขึ้นได้

JavaScript ES6 นำการเปลี่ยนแปลงที่น่าตื่นเต้นมาสู่โลกแห่งการพัฒนาเว็บ การเพิ่มภาษา JavaScript ใหม่ทำให้เกิดความเป็นไปได้ใหม่ๆ

การเปลี่ยนแปลงที่ได้รับความนิยมอย่างหนึ่งคือการเพิ่มฟังก์ชันลูกศรลงใน JavaScript ฟังก์ชัน Arrow เป็นวิธีใหม่ในการเขียนนิพจน์ฟังก์ชัน JavaScript ทำให้คุณสร้างฟังก์ชันในแอปได้ 2 วิธี

---

---

ฟังก์ชันลูกศรมีการปรับเปลี่ยนเล็กน้อยหากคุณเป็นผู้เชี่ยวชาญในฟังก์ชัน JavaScript แบบเดิม มาดูกันว่าสิ่งเหล่านี้คืออะไร ทำงานอย่างไร และมีประโยชน์ต่อคุณอย่างไร

ฟังก์ชั่นลูกศร JavaScript คืออะไร?

ฟังก์ชันลูกศรเป็นวิธีใหม่ในการเขียนนิพจน์ของฟังก์ชันที่เป็น รวมอยู่ในการเปิดตัว JavaScript ES6 . คล้ายกับนิพจน์ฟังก์ชัน JavaScript ที่คุณใช้อยู่ โดยมีกฎที่แตกต่างกันเล็กน้อย

ฟังก์ชันลูกศรเป็นฟังก์ชันที่ไม่ระบุชื่อเสมอ มีกฎเกณฑ์ที่แตกต่างกันสำหรับ

this

และมีไวยากรณ์ที่ง่ายกว่าฟังก์ชันดั้งเดิม

windows 10 จะไม่บู๊ตในเซฟโหมด

ฟังก์ชันเหล่านี้ใช้โทเค็นลูกศรใหม่:

---

---

=>

หากคุณเคยทำงานใน Python มาก่อน ฟังก์ชันเหล่านี้คล้ายกับ นิพจน์หลามแลมบ์ดา .

ไวยากรณ์สำหรับฟังก์ชันเหล่านี้ดูสะอาดกว่าฟังก์ชันปกติเล็กน้อย มีกฎใหม่สองสามข้อที่ควรคำนึงถึง:

---

---

• คีย์เวิร์ดของฟังก์ชันจะถูกลบออก
• คีย์เวิร์ดส่งคืนเป็นทางเลือก
• วงเล็บปีกกาเป็นตัวเลือก

มีการเปลี่ยนแปลงเล็กน้อยมากมาย เรามาเริ่มด้วยการเปรียบเทียบพื้นฐานของนิพจน์ฟังก์ชันกัน

วิธีใช้ฟังก์ชันลูกศร

ฟังก์ชั่นลูกศรใช้งานง่าย การทำความเข้าใจฟังก์ชันลูกศรจะง่ายกว่าเมื่อเปรียบเทียบกับนิพจน์ของฟังก์ชันแบบเดิม

นี่คือนิพจน์ฟังก์ชันที่บวกตัวเลขสองตัว ขั้นแรกโดยใช้วิธีฟังก์ชันดั้งเดิม:

let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3

เป็นฟังก์ชันที่ค่อนข้างเรียบง่ายที่รับสองอาร์กิวเมนต์และส่งกลับผลรวม

นี่คือนิพจน์ที่เปลี่ยนเป็นฟังก์ชันลูกศร:

let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3

ไวยากรณ์ของฟังก์ชันค่อนข้างแตกต่างโดยใช้ฟังก์ชันลูกศร คีย์เวิร์ดของฟังก์ชันจะถูกลบออก โทเค็นลูกศรช่วยให้ JavaScript รู้ว่าคุณกำลังเขียนฟังก์ชัน

วงเล็บปีกกาและคีย์เวิร์ด return ยังคงอยู่ ตัวเลือกเหล่านี้เป็นทางเลือกด้วยฟังก์ชันลูกศร นี่เป็นตัวอย่างที่ง่ายกว่าของฟังก์ชันเดียวกัน:

let addnum = (num1,num2) => num1 + num2;

คีย์เวิร์ด return และวงเล็บปีกกาหายไปแล้ว สิ่งที่เหลืออยู่คือฟังก์ชันบรรทัดเดียวที่สะอาดมากซึ่งเกือบครึ่งหนึ่งของโค้ดเป็นฟังก์ชันดั้งเดิม คุณจะได้ผลลัพธ์เช่นเดียวกันกับโค้ดที่เขียนน้อยกว่ามาก

มีฟังก์ชันลูกศรอีกมากมาย มาเจาะลึกกันเพื่อให้คุณรู้สึกดีขึ้นสำหรับสิ่งที่พวกเขาสามารถทำได้

คุณสมบัติฟังก์ชั่นลูกศร

ฟังก์ชันลูกศรมีการใช้งานและคุณลักษณะต่างๆ มากมายรวมอยู่ด้วย

ถ้าฉันปิดการใช้งาน facebook จะเกิดอะไรขึ้นกับ messenger

ฟังก์ชั่นปกติ

ฟังก์ชันลูกศรสามารถใช้อาร์กิวเมนต์ได้ตั้งแต่หนึ่งอาร์กิวเมนต์ หากคุณใช้อาร์กิวเมนต์ตั้งแต่ 2 รายการขึ้นไป คุณต้องใส่อาร์กิวเมนต์ไว้ในวงเล็บ หากคุณมีอาร์กิวเมนต์เพียงข้อเดียว คุณไม่จำเป็นต้องใช้วงเล็บ

let square = x => x * x
square(2);
>>4

สามารถใช้ฟังก์ชันลูกศรโดยไม่มีอาร์กิวเมนต์ได้ หากคุณไม่ได้ใช้อาร์กิวเมนต์ใดๆ ในฟังก์ชัน คุณต้องใช้วงเล็บว่าง

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

ฟังก์ชันง่ายๆ เช่นนี้ใช้โค้ดน้อยกว่ามาก ลองนึกภาพว่าซับซ้อนแค่ไหน โครงการเหมือนสไลด์โชว์ JavaScript จะกลายเป็นเมื่อคุณมีวิธีเขียนฟังก์ชันที่ง่ายกว่า

ใช้สิ่งนี้

แนวคิดของ

this

มีแนวโน้มที่จะเป็นส่วนที่ยากที่สุดของการใช้ JavaScript ฟังก์ชั่นลูกศรทำให้

this

ใช้งานง่ายขึ้น

เมื่อคุณใช้ฟังก์ชันลูกศร

this

จะถูกกำหนดโดยฟังก์ชันล้อมรอบ สิ่งนี้สามารถสร้างปัญหาที่จะเกิดขึ้นเมื่อคุณสร้างฟังก์ชั่นและความต้องการที่ซ้อนกัน

this

เพื่อนำไปใช้กับหน้าที่หลักของคุณ

ต่อไปนี้คือตัวอย่างยอดนิยมที่แสดงวิธีแก้ปัญหาที่คุณต้องใช้กับฟังก์ชันปกติ

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

การกำหนดมูลค่าของ

this

ตัวแปรทำให้อ่านได้เมื่อคุณเรียกใช้ฟังก์ชันภายในฟังก์ชันหลักของคุณ นี้ยุ่งมาก นี่เป็นวิธีที่ดีกว่าในการทำเช่นนี้โดยใช้ฟังก์ชันลูกศร

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

แม้ว่าจะใช้ได้ดีสำหรับฟังก์ชันต่างๆ แต่ก็ไม่ควรใช้เพื่อสร้างวิธีการภายในออบเจ็กต์ ฟังก์ชันลูกศรไม่ได้ใช้ขอบเขตที่เหมาะสมสำหรับ

this

.

นี่คือวัตถุง่ายๆ ที่สร้างวิธีการภายในโดยใช้ฟังก์ชันลูกศร วิธีการควรลด ท็อปปิ้ง ตัวแปรทีละตัวเมื่อถูกเรียก มันไม่ได้ผลเลย

วิธีแก้ไขแผ่นซีดีที่ข้ามไป

let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings


การทำงานกับอาร์เรย์

การใช้ฟังก์ชันลูกศรทำให้โค้ดที่ใช้ทำงานกับวิธีอาร์เรย์ง่ายขึ้นได้ อาร์เรย์และ วิธีการอาร์เรย์เป็นส่วนสำคัญของ JavaScript ดังนั้นคุณจะใช้มันมาก

มีวิธีการที่เป็นประโยชน์บางอย่างเช่น แผนที่ เมธอดที่รันฟังก์ชันบนองค์ประกอบทั้งหมดของอาร์เรย์และส่งคืนอาร์เรย์ใหม่

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

นี่เป็นฟังก์ชันที่ค่อนข้างเรียบง่ายที่จะเพิ่มค่าหนึ่งให้กับทุกค่าในอาร์เรย์ คุณสามารถเขียนฟังก์ชันเดียวกันโดยใช้โค้ดน้อยลงได้โดยใช้ฟังก์ชันลูกศร

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

ตอนนี้อ่านง่ายกว่ามาก

การสร้างตัวอักษรวัตถุ

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

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

คุณสามารถสร้างวัตถุเดียวกันด้วยฟังก์ชันลูกศรโดยใช้โค้ดน้อยลง การใช้สัญลักษณ์ลูกศร คุณจะต้องล้อมเนื้อหาของฟังก์ชันในวงเล็บ นี่คือไวยากรณ์ที่ได้รับการปรับปรุงพร้อมฟังก์ชันลูกศร

let createArrowObject = (first,last) => ({first:first, last:last});

JavaScript Arrow Functions and Beyond

ตอนนี้คุณรู้วิธีที่ฟังก์ชันลูกศร JavaScript ต่างๆ ทำให้ชีวิตของคุณง่ายขึ้นในฐานะนักพัฒนาซอฟต์แวร์ พวกเขาย่อไวยากรณ์ให้คุณควบคุมได้มากขึ้นโดยใช้

this

ทำให้สร้างวัตถุได้ง่ายขึ้นและให้วิธีใหม่ในการทำงานกับวิธีอาร์เรย์

การแนะนำฟังก์ชันลูกศรพร้อมกับคุณสมบัติอื่นๆ ใน JavaScript ES6 แสดงให้เห็นว่า JavaScript มีความสำคัญต่อการพัฒนาเว็บเพียงใด ยังมีอะไรอีกมากมายที่คุณสามารถทำได้

ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript หรือไม่ เรียนรู้กรอบงาน JavaScript เหล่านี้ นอกจากนี้ . ของเรา สูตรโกง JavaScript ให้ข้อมูลที่มีค่าและเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript ทำงานอย่างไร สามารถทำให้คุณเป็นนักพัฒนาที่ดีขึ้นได้

แบ่งปัน แบ่งปัน ทวีต อีเมล 6 ทางเลือกที่ได้ยิน: แอพหนังสือเสียงฟรีหรือราคาถูกที่ดีที่สุด

หากคุณไม่ต้องการจ่ายค่าหนังสือเสียง นี่คือแอพดีๆ ที่ให้คุณฟังได้ฟรีและถูกกฎหมาย

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• JavaScript

เกี่ยวกับผู้เขียน แอนโธนี่ แกรนท์(40 บทความที่ตีพิมพ์)

Anthony Grant เป็นนักเขียนอิสระที่ครอบคลุมการเขียนโปรแกรมและซอฟต์แวร์ เขาเป็นวิทยาการคอมพิวเตอร์ที่สำคัญในการเขียนโปรแกรม Excel ซอฟต์แวร์และเทคโนโลยี

เพิ่มเติมจาก Anthony Grant

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก