Có một cú pháp rất đơn giản và ngắn gọn để tạo các chức năng, mà thường tốt hơn các biểu thức chức năng. Nó có tên là các chức năng của Mũi tên, vì nó trông như thế này:let func = [arg1, arg2, ..., argN] => expression;
Điều này tạo ra một hàm
let func = function[arg1, arg2, ..., argN] {
return expression;
};
3 chấp nhận các đối số let func = function[arg1, arg2, ..., argN] {
return expression;
};
4, sau đó đánh giá let func = function[arg1, arg2, ..., argN] {
return expression;
};
5 ở phía bên phải với việc sử dụng của chúng và trả về kết quả của nó.
Nói cách khác, nó là phiên bản ngắn hơn của:
let func = function[arg1, arg2, ..., argN] {
return expression;
};
Hãy cùng xem một ví dụ cụ thể:
let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
Như bạn có thể thấy,
let func = function[arg1, arg2, ..., argN] {
return expression;
};
6 có nghĩa là một hàm chấp nhận hai đối số có tên let func = function[arg1, arg2, ..., argN] {
return expression;
};
7 và let func = function[arg1, arg2, ..., argN] {
return expression;
};
8. Sau khi thực hiện, nó đánh giá biểu thức let func = function[arg1, arg2, ..., argN] {
return expression;
};
9 và trả về kết quả.Nếu chúng ta chỉ có một đối số, thì dấu ngoặc đơn xung quanh các tham số có thể được bỏ qua, làm cho điều đó thậm chí còn ngắn hơn.
Ví dụ:
let double = n => n * 2; // roughly the same as: let double = function[n] { return n * 2 } alert[ double[3] ]; // 6
Nếu không có đối số, dấu ngoặc đơn trống, nhưng chúng phải có mặt:
let sayHi = [] => alert["Hello!"]; sayHi[];
Các hàm mũi tên có thể được sử dụng theo cách tương tự như các biểu thức chức năng.
Chẳng hạn, để tự động tạo một hàm:
let age = prompt["What is your age?", 18];
let welcome = [age < 18] ?
[] => alert['Hello!'] :
[] => alert["Greetings!"];
welcome[];
Các chức năng mũi tên có thể xuất hiện không quen thuộc và lúc đầu không thể đọc được lắm, nhưng điều đó nhanh chóng thay đổi khi mắt quen với cấu trúc.
Chúng rất thuận tiện cho các hành động một dòng đơn giản, khi chúng tôi quá lười biếng để viết nhiều từ.
Chức năng mũi tên đa dòng
Các chức năng mũi tên mà chúng tôi đã thấy cho đến nay rất đơn giản. Họ đã lấy các đối số từ bên trái của
let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
0, được đánh giá và trả lại biểu thức bên phải với họ.Đôi khi chúng ta cần một chức năng phức tạp hơn, với nhiều biểu thức và câu lệnh. Trong trường hợp đó, chúng ta có thể gửi chúng trong niềng răng xoăn. Sự khác biệt chính là niềng răng xoăn yêu cầu
let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
1 trong chúng để trả về một giá trị [giống như một hàm thông thường].Như thế này:
let sum = [a, b] => { // the curly brace opens a multiline function
let result = a + b;
return result; // if we use curly braces, then we need an explicit "return"
};
alert[ sum[1, 2] ]; // 3
Nhiều hơn nữa sẽ đến
Ở đây chúng tôi ca ngợi các chức năng mũi tên cho sự ngắn gọn. Nhưng đó không phải là tất cả!
Các chức năng mũi tên có các tính năng thú vị khác.
Để nghiên cứu chúng chuyên sâu, trước tiên chúng ta cần tìm hiểu một số khía cạnh khác của JavaScript, vì vậy chúng tôi sẽ quay lại các chức năng mũi tên sau này trong các chức năng mũi tên được xem xét lại.
Hiện tại, chúng tôi đã có thể sử dụng các chức năng mũi tên cho các hành động và gọi lại một dòng.
Bản tóm tắt
Các chức năng mũi tên rất tiện cho các hành động đơn giản, đặc biệt là đối với một lớp lót. Họ có hai hương vị:
- Không có niềng răng xoăn:
2 - Phía bên phải là một biểu thức: Hàm đánh giá nó và trả về kết quả. Dấu ngoặc đơn có thể được bỏ qua, nếu chỉ có một đối số duy nhất, ví dụ:let sum = [a, b] => a + b; /* This arrow function is a shorter form of: let sum = function[a, b] { return a + b; }; */ alert[ sum[1, 2] ]; // 3
3.let sum = [a, b] => a + b; /* This arrow function is a shorter form of: let sum = function[a, b] { return a + b; }; */ alert[ sum[1, 2] ]; // 3
- Với niềng răng xoăn:
4 - Cấu trúc cho phép chúng tôi viết nhiều câu lệnh bên trong hàm, nhưng chúng tôi cần mộtlet sum = [a, b] => a + b; /* This arrow function is a shorter form of: let sum = function[a, b] { return a + b; }; */ alert[ sum[1, 2] ]; // 3
1 rõ ràng để trả về một cái gì đó.let sum = [a, b] => a + b; /* This arrow function is a shorter form of: let sum = function[a, b] { return a + b; }; */ alert[ sum[1, 2] ]; // 3
Nhiệm vụ
Thay thế các biểu thức chức năng bằng các hàm mũi tên trong mã bên dưới:
function ask[question, yes, no] {
if [confirm[question]] yes[];
else no[];
}
ask[
"Do you agree?",
function[] { alert["You agreed."]; },
function[] { alert["You canceled the execution."]; }
];
function ask[question, yes, no] {
if [confirm[question]] yes[];
else no[];
}
ask[
"Do you agree?",
[] => alert["You agreed."],
[] => alert["You canceled the execution."]
];
Nhìn ngắn và sạch sẽ, phải không?
Hãy để lại các chức năng mũi tên. Các chức năng mũi tên không chỉ là một tốc ký của người Viking để viết những thứ nhỏ. Họ có một số tính năng rất cụ thể và hữu ích. JavaScript có đầy đủ các tình huống mà chúng ta cần viết một chức năng nhỏ mà LỚN thực hiện ở một nơi khác. Ví dụ: Nó trong chính tinh thần của JavaScript để tạo ra một chức năng và vượt qua nó ở đâu đó. Và trong các chức năng như vậy, chúng tôi thường không muốn rời khỏi bối cảnh hiện tại. Đó là nơi mà các chức năng mũi tên có ích. Như chúng ta nhớ từ các phương thức đối tượng chương, "Điều này", các hàm mũi tên không có
6 - let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
3 được thực hiện bởi let func = function[arg1, arg2, ..., argN] {
return expression;
};
8 cho mỗi mục mảng.let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
9-let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
3 được thực hiện bởi bộ lập lịch tích hợp.let func = function[arg1, arg2, ..., argN] {
return expression;
};
Các chức năng mũi tên không có "điều này"
1. Nếu let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
1 được truy cập, nó được lấy từ bên ngoài.let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
Chẳng hạn, chúng ta có thể sử dụng nó để lặp lại bên trong một phương thức đối tượng:
let group = {
title: "Our Group",
students: ["John", "Pete", "Alice"],
showList[] {
this.students.forEach[
student => alert[this.title + ': ' + student]
];
}
};
group.showList[];
Ở đây trong
let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
8, hàm mũi tên được sử dụng, do đó let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
4 trong đó hoàn toàn giống như trong phương pháp bên ngoài let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
5. Đó là: let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
6.Nếu chúng ta sử dụng chức năng thường xuyên của người Viking, sẽ có một lỗi:
let func = function[arg1, arg2, ..., argN] {
return expression;
};
0Lỗi xảy ra do
let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
8 chạy các chức năng với let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
8 theo mặc định, do đó, nỗ lực truy cập let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
9 được thực hiện.Điều đó không ảnh hưởng đến các chức năng mũi tên, bởi vì họ chỉ không có
let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
1.Các chức năng mũi tên có thể chạy với
1
let sayHi = [] => alert["Hello!"];
sayHi[];
Không có
let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
1 một cách tự nhiên có nghĩa là một giới hạn khác: các chức năng mũi tên có thể được sử dụng làm hàm tạo. Họ có thể được gọi với let sayHi = [] => alert["Hello!"];
sayHi[];
1.Hàm mũi tên vs liên kết
Có một sự khác biệt tinh tế giữa hàm mũi tên
let sum = [a, b] => a + b;
/* This arrow function is a shorter form of:
let sum = function[a, b] {
return a + b;
};
*/
alert[ sum[1, 2] ]; // 3
0 và chức năng thông thường được gọi với let sayHi = [] => alert["Hello!"];
sayHi[];
5:
5 tạo ra một phiên bản ràng buộc trên mạng của chức năng.let sayHi = [] => alert["Hello!"]; sayHi[];
- Mũi tên
0 không tạo ra bất kỳ ràng buộc nào. Hàm đơn giản là không cólet sum = [a, b] => a + b; /* This arrow function is a shorter form of: let sum = function[a, b] { return a + b; }; */ alert[ sum[1, 2] ]; // 3
1. Việc tra cứulet double = n => n * 2; // roughly the same as: let double = function[n] { return n * 2 } alert[ double[3] ]; // 6
1 được thực hiện chính xác giống như một tìm kiếm biến thường xuyên: trong môi trường từ vựng bên ngoài.let double = n => n * 2; // roughly the same as: let double = function[n] { return n * 2 } alert[ double[3] ]; // 6
Mũi tên không có đối số ”
Các hàm mũi tên cũng không có biến
let age = prompt["What is your age?", 18];
let welcome = [age < 18] ?
[] => alert['Hello!'] :
[] => alert["Greetings!"];
welcome[];
0.Điều đó tuyệt vời cho các nhà trang trí, khi chúng ta cần chuyển tiếp một cuộc gọi với
let double = n => n * 2;
// roughly the same as: let double = function[n] { return n * 2 }
alert[ double[3] ]; // 6
1 và let age = prompt["What is your age?", 18];
let welcome = [age < 18] ?
[] => alert['Hello!'] :
[] => alert["Greetings!"];
welcome[];
0 hiện tại.Chẳng hạn,
let age = prompt["What is your age?", 18];
let welcome = [age < 18] ?
[] => alert['Hello!'] :
[] => alert["Greetings!"];
welcome[];
3 nhận được một chức năng và trả về một trình bao bọc xung quanh nó làm trì hoãn cuộc gọi bằng let age = prompt["What is your age?", 18];
let welcome = [age < 18] ?
[] => alert['Hello!'] :
[] => alert["Greetings!"];
welcome[];
4 mili giây:let func = function[arg1, arg2, ..., argN] {
return expression;
};
1Điều tương tự mà không có chức năng mũi tên sẽ giống như:
let func = function[arg1, arg2, ..., argN] {
return expression;
};
2Ở đây chúng tôi phải tạo các biến bổ sung
let age = prompt["What is your age?", 18];
let welcome = [age < 18] ?
[] => alert['Hello!'] :
[] => alert["Greetings!"];
welcome[];
5 và let age = prompt["What is your age?", 18];
let welcome = [age < 18] ?
[] => alert['Hello!'] :
[] => alert["Greetings!"];
welcome[];
6 để hàm bên trong let age = prompt["What is your age?", 18];
let welcome = [age < 18] ?
[] => alert['Hello!'] :
[] => alert["Greetings!"];
welcome[];
7 có thể lấy chúng.Bản tóm tắt
Hàm mũi tên:
- Không có
1let double = n => n * 2; // roughly the same as: let double = function[n] { return n * 2 } alert[ double[3] ]; // 6
- Không có
0let age = prompt["What is your age?", 18]; let welcome = [age < 18] ? [] => alert['Hello!'] : [] => alert["Greetings!"]; welcome[];
- Có thể được gọi với
1let sayHi = [] => alert["Hello!"]; sayHi[];
- Họ cũng không có
1, nhưng chúng tôi đã nghiên cứu nó. Chúng tôi sẽ trong chương trình thừa kế của lớp chươnglet sum = [a, b] => { // the curly brace opens a multiline function let result = a + b; return result; // if we use curly braces, then we need an explicit "return" }; alert[ sum[1, 2] ]; // 3
Điều đó bởi vì chúng có nghĩa là cho các đoạn mã ngắn không có bối cảnh riêng của họ, mà là hoạt động trong bản hiện tại. Và họ thực sự tỏa sáng trong trường hợp sử dụng đó.