Hàm bậc cao hơn trong JavaScript – Đạt đến tầm cao mới trong mã JS của bạn

Hàm bậc cao hơn là gì?

Hãy nhìn vào cái tên và xem xét cách chúng ta nói về mọi thứ.

chúng tôi đào xuống vào các chi tiết, nhưng đôi khi chúng tôi muốn một cao mức độ nhìn của sự vật.

Chế độ xem cấp cao này biểu thị sự trừu tượng hơn. Chúng tôi đi sâu vào chi tiết, nhưng chúng tôi nâng lên thành một quan điểm trừu tượng hơn.

Các hàm bậc cao hơn chính xác là: Mức độ trừu tượng cao hơn các hàm thông thường của bạn.

Vậy làm thế nào chúng ta có thể định nghĩa Hàm bậc cao hơn?

Hàm bậc cao hơn là các hàm thực hiện các thao tác trên các hàm khác.

Trong định nghĩa này, hoạt động có thể có nghĩa là lấy một hoặc nhiều hàm làm đối số HOẶC trả về kết quả là một hàm. Nó không phải làm cả hai. Làm cái này hay cái kia đủ điều kiện cho một chức năng là một chức năng bậc cao hơn.

Hãy xem một ví dụ về hàm bậc cao hơn

Nếu không có hàm bậc cao hơn, nếu tôi muốn thêm một vào mỗi số trong một mảng và hiển thị nó trong bảng điều khiển, tôi có thể làm như sau:

const numbers = [1, 2, 3, 4, 5];

function addOne(array) {
  for (let i = 0; i < array.length; i++) {
    console.log(array[i] + 1);
  }
}

addOne(numbers);

Chức năng addOne() chấp nhận một mảng, thêm một vào mỗi số trong mảng và hiển thị nó trong bảng điều khiển. Các giá trị ban đầu không thay đổi trong mảng, nhưng hàm đang thực hiện điều gì đó cho từng giá trị.

Tuy nhiên, sử dụng những gì có thể là chức năng bậc cao phổ biến nhất, forEach()chúng ta có thể đơn giản hóa quá trình này:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => console.log(number + 1));

Ái chà.

Chúng tôi đã trừu tượng hóa định nghĩa hàm và gọi mã gốc ở trên chỉ trong một dòng!

Chúng tôi áp dụng forEach() vào mảng có tên “số”. Có một chức năng ẩn danh ở đầu forEach() chấp nhận từng phần tử của mảng – từng phần tử một.

Với mảng có tên là số, nên đặt tên cho từng phần tử của mảng là “số” mặc dù chúng ta có thể đặt tên cho nó là “phần tử” hoặc “el” hoặc thậm chí là “bất cứ thứ gì”.

Hàm mũi tên ẩn danh ghi giá trị của số + 1 vào bảng điều khiển.

Hàm bậc cao forEach() áp dụng một hàm cho từng phần tử của một mảng.

Một ví dụ hàm bậc cao khác

Nếu không có hàm bậc cao hơn, nếu tôi muốn tạo một mảng mới chỉ có các số lẻ từ mảng số, tôi có thể làm như sau:

const numbers = [1, 2, 3, 4, 5];

function isOdd(array, oddArr = []) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] % 2 !== 0) {
      oddArr.push(array[i]);
    }
  }
  return oddArr;
}

const oddArray = isOdd(numbers);
console.log(oddArray);

Chức năng isOdd() chấp nhận một mảng và có một tham số tùy chọn thứ hai cho một mảng. Nếu không được cung cấp, mảng có giá trị mặc định là mảng trống.

Hàm kiểm tra từng số trong mảng xem có phải là số lẻ hay không. Nếu số là số lẻ, nó sẽ thêm nó vào mảng từ tham số thứ hai. Sau khi tất cả các số được kiểm tra, mảng từ tham số thứ hai được trả về.

Vì vậy, vâng, đó là rất nhiều để theo dõi.

Nếu chúng ta sử dụng hàm bậc cao hơn, filter()chúng ta có thể trừu tượng hóa rất nhiều:

