6 tính năng khiến bạn phải học Javascript ES6 ngay bây giờ.

Nếu bạn là nhà một web developer, có thể bạn đã từng nghe một chút về ECMAScript 6 (ES6), mặc dù ban đầu nó có vẻ hơi khó hiểu. Đây chính là phiên bản tiếp theo của JavaScript, cung cấp các tính năng ngôn ngữ mới mà bạn có thể sử dụng lâu dài.

ES6 sẽ hỗ trợ hầu hết trong các trình duyệt nổi tiếng hiện nay, với Chrome có khả năng tương thích hơn 90%, Edge ở 80% và Safari ở mức 54%. Trên điện thoại di động, chỉ có 31 phần trăm hỗ trợ ES6 cho người dùng Android 5.1 và 54 phần trăm cho người dùng iOS. Bạn vẫn có thể sử dụng các tính năng ES6 ngay bây giờ bằng cách sử dụng bộ xử lý trước như Babel để biên dịch lại mã JavaScript của bạn trở lại mã ES5 tương thích cho các trình duyệt cũ hơn, có nghĩa là không có lý do gì để ngừng học hỏi về nó.

Đây là các tính năng của ES6 tôi đang hướng tới và đang tích cực cố gắng để tận dụng.

Variables and constants

JavaScript cuối cùng nhận được các hỗ trợ của biến const, do đó, bạn có thể định nghĩa một const trong code của bạn nếu nó luôn luôn giữ giá trị đó - nếu bạn cố gắng gán một cái gì đó cho hằng số đó sau khi định nghĩa, bạn sẽ gặp lỗi.

Ngoài ra, ES6 còn cung cấp một loại biến mới là ** let**. Nó được sử dụng để định nghĩa một biến trong phạm vi function { }

Khi bạn định nghĩa một biến với let, nó được giới hạn phạm vi chính xác của nó, chứ không phải toàn cục. Bạn có thể đọc thêm về let và const ở đây.

Arrow functions

Một bổ sung lớn cho ES6 cho phép bạn declare một chức năng bằng cách sử dụng một => đơn giản thay vì biểu thức chức năng truyền thống. Nó có thể có vẻ khó hiểu lúc đầu, nhưng nó có lợi ích rõ ràng cho sự ngắn gọn trong những ứng dụng lớn.

Arrow function tuyệt vời bởi vì chúng tạo ra hành vi của thuộc tính this. Ví dụ this sẽ có cùng giá trị với bối cảnh (context) của hàm - nó không bị thay đổi. Thay đổi thường xảy ra mỗi lần bạn tạo một closure.

Sử dụng arrow function trong ES6 cho phép chúng ta không cần sử dụng that = this hoặc self = this hoặc _this = this hoặc .bind(this).

Modules

Một khái niệm thú vị mới trong ES6 được gọi là Modules, thứ mà các JS developer vẫn đang sử dụng trong nhiều năm.

Một số dự án như Webpack cho phép bạn tận dụng việc modul hóa ngay từ bây giờ. Nhưng ES6 lại cung cấp modules như một phần của JS thuần trong trình duyệt cho lần đầu sửu dụng.

Thêm vào đó, việc modul hóa là một lí do lớn để chúng ta abwst đầu học ES6 ngày từ bây giờ bởi vì nó sẽ thay đổi cách bạn làm việc nếu bạn chưa sẵn sang cho việc sử dụng modules.

Các module của ES6 được lưu trữ thành các file riêng biệt và chỉ có duy nhất 1 module trong 1 file và đuôi .js vẫn được sử dụng là phần đuôi mở rộng.

Mỗi module có thể có nhiều export và có thể xuất ra một export mặc định như 1 function. Có nhiều ván đề phức tạp khi bạn muốn làm việc với Modules, được phân tích sâu ở đây.

Điều quan trọng nhất bạn cần biết đó là các modules có thể giúp bạn dọn dẹp code để duy trì các phần code và các ví dụ này có thể giúp bạn hiểu các lợi ích của việc bảo trì code.

Spread

Nó rất đơn giản tuy nhiên trình spread là 1 cú pháp vô cùng thuận tiện và nó sẽ được thêm vào 1 mảng khi được gọi bất cứ chỗ nào. Chỉ cần thâm dấu “…” để mở rộng 1 mảng thay vì cần xuất ra cá giá trị của mảng.

Nó không phải là 1 thay đổi đột phá nhưng nó là 1 cách để ngưng sử dụng các hacks nhưu được mô tả trên trang Mozilla.

For-of

Các vòng lặp cuối cùng cũng được cải tiến vì vậ bạn có thể lặp qua các biến mà không làm rối phần code lên. For-in đã xuất hiện từ khá lâu tuy nhiên for-of sẽ được them vào ES6.

Ví dụ từ trang Strongloop cho thất rằng vòng lặp for-of sẽ cho ra danh sach các giá trị hơi các thuộc tính được lưu trữ trong object.

Classes

Thật là khó tin nhưng JS ngày càng có nhiều class hỗ trợ với phiên bản ES6 mặc dù vấn đề này đang được tranh cãi gay gắt. Các class của ES6 hỗ trợ các mẫu có nền tảng nguyên mẫu hướng đối tượng và chúng hỗ trợ việc kế thừa, các constructor, các phương thức tĩnh …

Trước khi sử dụng bất cứ thứ gì Hãy chắc chắn rằng bạn kiểm tra các các công cụ bạn đang tận dụng được hỗ trợ rộng rãi và sử dụng các pre-processor để đảm bảo tính tương thích với các trình duyệt cũ.