Là một nhà phát triển, bạn có thể đã sử dụng các hàm JavaScript thông thường. Được gọi là các hàm bậc nhất, chúng không nhận một hàm làm tham số hoặc trả về một hàm.
function hello(name) {
return "Hello," + " " + name
}
console.log(hello("Career Karma")); // Hello, Career Karma Bài viết này nói về các hàm bậc cao hơn (HOF). Đây là những hàm giúp các nhà phát triển cắt bớt mã để làm cho nó dễ đọc hơn bằng cách chuyển vào một hàm dưới dạng đối số hoặc bằng cách trả về một hàm. Chúng tôi sẽ xem qua một số ví dụ cơ bản để giới thiệu cho bạn về HOF và lập trình hàm, đồng thời nói về hai phương pháp mảng nâng cao phổ biến sử dụng cấu trúc hàm bậc cao hơn để hoạt động.
Ví dụ về hàm thứ tự cao hơn cơ bản
Có một số cách khác nhau để sử dụng Hàm thứ tự cao hơn trong JavaScript.
Máy tính
Hãy bắt đầu với một HOF cơ bản nhận hàm gọi lại làm đối số và trả về lệnh gọi lại đó với một số đối số:
//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));
Ở đây chúng ta có hai loại hàm:một hàm bậc cao hơn trả về một lệnh gọi lại và một hàm đặt bậc nhất thực hiện một phép toán trên hai số. Ở cuối đoạn mã, chúng tôi thực hiện một lệnh gọi hàm tới higherOrderFunction() . Hàm này trả về kết quả của một lệnh gọi cb đã được truyền vào với các tham số đã cho. Nếu bạn đã viết một hàm gọi lại cho tất cả các toán tử số học có thể có, bạn có thể sử dụng hàm highOrderFunction để gọi bất kỳ hoạt động nào bạn cần.
Trình xử lý sự kiện
Một ví dụ khác về hàm bậc cao hơn là điều gì xảy ra khi bạn thêm trình xử lý sự kiện vào một phần tử trên DOM (mô hình đối tượng tài liệu). Lấy ví dụ sau:
<!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>
Trong ví dụ này, tôi đã tạo một nút trong HTML, chọn nó bằng JavaScript và thêm trình xử lý sự kiện vào nó. Cấu trúc của trình xử lý sự kiện là của một hàm bậc cao đơn giản - nó nhận một hàm ẩn danh làm đối số thứ hai của nó.
Phần được đánh dấu là chức năng đặt hàng cao hơn của bạn.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Phương thức mảng nâng cao
Các phương thức mảng tích hợp trong JavaScript là các hàm bậc cao đặc biệt mới cho ES6 mà chúng ta có thể sử dụng để lặp qua một mảng và thao tác với nó hoặc trả về một mảng hoàn toàn mới có các giá trị đã được thao tác.
Khi chúng ta bắt đầu đi vào giải quyết vấn đề phức tạp hơn trong JavaScript, hãy bắt đầu suy nghĩ về việc trừu tượng hóa một số logic mà chúng ta viết khi chúng ta lặp lại các mảng. Sử dụng các phương thức mảng hàm bậc cao này sẽ giúp bạn trở thành một nhà phát triển JS tốt hơn.
Ví dụ, chúng ta có một loạt các giáo sư:
forEach
Nếu chúng ta muốn lặp lại mảng và thao tác từng mục trước khi sử dụng ES6, đây là những gì chúng ta phải làm:
function forEachES5(arr){
for(let i = 0; i < arr.length; i++) {
arr[i] = "Professor " + arr[i];
}
return arr;
}
console.log(forEachES5(professors)); Cú pháp ES6 cho phép chúng tôi gỡ bỏ mã bằng cách sử dụng phương thức forEach:
function forEachES6(arr) {
arr.forEach((professor, index, origArr) => {
origArr[index] = "Professor " + professor;
});
return arr;
}
Phương thức forEach này nhận một hàm gọi lại làm tham số đầu tiên của nó để làm cho nó trở thành một hàm bậc cao hơn. Hàm gọi lại này về cơ bản là “hành động” được thực hiện trên mỗi mục trong mảng. Ngoài ra, phương thức forEach cũng nhận một chỉ mục và một mảng làm tham số thứ hai và thứ ba tùy chọn của nó.
Thứ tự quan trọng đối với các tham số này trong phương thức forEach (cũng như các phương thức mảng tích hợp sẵn khác). Đầu tiên luôn là hàm gọi lại, hàm thứ hai luôn là chỉ mục của mục trong mảng và thứ ba luôn là bản sao của chính mảng.
Phương thức forEach là một cách khác để trình bày một vòng lặp for trong JavaScript. Nó không trả lại bất cứ điều gì. Phương thức này xử lý những gì đã có ở đó và lưu nó vào mảng bạn đang làm việc nếu bạn chỉ định những gì bạn muốn làm với nó.
Bản đồ
Phương thức gần nhất với phương thức forEach là phương thức bản đồ. Nó hoạt động theo cùng một cách, ngoại trừ phương thức này trả về một mảng mới. Bất cứ điều gì bạn thao tác trong hàm gọi lại sẽ không ảnh hưởng đến mảng ban đầu.
Hãy xem bản đồ từng trông giống như trước ES6:
function mapES5(arr){
let newArr = [];
for(let i = 0; i < arr.length; i++) {
newArr.push("Professor " + arr[i]);
}
return newArr;
}
Như bạn có thể thấy, những gì chúng tôi phải làm là khởi tạo một mảng mới bên ngoài vòng lặp for của chúng tôi để chúng tôi có thể đẩy các giá trị mới vào nó. Sau đó, chúng tôi thực sự phải trả lại mảng mới của mình để thực sự có thể sử dụng nó ở nơi khác!
Với ES6 và phương thức bản đồ, chúng ta có thể loại bỏ một số logic đó để làm cho nó dễ đọc hơn:
function mapWithES6(arr) {
const mapped = arr.map(professor => {
return "Professor " + professor;
})
return mapped;
} Điểm đặc biệt về phương thức map cũng như các phương thức mảng khác như hàm, hàm giảm và bộ lọc nói riêng là bạn có thể gán nó cho một biến và trả về hoặc chỉ trả về toàn bộ hàm! Không cần đẩy sang một mảng mới - điều đó được thực hiện cho bạn với phương pháp bản đồ này. Hãy nhớ có một giá trị trả về trong logic bên trong hàm gọi lại phương thức bản đồ của bạn!
Kết luận:
Các hàm thứ tự cao hơn là một khái niệm cực kỳ quan trọng trong JavaScript để giúp bạn trở thành một nhà phát triển tốt hơn. Sẽ giúp loại bỏ một số logic để làm cho mã của bạn dễ đọc hơn và trong một số trường hợp, hiệu suất hơn.
Trong hướng dẫn này, chúng tôi đã khám phá một số cách khác nhau để có thể viết Hàm thứ tự cao hơn, từ các phương pháp máy tính cơ bản đến trình xử lý sự kiện và các hàm mảng nâng cao. Khi bạn đã thành thạo điều này, bạn đã sẵn sàng giải quyết một số giải pháp phức tạp hơn cho các vấn đề!