const numbers = [1, 2, 3, 4, 5];

const oddArray = numbers.filter((number) => number % 2 !== 0);
console.log(oddArray);

VÂNG!

Thứ lỗi cho tôi vì đã phấn khích, nhưng đó là một cải tiến lớn.

Chúng tôi bắt đầu bằng cách xác định mảng mới oddArray bởi vì áp dụng filter() sẽ tạo một mảng mới. Hàm bậc cao hơn sẽ trả về từng phần tử đáp ứng điều kiện được đặt trong hàm ẩn danh mà nó nhận được. Hàm ẩn danh một lần nữa được áp dụng cho từng phần tử trong mảng số.

Because We’re On A Roll – Một ví dụ về hàm bậc cao khác

Chúng ta đã đi xa đến mức này và tôi nghĩ bạn đang bắt đầu hiểu tại sao các hàm bậc cao lại tốt như vậy!

Hãy xem một ví dụ khác…

trở lại của chúng tôi forEach() ví dụ, chúng tôi đã thêm một vào mỗi số trong mảng và ghi từng giá trị vào bảng điều khiển. Nhưng còn việc tạo một mảng mới với những giá trị mới đó thì sao? Nếu không có chức năng bậc cao hơn, tôi có thể làm như sau:

const numbers = [1, 2, 3, 4, 5];

function addOneMore(array, newArr = []) {
  for (let i = 0; i < array.length; i++) {
    newArr.push(array[i] + 1);
  }
  return newArr;
}

const newArray = addOneMore(numbers);
console.log(newArray);

Chức năng addOneMore() một lần nữa chấp nhận một mảng và có một mảng làm tham số thứ hai có giá trị mặc định là trống. Một được thêm vào từng phần tử của mảng số hiện có và kết quả được đẩy sang mảng mới được trả về.

Chúng tôi trừu tượng hóa điều này với chức năng bậc cao hơn, map():

const numbers = [1, 2, 3, 4, 5];

const newArray = numbers.map((number) => number + 1);
console.log(numbers);

Chúng tôi bắt đầu bằng cách xác định newArray bởi vì map() tạo ra một mảng mới. Thích forEach(), map() áp dụng một hàm ẩn danh cho từng phần tử của mảng số. Tuy nhiên, map() tạo một mảng mới trong quá trình này.

Thêm một ví dụ nữa

Nếu chúng ta muốn tìm tổng tất cả các giá trị trong mảng số thì sao?

Nếu không có chức năng bậc cao hơn, tôi có thể làm điều này:

const numbers = [1, 2, 3, 4, 5];

function getTotalValue(array) {
  let total = 0;
  for (let i = 0; i < array.length; i++) {
    total += array[i];
  }
  return total;
}

const totalValue = getTotalValue(numbers);
console.log(totalValue);

Chức năng getTotalValue() chấp nhận một mảng, xác định biến tổng bằng 0 và lặp qua mảng trong khi thêm từng phần tử vào biến tổng. Cuối cùng, nó trả về tổng số.

Với hàm bậc cao reduce()quá trình này một lần nữa có thể được trừu tượng hóa:

const numbers = [1, 2, 3, 4, 5];

const totalValue = numbers.reduce((sum, number) => sum + number);
console.log(totalValue);

Hàm bậc cao reduce() mong đợi hai tham số trong hàm ẩn danh bên trong.

Tham số đầu tiên là một bộ tích lũy và tham số thứ hai là một phần tử từ mảng số.

Tham số bộ tích lũy (tổng trong ví dụ trên) theo dõi tổng dưới dạng reduce() áp dụng hàm ẩn danh cho từng phần tử của mảng.

Phần kết luận

Hàm bậc cao hơn cung cấp mức độ trừu tượng cao hơn cho các hàm.

Chúng có khả năng đưa mã JavaScript của bạn lên một tầm cao mới!

Tôi sẽ để lại cho bạn một hướng dẫn từ kênh YouTube của tôi áp dụng Hàm bậc cao hơn cho dữ liệu JSON.