Bắt đầu với các hàm mũi tên ES6 trong JavaScript

Với ES6, đã có nhiều bản cập nhật cho JavaScript, bao gồm toán tử spread, cấu trúc đối tượng, loại biến mới và hơn thế nữa. Một trong những thay đổi đáng chú ý nhất là các hàm mũi tên , một cách mới và ngắn gọn để viết các hàm. Với các hàm mũi tên, bạn có thể xác định một hàm dễ đọc và ngắn gọn trong một dòng. Trong bài viết này, ta sẽ giới thiệu cho các bạn những điều cơ bản về các hàm mũi tên và thảo luận về lợi ích của chúng.

Các chức năng trong ES5

Hãy bắt đầu bằng cách xem xét cách ta định nghĩa các hàm với ES5 JavaScript. Để xác định một hàm, nó yêu cầu từ khóa hàm . Ví dụ, nếu ta muốn định nghĩa một hàm sẽ nhân một số với hai, nó sẽ trông giống như thế này.

function multiplyByTwo(num){     return num * 2; }

Ta cũng có thể định nghĩa hàm và gán nó cho một biến nếu ta muốn.

const multiplyByTwo = function(num){     return num * 2; }

Dù bạn làm theo cách nào, chức năng từ khóa phải được đưa vào.

Hàm mũi tên ES6 đầu tiên của bạn

Để tạo hàm mũi tên, bạn không cần hàm từ khóa. Trên thực tế, về cơ bản, bạn loại bỏ từ khóa đó và thêm một mũi tên ngay sau các tham số nhưng trước dấu ngoặc nhọn mở. Nó sẽ trông như thế này:

const multiplyByTwo = (num) => {     return num * 2; }

Đến đây, nó không có gì khác biệt đáng kể so với cách làm cũ, nhưng ta có thể thực hiện một vài cải tiến.

Loại bỏ dấu ngoặc đơn không cần thiết

Dấu ngoặc bao quanh các tham số là bắt buộc nếu không có tham số hoặc nhiều hơn một tham số. Tuy nhiên, khi hàm mũi tên của bạn chỉ có một tham số, bạn có thể bỏ dấu ngoặc đơn để đơn giản hóa nó, như sau:

const multiplyByTwo = num => {     return num * 2; }

Lợi nhuận ngầm định

Thông thường, ta viết các hàm trả về chỉ sau một dòng mã. Với cách viết hàm cũ, số dòng trong hàm không ảnh hưởng đến cách bạn xác định hàm. Với các chức năng mũi tên, nó có thể.

Nếu điều duy nhất bạn muốn làm trong một hàm là trả về một dòng, bạn có thể sử dụng trả về ngầm định để đơn giản hóa hàm của bạn . Trong khi sử dụng trả về ngầm định, bạn không cần dấu ngoặc nhọn hoặc từ khóa trả về . Nó sẽ trông như thế này:

const multiplyByTwo = num => num * 2;

Bạn vẫn có thể sử dụng cú pháp trả về ngầm định ngay cả khi bạn không nhất thiết phải trả về bất cứ thứ gì. Nói cách khác, nếu những người gọi hàm của bạn không mong đợi nó trả về bất cứ thứ gì, thì việc nó trả về thứ gì đó không quan trọng.

Ví dụ: nếu bạn muốn in thứ gì đó ra console , bạn có thể sử dụng hàm trả về ngầm định để rút ngắn độ dài của hàm:

const printName = (first, last) => console.log(`${first} ${last}`);

Sử dụng các hàm mũi tên trong bản đồ và bộ lọc

Một trong những nơi phổ biến nhất mà bạn sẽ thấy các hàm mũi tên được sử dụng là với các phương thức Mảng JavaScript như bản đồ, thu nhỏ, bộ lọc, v.v. Bằng cách sử dụng các hàm mũi tên với các phương thức này, bạn có thể thực hiện các phép biến đổi mảng hoàn chỉnh trong một dòng.

Hãy xem xét hai ví dụ, một với bản đồ và một với bộ lọc. Đối với version bản đồ, giả sử ta muốn chuyển đổi một mảng bằng cách nhân mỗi số với hai. Nó sẽ trông giống như thế này:

const twodArray = [1,2,3,4].map( num => num * 2);

Lưu ý với hàm mũi tên này, bạn đã bỏ ngoặc (vì chỉ có một tham số) và sử dụng hàm trả về ngầm định. Điều này giữ toàn bộ chuyển đổi thành một dòng.

Bây giờ, hãy làm khác với bộ lọc. Giả sử ta muốn lọc tất cả các số không chẵn. Ta sẽ có cái này:

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

, không có dấu ngoặc đơn và trả về ngầm định.

'this' Ràng buộc với các Hàm mũi tên

Hãy bắt đầu với một ví dụ sử dụng định nghĩa hàm ES5 bên trong đối tượng người:

const person = {     first: "James",     last: "Quick",     getName: function() {         this.first + " " + this.last     } }

Trong trường hợp này, ta đã tạo một đối tượng person có họ và tên cũng như hàm getName () trả về tên đầy đủ của người đó. Bên trong hàm, ta đang cố gắng tham chiếu các thuộc tính đầu tiên và cuối cùng bằng cách gọi this.first và this.last .

Lý do ta có thể truy cập các thuộc tính đó thông qua từ khóa this là khi các hàm đó được xác định bên trong một đối tượng, nó sẽ tự động được liên kết với chính đối tượng đó. Do đó, với các hàm ES5, ta vẫn có thể tham chiếu các thuộc tính đối tượng bằng cách sử dụng hàm this .

Tuy nhiên, khi bạn sử dụng các hàm mũi tên, mọi thứ sẽ thay đổi một chút. Các hàm mũi tên không thực hiện bất kỳ ràng buộc nào cho từ khóa this . Do đó, nếu ta thay đổi định nghĩa hàm thành một hàm mũi tên, mọi thứ sẽ không hoạt động.

const person = {     first: "James",     last: "Quick",     getName: () => {         return this.first + " " + this.last     } }

Trong trường hợp này, undefined sẽ được in cho cả thuộc tính đầu tiên và cuối cùng, vì từ khóa this không bị ràng buộc với đối tượng person và không có biến đầu tiên và biến cuối cùng để tham chiếu đến.

Kết luận

Các hàm mũi tên là một trong nhiều tính năng mới của ES6 JavaScript. Bạn sẽ thấy chúng được sử dụng ngày càng nhiều trong các ví dụ và tài liệu, vì vậy rất đáng để tìm hiểu cách chúng hoạt động. Chúng cũng có thể cải thiện đáng kể tính ngắn gọn và dễ đọc của mã của bạn.

Tags:

Các tin liên quan

Cách gói một gói JavaScript Vanilla để sử dụng trong React
2019-12-12
Cách phát triển một trình tải lên tệp tương tác với JavaScript và Canvas
2019-12-12
Cách sử dụng map (), filter () và Reduce () trong JavaScript
2019-12-12
Giải thích về lập trình chức năng JavaScript: Ứng dụng một phần và làm xoăn
2019-12-12
Giới thiệu về Closures và Currying trong JavaScript
2019-12-12
Cách đếm số nguyên âm trong một chuỗi văn bản bằng thuật toán JavaScript
2019-12-12
Cách sử dụng phép gán cấu trúc hủy trong JavaScript
2019-12-12
Giải thích về lập trình chức năng JavaScript: Kết hợp & truyền tải
2019-12-12
Cách sử dụng .every () và .some () để điều khiển mảng JavaScript
2019-12-12
Chuyển đổi Mảng sang Chuỗi trong JavaScript
2019-12-05