Hiểu các hàm bậc cao hơn trong JavaScript
JavaScript là một ngôn ngữ mạnh mẽ được hỗ trợ bởi hầu hết các trình duyệt hiện đại và đó là một lựa chọn tuyệt vời cho người mới bắt đầu.
Cũng giống như nhiều ngôn ngữ lập trình hiện đại khác, JavaScript hỗ trợ các chức năng cho phép bạn tách một khối mã và sử dụng lại nó ở một nơi khác. Bạn cũng có thể sử dụng hàm gán cho biến và chuyển chúng dưới dạng tham số, giống như các giá trị khác.
Mục Lục
Hàm bậc cao hơn là gì?
Định nghĩa đơn giản nhất cho hàm bậc cao là hàm thực hiện các thao tác trên các hàm khác bằng cách chấp nhận chúng dưới dạng tham số hoặc trả về chúng. Các hàm bậc cao hơn được sử dụng nhiều trong mô hình lập trình hàm. Nếu bạn mới bắt đầu với JavaScript, các hàm bậc cao hơn có thể hơi khó nắm bắt.
Hãy xem xét ví dụ sau:
function transform(fn) {
let resultArray = []; return function (array) {
for (let i = 0; i < array.length; i++) {
resultArray.push(fn(array[i]))
}
return resultArray
}
}
Trong khối mã ở trên, biến đổi chức năng là một chức năng bậc cao hơn có trong fn làm tham số và trả về một hàm ẩn danh nhận mảng như một tham số.
Mục đích của biến đổi chức năng là sửa đổi các phần tử trong mảng. Đầu tiên, mã định nghĩa một biến kết quảArray và liên kết nó với một mảng trống.
Các biến đổi hàm trả về một hàm ẩn danh lặp qua từng phần tử trong mảngsau đó chuyển phần tử tới fn chức năng để tính toán, và đẩy kết quả vào kết quảArray. Sau khi hoàn thành vòng lặp, hàm ẩn danh trả về kết quảArray.
const function1 = transform((x) => x * 2)
console.log(function1([ 2, 3, 4, 5, 6 ]))
Khối mã ở trên gán chức năng ẩn danh được trả về bởi biến đổi hàm cho biến hằng chức năng1. fn trả lại sản phẩm của x đó là một sự thay thế cho mảng[i].
Mã này cũng chuyển một mảng, làm tham số cho chức năng1 và sau đó ghi kết quả vào bàn điều khiển. Một cách ngắn hơn để viết điều này sẽ là:
console.log(transform((x) => x * 2)([ 2, 3, 4, 5, 6 ]))
JavaScript có chức năng bậc cao tích hợp sẵn, về cơ bản hoạt động giống như biến đổimà chúng tôi sẽ đề cập sau.
Hy vọng rằng bạn đang bắt đầu hiểu cách hoạt động của hàm bậc cao trong JavaScript. Hãy xem chức năng sau và xem liệu bạn có đoán được chức năng của nó không.
function filterAndTransform(fn, arrayToBeFiltered, condition) {
let filteredArray = []; for (let i = 0; i < arrayToBeFiltered.length; i++) {
if (condition(arrayToBeFiltered[i])) {
let y = transform(fn)([ arrayToBeFiltered[i] ])[0]
filteredArray.push(y)
} else {
filteredArray.push(arrayToBeFiltered[i])
}
}
return filteredArray
}
Khối mã này xác định một hàm thực hiện điều mà bạn có thể nghi ngờ—nó kiểm tra các phần tử trong mảng đáp ứng một điều kiện nhất định và biến đổi chúng bằng lệnh biến đổi() chức năng. Để sử dụng chức năng này, bạn làm như sau:
filterAndTransform((x) => x * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 2 === 0)
không giống như biến đổi chức năng, các bộ lọcAndTransform hàm nhận hai hàm làm tham số: fn Và tình trạng. Các tình trạng hàm kiểm tra xem tham số được truyền có phải là số chẵn không và trả về giá trị true. Nếu không, nó trả về false.
Nếu như tình trạng phân giải thành true (điều kiện được đáp ứng), chỉ khi đó là biến đổi chức năng được gọi. Logic này có thể hữu ích nếu bạn đang làm việc với một mảng và muốn biến đổi các phần tử nhất định. Nếu bạn chạy mã này trong bảng điều khiển của trình duyệt, bạn sẽ nhận được phản hồi sau:
[ 1, 4, 3, 8, 5 ]
Bạn có thể thấy rằng hàm chỉ biến đổi các phần tử thỏa mãn một điều kiện nào đó, để nguyên các phần tử không thỏa mãn điều kiện.
Hàm bậc cao Array.map() trong JavaScript
Các phương thức mảng như map() là các hàm bậc cao giúp thao tác với mảng dễ dàng hơn. Đây là cách nó hoạt động.
let array = [ 1, 2, 3, 4, 5 ];
let transformedArray = array.map((x) => x * 2);
Khi bạn đăng nhập chuyển đổiArray trong bảng điều khiển của trình duyệt, bạn sẽ nhận được kết quả tương tự như bạn đã nhận được với biến đổi chức năng đã đề cập trước đó:
[ 2, 4, 6, 8, 10 ]
mảng.map() nhận hai tham số, tham số đầu tiên đề cập đến chính phần tử đó, trong khi tham số thứ hai đề cập đến chỉ mục của phần tử (vị trí trong mảng). Chỉ với mảng.map() bạn có thể đạt được kết quả tương tự như bộ lọcAndTransform chức năng. Đây là cách bạn làm điều đó:
let array = [ 1, 2, 3, 4, 5 ];
let transformedArray = array.map((x) => x % 2 === 0 ? x * 2 : x);
Trong đoạn mã trên, hàm trả về tích của phần tử hiện tại và 2, nếu phần tử đó là số chẵn. Mặt khác, nó trả về phần tử không bị ảnh hưởng.
Với tích hợp sẵn bản đồ chức năng, bạn đã quản lý để loại bỏ sự cần thiết của một số dòng mã, do đó dẫn đến mã sạch hơn nhiều và ít cơ hội xảy ra lỗi hơn.
Hàm Array.filter() trong JavaScript
Khi bạn gọi lọc trên một mảng, hãy đảm bảo rằng giá trị trả về của hàm bạn truyền vào phương thức là đúng hoặc sai. Các lọc phương thức trả về một mảng chứa các phần tử đáp ứng điều kiện được thông qua. Đây là cách bạn sử dụng nó.
function checkFirstLetter(word) {
let vowels = "aeiou" if (vowels.includes(word[0].toLowerCase())) {
return word;
} else {
return;
}
}
let words = [ "Hello", "from", "the", "children", "of", "planet", "Earth" ];
let result = words.filter((x) => checkFirstLetter(x))
Khối mã ở trên đi qua từ mảng và lọc bất kỳ từ nào có chữ cái đầu tiên là một nguyên âm. Khi bạn chạy mã và đăng nhập kết quả biến, bạn sẽ nhận được các kết quả sau:
[ 'of', 'Earth' ];
Hàm Array.reduce() trong JavaScript
Các giảm bớt() hàm bậc cao nhận hai tham số. Tham số đầu tiên là hàm giảm. Hàm rút gọn này chịu trách nhiệm kết hợp hai giá trị và trả về giá trị đó. Tham số thứ hai là tùy chọn.
Nó định nghĩa giá trị ban đầu để truyền vào hàm. Nếu bạn muốn trả về tổng của tất cả các phần tử trong một mảng, bạn có thể làm như sau:
let a = [ 1, 2, 3, 4, 5];
let sum = 0;for (let i = 0; i < a.length; i++) {
sum = sum + a[i];
}
console.log(sum);
Nếu bạn chạy mã, Tổng nên là 15. Bạn cũng có thể thực hiện một cách tiếp cận khác với giảm bớt chức năng.
let a = [ 1, 2, 3, 4, 5 ];
sum = a.reduce((c, n) => c + n);
console.log(sum);
Khối mã ở trên sạch hơn nhiều so với ví dụ trước đó. Trong ví dụ này, hàm rút gọn nhận hai tham số: c Và N. c đề cập đến phần tử hiện tại trong khi N đề cập đến phần tử tiếp theo trong mảng.
Khi mã chạy, hàm rút gọn sẽ đi qua mảng, đảm bảo thêm giá trị hiện tại vào kết quả từ bước trước.
Sức mạnh của các chức năng bậc cao hơn
Các hàm trong JavaScript rất mạnh, nhưng các hàm bậc cao hơn sẽ đưa mọi thứ lên một tầm cao mới. Chúng được sử dụng rộng rãi trong lập trình chức năng, cho phép bạn lọc, thu nhỏ và ánh xạ các mảng một cách dễ dàng.
Các hàm bậc cao hơn có thể giúp bạn viết nhiều mã mô-đun hơn và có thể tái sử dụng khi xây dựng ứng dụng.