HomeLập trìnhJavaScriptGiới thiệu nhanh...

Giới thiệu nhanh về Hàm bậc cao trong JavaScript


Hàm bậc cao

Một hàm chấp nhận và/hoặc trả về một hàm khác được gọi là hàm bậc cao.

Của nó bậc cao hơn bởi vì thay vì chuỗi, số hoặc booleans, nó sẽ đi cao hơn để hoạt động trên các chức năng. Khá meta.

Với các chức năng trong JavaScript, bạn có thể

  • Lưu trữ chúng dưới dạng biến
  • Sử dụng chúng trong mảng
  • Gán chúng làm thuộc tính đối tượng (phương thức)
  • Truyền chúng dưới dạng đối số
  • Trả lại chúng từ các chức năng khác

Giống như bất kỳ phần dữ liệu nào khác. Đó là chìa khóa ở đây.

Chức năng hoạt động trên dữ liệu

Chuỗi là dữ liệu

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');

console.log(result); // 'Hi, User!'

Số là dữ liệu

double = (x) => x * 2;
result = double(4);

console.log(result); // 8

Booleans là dữ liệu

getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied');

result1 = getClearance(true);
result2 = getClearance(false);

console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

Đối tượng là dữ liệu

getFirstName = (obj) => obj.firstName;

result = getFirstName({
  firstName: 'Yazeed'
});

console.log(result); // 'Yazeed'

Mảng là dữ liệu

len = (array) => array.length;
result = len([1, 2, 3]);

console.log(result); // 3

5 loại này là công dân hạng nhất trong mọi ngôn ngữ chính thống.

Đọc thêm  Cách viết thường một chuỗi trong JavaScript – toLowerCase() trong JS

Điều gì làm cho họ hạng nhất? Bạn có thể chuyển chúng đi khắp nơi, lưu trữ chúng trong các biến và mảng, sử dụng chúng làm đầu vào cho các phép tính. Bạn có thể sử dụng chúng như bất kỳ phần dữ liệu nào.

Hàm cũng có thể là dữ liệu

0*wy_bAnMM-coF9cep

Chức năng như đối số

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);

console.log(result); // [2, 4]

Xem như thế nào filter sử dụng isEven để quyết định những con số để giữ? isEven, một chức nănglà một tham số sang chức năng khác.

Nó được gọi bởi filter cho mỗi số và sử dụng giá trị được trả về true hoặc false để xác định xem một số nên được giữ lại hay loại bỏ.

Chức năng trả về

add = (x) => (y) => x + y;

add yêu cầu hai tham số, nhưng không phải tất cả cùng một lúc. Đó là một chức năng chỉ yêu cầu xtrả về một hàm chỉ yêu cầu y.

Một lần nữa, điều này chỉ có thể thực hiện được vì JavaScript cho phép các hàm trở thành giá trị trả về — giống như chuỗi, số, boolean, v.v.

Bạn vẫn có thể cung cấp xy ngay lập tức, nếu bạn muốn, với một lệnh gọi kép

result = add(10)(20);
console.log(result); // 30

Hoặc x bây giờ và y sau:

add10 = add(10);
result = add10(20);

console.log(result); // 30

Hãy tua lại ví dụ cuối cùng đó. add10 là kết quả của việc gọi add với một tham số. Hãy thử đăng nhập nó trong bảng điều khiển.

Đọc thêm  Tệp JSON là gì? Ví dụ mã JavaScript

1*BaPwZXD00kXBtTy7QV_tzA

add10 là một chức năng có một y và trả về x + y. Sau khi bạn cung cấp ynó nhanh chóng tính toán và trả về kết quả cuối cùng của bạn.

1*kg9Sv6gQExV_llaE3GUI-g

Khả năng tái sử dụng cao hơn

Có lẽ lợi ích lớn nhất của HOF là khả năng sử dụng lại nhiều hơn. Không có chúng, các phương thức Mảng ra mắt của JavaScript — map, filterreduce– sẽ không tồn tại!

Đây là danh sách người dùng. Chúng tôi sẽ thực hiện một số tính toán với thông tin của họ.

users = [
  {
    name: 'Yazeed',
    age: 25
  },
  {
    name: 'Sam',
    age: 30
  },
  {
    name: 'Bill',
    age: 20
  }
];

Bản đồ

Nếu không có các hàm bậc cao hơn, chúng ta sẽ luôn cần các vòng lặp để bắt chướcmapchức năng của.

getName = (user) => user.name;
usernames = [];

for (let i = 0; i < users.length; i++) {
  const name = getName(users[i]);

  usernames.push(name);
}

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Hoặc chúng ta có thể làm điều này!

usernames = users.map(getName);

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Lọc

Trong một thế giới không có HOF, chúng ta vẫn cần các vòng lặp để tạo lại filterchức năng của quá.

startsWithB = (string) => string.toLowerCase().startsWith('b');

namesStartingWithB = [];

for (let i = 0; i < users.length; i++) {
  if (startsWithB(users[i].name)) {
    namesStartingWithB.push(users[i]);
  }
}

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Hoặc chúng ta có thể làm điều này!

namesStartingWithB = users.filter((user) => startsWithB(user.name));

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Giảm

Phải, giảm cũng vậy… Không thể làm được nhiều thứ hay ho nếu không có các hàm bậc cao!! ?

total = 0;

for (let i = 0; i < users.length; i++) {
  total += users[i].age;
}

console.log(total);
// 75

Làm sao đây?

totalAge = users.reduce((total, user) => user.age + total, 0);

console.log(totalAge);
// 75

Tóm lược

  • Chuỗi, số, bool, mảng và đối tượng có thể được lưu trữ dưới dạng biến, mảng và thuộc tính hoặc phương thức.
  • JavaScript xử lý các chức năng theo cùng một cách.
  • Điều này cho phép các chức năng hoạt động trên các chức năng khác: hàm bậc cao.
  • Ánh xạ, bộ lọc và thu nhỏ là những ví dụ điển hình — và tạo các mẫu phổ biến như chuyển đổi, tìm kiếm và tổng hợp danh sách dễ dàng hơn nhiều!
Đọc thêm  Ép buộc và chuyển đổi loại trong JavaScript – Giải thích bằng các ví dụ về mã

tôi đang ở trên Twitter nếu bạn muốn nói chuyện. Cho đến lần sau!

Bảo trọng,

Yazeed Bzadough

yazeedb.com





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status