Es6 là gì

Es6 là gì

Từ trước đến giờ nhiều người chỉ nghe đến Javascript chứ chưa hề nghe đến ES6, họ lầm tưởng ES6 là một ngôn ngữ hoàn toàn mới rất mơ hồ và mông lung đúng không

*

Kết quả khi chạy đoạn code trên nó sẽ ra như này

*

Nhiều người bảo nó vẫn đúng chả sao! ừm thì vẫn đúng nhưng là không cần thiết, vì nếu mình chỉ muốn biến tmp tồn tại trong câu lệnh if thôi không cần thiết ở bên ngoài nữa thì khai báo bằng var lại không xử lý được gây tốn bộ nhớ, không tối ưu . Nhưng các bạn đừng lo nhé đến với ES6 thì nó đã tối ưu bằng lỗi đấy khi khai báo biến bằng “let“=> cách định nghĩa này thì biến chỉ tồn tại trong phạm vi khối của nó (Block Scope)Cú pháp: let var_name = var_value;Với phạm vi hoạt động hẹp như vậy thì let thường dùng để khai báo các biến mang tính chất tạm thời, nghĩa là nó chỉ sống trong một phạm vi hoạt động của khối đó thôi, không sử dụng qua vị trí khác.

Bạn đang xem: Es6 là gì

Chúng ta cùng làm lại ví dụ trên mà dùng let nhé

*

Kết quả của nó sẽ là thế này

*

mọi người thấy khác biệt rồi chứ! biến tmp sẽ không được định nghĩa khi ở ngoài block – scoped if nữa!

Qua phần này mọi người có thêm một cách định nghĩa một biến nữa rồi đúng không – rất hay phải không, nhưng cũng đừng lạm dụng mà tùy vào từng trường hợp khi mình muốn sử dụng nó nhé

Kết

Rõ ràng việc sử dụng từ khóa let có những ưu điểm và nhược điểm khác nhau, vì vậy không phải thấy nó mới được bổ sung vào là sử dụng đâu nhé

*

Khi đến với ES6 chúng ra có cách định nghĩa mới nhé!

*

Chúng ta vào ví dụ để so sánh nhé!

+Cách thông thường

*

+ES6

*

So sánh hai các trên thì rõ ràng cách thông thường sẽ đơn giản hơn rất nhiều, và cả hai đoạn code đều cho kết quả như sau:

*

Đến đây bạn nghĩ nó thật là dài dòng đúng không, phiên bản mới mà chả mới tý nào lại còn rắc rối

*

Nghĩa là bạn có thể bỏ đi cặp dấu {}, điều này tuân thủ theo nguyên tắc “nếu bên thân cặp {} chỉ là một câu lệnh thì bạn có thể bỏ cặp {}”.

Trường hợp một tham số:

Trường hợp truyền vào chỉ một tham số thì bạn có thể bỏ cặp ()

*

Trường hợp không có tham số:

Trường hợp không có tham số truyền vào thì bạn sử dụng cặp () rỗng

*

Đến đây mọi người đã thấy khác biệt chưa nhỉ! khác rất nhiều rồi nhé! khi sử dụng nhưng kỹ thuật này code của bạn sẽ clean hơn, rõ ràng hơn và chuyên nghiệp hơn rất nhiều nhé

Note Khi dùng Arrow Function bạn phải chú ý đến Ràng buộc mũi tên nhé

*

Nếu như bạn muốn xuống dòng mà không bị lỗi:

*

3: Destructuring Assignments in ES6

Tính năng này khá giống với hàm list trong PHP nhé! Nghĩa là nó sẽ phân các giá trị trong mảng vào các biến theo thứ tựhay nói cách khác nó sẽ

Tách các phần tử của Array hoặc Object thành nhiều biến chỉ bằng một đoạn code duy nhất.

Xem thêm: Tải Game đánh Nhau Miễn Phí, Tải Game đánh Nhau Android Miễn Phí

Chưa hiểu rõ thì các bạn xem những ví dụ sau nhé!

Một ví dụ hàm list trong PHP:

*

ES6

*

Kết quả

*

Như vậy rõ ràng Javascript ES6 đang dần bắt kịp các ngôn ngữ khác rồi phải không ^^

Một vài cách xử lý nữa nhé!

Nếu bạn muốn lấy một phần tử thôi thì hãy bỏ trống các phần tử không muốn lấyArray

*

Object

*

-Lấy giá trị theo key Object

*

Nhưng nếu bạn cố ý truy cập vào một key không tồn tại thì sẽ bị lỗi undefined.

*

hay

*

Khi gặp những lỗi thế này thì các bạn chỉ cần gán luôn giá trị cho biến trong mảng là ok

*

4: Default Parameters in ES6

Default Parameter là giá trị mặc định của tham số khi truyền vào các function. Đối với Javascript thì có nhiều bạn chưa biết chức năng này mặc dù trong ES5 đã cung cấp săn cho chúng ta, tuy nhiên người ta cảm thấy cách tạo giá trị mặc định trong ES5 vẫn không hay nên họ đã bổ sung một cách khác mới hơn và đơn giản hơn rất nhiều trong ES6.

Xem thêm: Tải Game Bắn Trứng Khủng Long Miễn Phí

Vào ví dụ để hiểu luôn nhé

Trong ES5 để tạo giá trị mặc định thì bạn sử dụng cặp dấu || để thiết lập ngay bên trong thân của hàm.

*

Kết quả:

*

Trong ES6 có cách khai báo giá trị mặc định đơn giản hơn rất nhiều, cách này cũng tương tự như khai báo trong PHP đó là sử dụng phép gán ngay tại vị trí khai báo tham số cho function

*

Kết quả:

*

Đến đây mọi người thấy khác biệt chưa nhỉ! Các truyền theo kiểu nào cũng được nhưng mình khuyên là nên dùng ES6 vì khi vào dự án một function có hàng chục dòng code khi mình rối mình sẽ không biết mình đã gián biến đấy ở chỗ nào, tìm mãi mới ra- code thì đang bug , deadline thì tới mông rồi mà ngồi tìm biến thì chắc nản lắm nhỉ. Nhưng với ES6 ta gán thẳng vào vị trí khai báo function luôn, trực quan dễ hiểu, khi có ai join vào dự án mà đọc code của các bạn là có thể hiểu được phần nào code của các bạn rồi phải không

*

Trong đó tham số other là một Rest Parameter vì nó có 3 dấu chấm đặt ở trước.Note Tham số other kia thì mình có thể đặt tên như nào cũng được nhé (nhưng phải chuẩn convention nhé ^^ )

Một ví dụ nữa nhé

*

Kết quả:

*

Kết : Như vậy trong Javascript ES6 thì bạn thoải mái trong việc truyền tham số vào function. Tuy nhiên cái nào cũng có hai mặt của nó, nếu bạn truyền với số lượng tham số không xác định thì rất khó nâng cấp và bảo trì, vì vậy tùy theo trường hợp mà bạn sử dụng nhé!

Kết Luận

Bài viết cũng dài rồi, mình nghĩ bài này chỉ nên giới thiệu 5 tính năng thôi, bài sau mình sẽ làm tiếp nhé!Qua bài này mọi người đã hiểu ES6 là gì rồi chứ ) biết công dụng của nó là gì rồi chứ còn nhiều phần hay lắm đón chờ ở tập sau nhé các bạn

Chuyên mục: Hỏi Đáp

=> Xem thêm: Tin tức tổng hợp tại Chobball

Comments are closed.