Các hàm mũi tên trong JavaScript có thể giúp bạn trở thành nhà phát triển tốt hơn

JavaScript ES6 đã mang lại những thay đổi thú vị cho thế giới phát triển web. Những bổ sung mới cho ngôn ngữ JavaScript đã mang lại những khả năng mới.

Một trong những thay đổi phổ biến hơn là việc bổ sung các hàm mũi tên vào JavaScript. Hàm mũi tên là một cách mới để viết các biểu thức hàm JavaScript, cung cấp cho bạn hai cách khác nhau để tạo các hàm trong ứng dụng của mình.

---

---

Các hàm mũi tên cần một chút điều chỉnh nếu bạn là chuyên gia về các hàm JavaScript truyền thống. Hãy cùng xem đây là những gì, cách chúng hoạt động và chúng mang lại lợi ích cho bạn như thế nào.

Các hàm mũi tên trong JavaScript là gì?

Hàm mũi tên là một cách mới để viết các biểu thức hàm đã bao gồm trong bản phát hành JavaScript ES6 . Chúng tương tự như các biểu thức hàm JavaScript mà bạn đang sử dụng, với một số quy tắc hơi khác.

Hàm mũi tên luôn là hàm ẩn danh, có các quy tắc khác nhau cho

this

và có cú pháp đơn giản hơn các hàm truyền thống.

cách sắp xếp email theo người gửi trong gmail

Các hàm này sử dụng mã thông báo mũi tên mới:

---

---

=>

Nếu bạn đã từng làm việc bằng Python, các hàm này rất giống với Biểu thức Lambda trong Python .

Cú pháp cho các hàm này gọn gàng hơn một chút so với các hàm bình thường. Có một số quy tắc mới cần ghi nhớ:

---

---

• Từ khóa hàm bị xóa
• Từ khóa trả về là tùy chọn
• Niềng răng xoăn là tùy chọn

Có rất nhiều thay đổi nhỏ cần xem xét, vì vậy hãy bắt đầu với phép so sánh cơ bản của các biểu thức hàm.

Cách sử dụng các hàm mũi tên

Các chức năng mũi tên rất dễ sử dụng. Việc hiểu các hàm mũi tên sẽ dễ dàng hơn khi so sánh cạnh nhau với các biểu thức hàm truyền thống.

Đây là một biểu thức hàm cho biết thêm hai số; đầu tiên sử dụng phương pháp hàm truyền thống:

let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3

Đó là một hàm khá đơn giản, nhận hai đối số và trả về tổng.

Đây là biểu thức được thay đổi thành một hàm mũi tên:

let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3

Cú pháp hàm khá khác khi sử dụng hàm mũi tên. Từ khóa chức năng bị loại bỏ; mã thông báo mũi tên cho phép JavaScript biết bạn đang viết một hàm.

Dấu ngoặc nhọn và từ khóa return vẫn ở đó. Đây là tùy chọn với các chức năng mũi tên. Dưới đây là một ví dụ đơn giản hơn về cùng một hàm:

let addnum = (num1,num2) => num1 + num2;

Từ khóa return và dấu ngoặc nhọn giờ đã biến mất. Những gì còn lại là một hàm một dòng rất rõ ràng, gần như một nửa mã so với hàm gốc. Bạn nhận được kết quả tương tự với mã được viết ít hơn nhiều.

Có nhiều chức năng mũi tên khác. hãy tìm hiểu sâu hơn để bạn cảm nhận rõ hơn những gì họ có thể làm.

Các tính năng của hàm mũi tên

Hàm mũi tên có nhiều cách sử dụng khác nhau và bao gồm các tính năng.

cách kết nối nhịp với mac

Chức năng thông thường

Hàm mũi tên có thể sử dụng một hoặc nhiều đối số. Nếu bạn đang sử dụng hai hoặc nhiều đối số, bạn phải đặt chúng trong dấu ngoặc đơn. Nếu bạn chỉ có một đối số, bạn không cần sử dụng dấu ngoặc đơn.

let square = x => x * x
square(2);
>>4

Các hàm mũi tên có thể được sử dụng mà không có đối số. Nếu bạn không sử dụng bất kỳ đối số nào trong hàm của mình, bạn phải sử dụng dấu ngoặc đơn trống.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Các chức năng đơn giản như thế này sử dụng ít mã hơn nhiều. Hãy tưởng tượng một khu phức hợp dễ dàng hơn bao nhiêu dự án giống như một trình chiếu JavaScript trở thành khi bạn có một cách đơn giản hơn để viết các hàm.

Sử dụng cái này

Khái niệm của

this

có xu hướng là phần khó nhất của việc sử dụng JavaScript. Hàm mũi tên thực hiện

