JavaScript: Các hàm mũi tên ES6 trong JavaScript

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Giới thiệu

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ể định nghĩa một hàm dễ đọc và ngắn gọn trong một dòng. Trong bài viết này, chúng tôi 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 hàm trong ES5

Hãy bắt đầu bằng cách xem chúng ta đã định nghĩa các hàm với ES5 JavaScript như thế nào. Để định nghĩa một hàm, nó yêu cầu từ khóa function. Ví dụ, nếu chúng 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;
}
Sao chép

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

const multiplyByTwo = function(num){
    return num * 2;
}
Sao chép

Bất kể bạn đã làm theo cách nào, từ khóa function 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 từ khóa function. 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 cặp ngoặc xoắn {}. Nó sẽ trông như thế này:

const multiplyByTwo = (num) => {
    return num * 2;
}
Sao chép

Tại thời điểm này, nó trông không khác biệt đáng kể so với cách làm cũ, nhưng chú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 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ỏ ngoặc đơn để đơn giản hóa nó, như sau:

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

Giá trị trả về ngầm định

Thông thường, chú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 định nghĩa hàm. Với các hàm 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 mình. Trong khi sử dụng trả về ngầm định, bạn không cần cặp ngoặc xoắn hoặc từ khóa return. 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 lờ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ề một cái 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 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 Map và Filter

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ư map, reduce, filter, 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 map và một với filter. Đối với map, giả sử chúng 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 một cái khác với filter. Giả sử chúng ta muốn lọc tất cả các số không chẵn. Chúng ta sẽ làm thế này:

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

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

Ràng buộc 'this' 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 person như sau:

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

Trong trường hợp này, chúng 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, chúng tôi đ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 chúng ta có thể truy cập các thuộc tính đó thông qua từ khóa this là khi các chức năng đó được định nghĩa 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, chúng ta vẫn có thể tham chiếu các thuộc tính đối tượng bằng cách sử dụng 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 đối với từ khóa this. Do đó, nếu chúng 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.

Phần kết luận

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.

» Tiếp: Iterators
« Trước: HTML DOM
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!