ES6 và những điều thú vị!

Bài viết này sẽ phù hợp hơn với bạn đọc đã biết và tìm hiểu về Javascript . Nếu chưa! Không sao, hãy học một chút cơ bản về Javascript theo link dưới đây nhé! 👌

https://www.w3schools.com/js/

và … Browser phiên bản 2015 trở lên (vì ES6 ra đời năm 2015 nên những trình duyệt 2015 trở đi mới hỗ trợ).

I, ES6 là gì? Tại sao nên dùng ES6?

  1. ES6 (ECMAScript 6) nói một cách gọn gàng là một phiên bản của Javascript (JS), được bổ sung thêm cú pháp mới quan trọng cho việc viết các ứng dụng phức tạp, bao gồm classes và modules. ES6 được sử dụng bởi các ứng dụng phía client-side.
  2. Lý do nên dùng ES6:
    – Có những cú pháp và các tính năng mới làm cho code tường minh cũng như dễ đọc hơn.
    – Là một chuẩn mực code giúp thuận tiện trong một dự án có nhiều thành viên.

II, Các tính năng chính hay sử dụng trong ES6

  1. Arrow function:

Thông thường, sẽ có 2 cách tạo function trong JS:


Trong ES6, chúng ta có một kiểu khai báo mới:


Mới nhìn thì cũng không khác nhau mấy, nhưng cú pháp ES6 sẽ gọn hơn rất nhiều khi:

  • Trong thân hàm chỉ có một câu lệnh duy nhất.

  • Hàm không có tham số.

      2. Default parameters:

Thông thường, khi xét tham số mặc định


trong code trên, nếu một trong 3 tham số long, wide, high bằng 0, thì nó sẽ nhận giá trị mặc định chứ không nhận 0 (vì 0 trong Javascript là False).

Vì vậy, trong ES6 có cách khai báo parameters khác:

trong hàm trên, dù chúng ta khai báo hàm với tham số là 0, thì gía trị biến được gán trong hàm vẫn nhận đúng giá trị 0 như mong muốn.

     3. Destructuring


Ta muốn lấy 3 giá trị này lần lượt gán vào một mảng:


Destructuring cũng áp dụng được với object:


     4. Template literals

Thường chúng ta hay sử dụng ‘+’ khi biểu diễn chuỗi trong JS

trong ES6, chúng ta đã có thể biểu diễn biến trong chuỗi như Scala :))

     5. Rest parameters

Tính năng này giúp JS trở nên mạnh mẽ hơn, khi có thể khai báo một function với số lượng tham số chưa chắc chắn.


qua trên thấy được chúng ta có thể truyền thoải mái số lượng tham số vào function trong JS ( Lưu ý khi sử dụng: sẽ khó quản lý code khi maintenance).

     6. Multi-line String

Thông thường khi muốn biểu diễn một string nằm trên nhiều dòng:


pretty silly, right! khá khó nhìn, chưa kể chuỗi có thể dài hơn😭😭😭

May mắn là ES6 có cú pháp dễ thở hơn:


để ý kỹ thấy cái dấu đầu cuối string khác nhau giữa 2 cú pháp trên 👌

     7. Promise

Cái này khá đặc biệt và nổi tiếng trong làng JS kể từ khi nó ‘chào đời’ 🙂 Vì nó giúp xử lý bất đồng bộ tốt hơn trong JS, tránh gặp callback Hell (các hàm call back lồng nhau)


mỗi một Promise khi khởi tạo sẽ có 1 trong 3 trạng thái (fullfilled, rejected, pending) = (xử lí xong và thành công, xử lí xong và thất bại, đang chờ xử lí)
resolvereject ở trên là 2 hàm callback cho hành động thành công và callback cho hành động thất bại.

Dựa vào nguyên lý hoạt động như trên, thì Promise được sử dụng chủ yếu khi call API, sẽ có call fail và call success, trong lúc chờ result ở server thì nó pending :)). Tương ứng với nó là các hàm call back xử lý như trên.

III, Kết luận

Trên đây là tổng quát hóa một sô tính năng hay sử dụng trong JS, cũng như một số framework JS hiện nay. Nắm rõ sẽ tăng hiệu suất công việc khá nhiều.
Nếu thấy hay, bạn hãy ủng hộ mình bằng like, share, góp ý bài viết để có động lực viết tiếp các bài chất lượng hơn nữa nhé! Thanks

IV, tài liệu tham khảo:

https://www.taniarascia.com/es6-syntax-and-feature-overview/

https://techmaster.vn/posts/34069/10-tinh-nang-cua-es6-ecmascript2015-moi-lap-trinh-javascript-phai-biet

Add a Comment

Your email address will not be published.