this

dễ sử dụng hơn.

Khi bạn sử dụng các hàm mũi tên

this

sẽ được xác định bởi hàm bao quanh. Điều này có thể tạo ra các vấn đề nảy sinh khi bạn tạo các hàm lồng nhau và cần

this

để áp dụng cho chức năng chính của bạn

Dưới đây là một ví dụ phổ biến cho thấy giải pháp thay thế bạn phải sử dụng với các hàm thông thường.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Gán giá trị của

this

thành một biến làm cho nó có thể đọc được khi bạn gọi một hàm bên trong hàm chính của bạn. Điều này thật lộn xộn, đây là một cách tốt hơn để thực hiện việc này bằng cách sử dụng các hàm mũi tên.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Mặc dù chúng rất tốt cho các hàm, nhưng chúng không nên được sử dụng để tạo các phương thức bên trong một đối tượng. Các hàm mũi tên không sử dụng phạm vi phù hợp cho

this

.

Đây là một đối tượng đơn giản tạo ra một phương thức bên trong bằng cách sử dụng một hàm mũi tên. Phương pháp này sẽ làm giảm lớp trên bề mặt biến từng cái một khi được gọi. Thay vào đó, nó không hoạt động ở tất cả.

làm cách nào để tôi tìm thấy tất cả các tài khoản email của mình

let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings


Làm việc với mảng

Sử dụng các hàm mũi tên, bạn có thể đơn giản hóa mã được sử dụng để làm việc với các phương thức mảng. Mảng và các phương thức mảng là phần rất quan trọng của JavaScript vì vậy bạn sẽ sử dụng chúng rất nhiều.

Có một số phương pháp hữu ích như bản đồ phương thức chạy một hàm trên tất cả các phần tử của một mảng và trả về mảng mới.

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

Đây là một hàm khá đơn giản để thêm một vào mọi giá trị trong mảng. Bạn có thể viết cùng một hàm với ít mã hơn bằng cách sử dụng hàm mũi tên.

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

Bây giờ nó dễ đọc hơn nhiều.

Tạo chữ đối tượng

Các hàm mũi tên có thể được sử dụng để tạo các ký tự đối tượng trong JavaScript. Các hàm thông thường có thể tạo chúng, nhưng chúng lâu hơn một chút.

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

Bạn có thể tạo cùng một đối tượng với một hàm mũi tên bằng cách sử dụng ít mã hơn. Sử dụng ký hiệu mũi tên, bạn sẽ cần đặt phần thân hàm trong dấu ngoặc đơn. Đây là cú pháp được cải tiến với các hàm mũi tên.

let createArrowObject = (first,last) => ({first:first, last:last});

JavaScript Arrow Functions and Beyond

Bây giờ bạn đã biết một số cách khác nhau để các hàm mũi tên của JavaScript giúp cuộc sống của bạn trở nên dễ dàng hơn với tư cách là một nhà phát triển. Chúng rút ngắn cú pháp, cung cấp cho bạn nhiều quyền kiểm soát hơn bằng cách sử dụng

this

, giúp tạo các đối tượng dễ dàng hơn và cung cấp cho bạn một cách mới để làm việc với các phương thức mảng.

Sự ra đời của các hàm mũi tên, cùng với nhiều tính năng khác, trong JavaScript ES6 cho thấy JavaScript đã trở nên quan trọng như thế nào trong việc phát triển web. Tuy nhiên, bạn có thể làm được nhiều hơn thế.

Bạn muốn tìm hiểu thêm về JavaScript? Tìm hiểu các khung JavaScript này. Thêm vào đó, của chúng tôi Bảng gian lận JavaScript cung cấp thông tin có giá trị và tìm hiểu thêm về JavaScript hoạt động như thế nào có thể khiến bạn trở thành một nhà phát triển tốt hơn.

Đăng lại Đăng lại tiếng riu ríu E-mail 6 lựa chọn thay thế có thể nghe được: Ứng dụng sách nói miễn phí hoặc giá rẻ tốt nhất

Nếu bạn không thích trả tiền cho sách nói, đây là một số ứng dụng tuyệt vời cho phép bạn nghe chúng miễn phí và hợp pháp.

Đọc tiếp Chủ đề liên quan

• Lập trình
• JavaScript

Giới thiệu về tác giả Anthony Grant(40 bài báo đã xuất bản)

Anthony Grant là một nhà văn tự do về Lập trình và Phần mềm. Anh ấy là một sinh viên chuyên ngành Khoa học Máy tính về lập trình, Excel, phần mềm và công nghệ.

Xem thêm từ Anthony Grant

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký