home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

ฟังก์ชันการสั่งซื้อที่สูงขึ้นใน JavaScript:A Guide

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

function hello(name) {
   return "Hello," + " " +  name
}
 
console.log(hello("Career Karma")); // Hello, Career Karma

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

ตัวอย่างฟังก์ชันการสั่งซื้อขั้นสูงขั้นพื้นฐาน

มีหลายวิธีในการใช้ฟังก์ชัน Higher Order Functions ใน JavaScript

เครื่องคิดเลข

เริ่มต้นด้วย HOF พื้นฐานที่ใช้ฟังก์ชันเรียกกลับเป็นอาร์กิวเมนต์และส่งคืนการโทรกลับด้วยอาร์กิวเมนต์บางตัว:

//higher order function
function higherOrderFunction(num1, num2, cb) {
   return cb(num1, num2); //this invokes our cb function and passes in our arguments to the callback. 
}
 
//callbacks
function add(num1, num2) {
   return num1 + num2;
}
function multiply(num1, num2) {
   return num1 * num2;
}
function divide(num1, num2) {
   return num1/num2;
}
function subtract(num1, num2) {
   return num1 - num2;
}
function modulo(num1, num2) {
   return num1 % num2;
}
 
console.log(higherOrderFunction(43, 13, add));

เรามีฟังก์ชันสองประเภท:ฟังก์ชันลำดับที่สูงกว่าที่ส่งคืนการเรียกกลับ และฟังก์ชันชุดคำสั่งแรกที่ดำเนินการกับตัวเลขสองตัว ที่ส่วนท้ายของข้อมูลโค้ด เราทำการเรียกใช้ฟังก์ชันไปที่ higherOrderFunction() . ฟังก์ชันนี้ส่งคืนผลลัพธ์ของการเรียกใช้ cb ที่ส่งผ่านด้วยพารามิเตอร์ที่กำหนด หากคุณได้เขียนฟังก์ชันเรียกกลับสำหรับตัวดำเนินการเลขคณิตที่เป็นไปได้ทั้งหมด คุณสามารถใช้higherOrderFunctionเพื่อเรียกการดำเนินการใดๆ ที่คุณต้องการได้

ตัวฟังเหตุการณ์

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title></title>
       <meta name="description" content="">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="">
   </head>
   <body>
       <!--[if lt IE 7]>
           <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
       <![endif]-->
       <button>Click Me!</button>
       <script async defer>
           const button = document.querySelector("button");
           button.addEventListener("click", (e) => {
               alert("The button has been clicked!");
           })
 
       </script>
   </body>
</html>

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

ฟังก์ชันการสั่งซื้อที่สูงขึ้นใน JavaScript:A Guide

ส่วนที่ไฮไลต์คือฟังก์ชันคำสั่งซื้อที่สูงขึ้นของคุณ

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

วิธีการอาร์เรย์ขั้นสูง

JavaScript Built-In Array Methods เป็นฟังก์ชันพิเศษระดับสูงที่มาใหม่ใน ES6 ที่เราสามารถใช้เพื่อวนซ้ำบนอาร์เรย์และจัดการหรือคืนค่าอาร์เรย์ใหม่ทั้งหมดที่มีการจัดการค่าแล้ว

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

สมมติว่าเรามีอาจารย์หลายท่าน:

ฟังก์ชันการสั่งซื้อที่สูงขึ้นใน JavaScript:A Guide

สำหรับแต่ละคน

หากเราต้องการวนซ้ำในอาร์เรย์และจัดการแต่ละรายการก่อนที่จะใช้ ES6 นี่คือสิ่งที่เราต้องทำ:

function forEachES5(arr){
   for(let i = 0; i < arr.length; i++) {
       arr[i] = "Professor " + arr[i];
   }
   return arr;
}
 
console.log(forEachES5(professors));

ไวยากรณ์ ES6 ช่วยให้เราย่อโค้ดโดยใช้เมธอด forEach:

function forEachES6(arr) {
   arr.forEach((professor, index, origArr) => {
       origArr[index] = "Professor " + professor;
   });
   return arr;
 
}

เมธอด forEach นี้ใช้ฟังก์ชันเรียกกลับเป็นพารามิเตอร์แรกเพื่อทำให้เป็นฟังก์ชันลำดับที่สูงขึ้น ฟังก์ชันเรียกกลับนี้โดยพื้นฐานแล้วคือ "การกระทำ" ที่ทำกับแต่ละรายการที่อยู่ในอาร์เรย์ นอกจากนี้ เมธอด forEach ยังรับดัชนีและอาร์เรย์เป็นพารามิเตอร์ทางเลือกที่สองและสามด้วย

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

วิธี forEach เป็นอีกวิธีหนึ่งในการนำเสนอ for loop ใน JavaScript มันไม่คืนอะไรเลย วิธีการนี้จะจัดการกับสิ่งที่มีอยู่แล้วและบันทึกลงในอาร์เรย์ที่คุณกำลังใช้งานอยู่ หากคุณระบุสิ่งที่คุณต้องการจะทำ

แผนที่

วิธีที่ใกล้เคียงที่สุดกับวิธี forEach คือวิธีแผนที่ มันทำงานในลักษณะเดียวกันมาก ยกเว้นวิธีนี้จะคืนค่าอาร์เรย์ใหม่ สิ่งที่คุณจัดการในฟังก์ชันเรียกกลับจะไม่ส่งผลต่ออาร์เรย์เดิม

มาดูกันว่าแผนที่ที่เคยมีลักษณะเหมือนก่อน ES6:

function mapES5(arr){
   let newArr = [];
   for(let i = 0; i < arr.length; i++) {
       newArr.push("Professor " + arr[i]);
   }
   return newArr;
}

อย่างที่คุณเห็น สิ่งที่เราต้องทำคือสร้างอาร์เรย์ใหม่นอก for loop ของเรา เพื่อให้เราสามารถส่งค่าใหม่เข้าไปได้ แล้วเราต้องคืนอาร์เรย์ใหม่ของเราให้สามารถใช้งานได้จริงที่อื่น!

ด้วย ES6 และวิธีการแผนที่ เราสามารถสรุปตรรกะบางอย่างออกไปเพื่อให้อ่านได้ง่ายขึ้น:

function mapWithES6(arr) {
   const mapped = arr.map(professor => {
       return "Professor " + professor;
   })
   return mapped;
}

คุณลักษณะพิเศษเกี่ยวกับวิธีการใช้แผนที่รวมถึงวิธีการอาร์เรย์อื่นๆ เช่น ลดและกรองฟังก์ชันโดยเฉพาะ คือ คุณสามารถกำหนดให้กับตัวแปรและคืนค่าหรือคืนค่าฟังก์ชันทั้งหมดได้เลย! ไม่จำเป็นต้องมีการผลักไปยังอาร์เรย์ใหม่ - ทำเพื่อคุณด้วยวิธีแผนที่นี้ อย่าลืมมีค่าส่งคืนในตรรกะภายในฟังก์ชันการเรียกกลับของเมธอดแผนที่ของคุณ!

บทสรุป:

Higher Order Functions เป็นแนวคิดที่สำคัญอย่างยิ่งใน JavaScript เพื่อช่วยให้คุณเป็นนักพัฒนาที่ดีขึ้น จะช่วยสรุปตรรกะบางอย่างเพื่อทำให้โค้ดของคุณอ่านง่ายขึ้น และมีประสิทธิภาพมากขึ้นในบางกรณี

ในบทช่วยสอนนี้ เราได้สำรวจวิธีการต่างๆ ที่เราสามารถเขียน Higher Order Functions ตั้งแต่วิธีการคำนวณพื้นฐานไปจนถึงตัวฟังเหตุการณ์และฟังก์ชันอาร์เรย์ขั้นสูง เมื่อคุณเข้าใจสิ่งนี้แล้ว คุณก็พร้อมที่จะแก้ไขปัญหาที่ซับซ้อนมากขึ้นแล้ว!