JavaScript xử lý các hàm như các đối tượng và cho phép chúng ta truyền các hàm dưới dạng tham số cho một hàm khác và thậm chí trả về các hàm từ các hàm khác. Trong JavaScript, các hàm là các hàm lớp đầu tiên có nghĩa là chúng ta có thể lưu trữ chúng trong biến, đối tượng và mảng. Các hàm bậc cao hơn có thể hoạt động, trả về hoặc làm cả hai.
Sau đây là mã cho các hàm bậc cao trên JavaScript.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>Higher order functions in JavaScript</h1>
<div class="sample">[22,33,44,55]</div>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to double each element of the above array</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function doubleNum(ele) {
return ele * 2;
}
let arr = [22, 33, 44, 55];
function doubleArray(arr, fn) {
let doubleArr = [];
arr.forEach((element) => {
doubleArr.push(doubleNum(element));
});
return doubleArr;
}
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "New array = " + doubleArray(arr, doubleNum);
});
</script>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Khi nhấp vào nút 'BẤM VÀO ĐÂY' -
