Javascript Es6 có những cú pháp và các tính năng mới làm cho code của bạn hiện đại cũng như dễ đọc hơn. Nó giúp bạn code ít hơn và làm được nhiều hơn. Es6 cho chúng ta nhiều tính năng mới như arrow functions, template strings, class destruction, modeles...Chúng ta cùng bắt đầu tìm hiểu.

1. const and let
 

const là từ khóa mới trong es6 để khai báo các biến. Sau khi được sử định nghĩa, biến không thể gán lại được nữa, hay nói cách khác đó là một biến sẽ không that đổi trừ trường hợp nó được sử dụng trong object.

Điều này rất hữu ích với viếc nhắm tới các selector. Ví dụ: khi chúng ta có một nút button duy nhất kích hoạt event hoặc khi ta muốn chọn một phần tử HTML trong javascript, hãy sử dụng const thay vì var. Nó luôn luôn thích hợp hơn khi ta  không muốn gán lại biến.


Trong đoạn code trên, const sẽ không thay đổi và không thể gán lại được. Nếu gán cho nó một giá trị mới thì đơn giản là sẽ bị lỗi.
 

Với let ta có thể gán giá trị mới. Let tạo ra một biến có thể thay đổi.
Let cũng tương tự như const, cả hai đều bị giới hạn phạm vi. Có nghĩa là nó chỉ dùng được trong phạm vi bao quanh nó.


2. Arrow functions

Hàm arrow thực sự tuyệt vời, nó làm cho code của bạn dễ đọc hơn, cấu trúc code nhìn rất chuyên nghiệp và hiện đại. Thay vì dùng như ví dụ dưới đây.
 

Ta sẽ dùng như sau
 

Rõ ràng arrow function dễ đọc và nhìn code sạch hơn!
Ngoài ra, ta có thể dùng arrow function cho hàm map, filter và reduce được tạo trong functions.

Hàm map với arrow nhìn dễ đọc hơn so với hàm map trong es5. Với Es6 ta có thể viết code ngắn hơn và thông minh hơn. Có thể sử dụng cùng với filter và reduce.

3.Template Literals

Template literals hoặc template strings khá hay. Chúng ta không phải sử dụng thểm toán tử(+) để nối chuỗi hoặc khi ta sử dụng biến bên trong chuỗi.
Cú pháp cũ:

Cú pháp mới ở Es6

Quá đơn giản! Đó là sự khác biệt rất lớn giữa cú pháp cũ và cú pháp trong ES6. Chuỗi ký tự trong ES6 nhìn chặt chẽ và được cấu trúc tốt hơn ES5.

4. Default parameters

Khi tôi làm việc với PHP,  tôi thường sử dụng các tham số mặc định(default paramenters). Điều này cho phép ta xác định trước một tham số.

Vì vậy, khi ta quên viết tham số, nó sẽ không trả về underfined error vì tham số đã mặc định được định nghĩa. Vì vậy nếu ta chạy functions khi tham số bị mất, nó sẽ lấy tham số mặc định và không trả về lỗi! Ví dụ
 

Hàm trên trả về underfined vì ta quên cho nó tham số thứ hai.
Nhưng nếu ta sử dụng tham số mặc định nó sẽ không trả về underfined và sẽ sử dụng giá trị mặc định khi ta không truyền tham số vào.

Như đoạn mã trên  thì với tham số mặc định chúng ta có thể xử lý lỗi trước đó.


5. Array and object destructing

Destructuring là chức năng mới trong ES6 của Javascript. Destructuring  làm cho việc gán các giá trị của một mảng hoặc đối tượng cho biến mới dễ dàng hơn
Cú pháp cũ:

Cú pháp mới ở Es6:

Với Es5 ta sẽ phải gán giá trị cho từng biến một. Với Es6 ta chỉ cần đặt các giá trị trong ngoặc nhọn để lấy bất kỳ thuộc tính nào của object.
Lưu ý: nếu gán một biến không trùng với tên thuộc tính nó sẽ trả về underfined.
Ví dụ: tên thuộc tính là name và ta gán cho nó một biến username, nó sẽ trả về underfined.
Ta luôn phải đặt tên biến giống tên thuộc tính. Trong trường hợp muốn thay thế, ta sẽ dùng dấu hai chấm ( : ).
 

Đối với mảng, chúng ta sử dụng cú pháp giống như đối tượng. Ta thay thế các  ngoặc nhọn bằng ngoặc vuông.


6. Import and export

Sử dụng import và export trong JavaScript  làm cho nó mạnh hơn. Chúng cho phép bạn tạo các thành phần riêng biệt và có thể sử dụng lại.

Nếu bạn đã quen thuộc với bất kỳ mô hình JavaScript MVC framework nào, bạn sẽ thấy rằng chúng sử dụng import và export xử lý các thành phần phần lớn thời gian. Vậy nó thực sự làm việc như thế nào?
export cho phép bạn xuất một module được sử dụng trong một thành phần JavaScript khác. Ta sử dụng import để nhập module đó để sử dụng nó trong thành phần của ta.
Ví dụ, ta có hai tập tin. Tệp một được đặt tên detailComponent.js và tệp hai được đặt tên  homeComponent.js
Trong detailComponent.js ta sẽ export  detail function

Và nếu ta muốn sử function homeComponent.js, ta sẽ chỉ sử dụng import.

Nếu chúng ta muốn nhập nhiều hơn một module , ta chỉ cần đặt chúng trong dấu ngoặc nhọn


7.Promises

Promises là một tính năng mới của ES6. Đó là một phương pháp để viết code không đồng bộ. Nó có thể được sử dụng khi, ví dụ, ta muốn lấy dữ liệu từ một API, hoặc khi ta có một function cần có thời gian để được thực thi. Promises làm cho việc giải quyết vấn đề trở nên dễ dàng hơn.

Nếu vào console,  nó sẽ trả về một Promises. Vì vậy, nếu chúng ta muốn thực hiện một function sau khi dữ liệu được tìm nạp, chúng ta sẽ sử dụng một Promise. Promise có hai tham số: resolve và reject xử lý lỗi dự kiến.
Lưu ý: hàm tìm nạp trả về chính Promise!

 

const url = 'https: //jsonplaceholder.typicode.com/posts';
const getData = ( url ) => {
trả về tìm nạp (url);
}
getData (url).
sau đó ( data => data.json ()).
sau đó ( result =>  console .log (kết quả));
Bây giờ nếu vào console, nó sẽ trả về một mảng dữ liệu.


8.Rest parameter and Spread operator

Rest Parameters được sử dụng để lấy đối số của một mảng và trả về một mảng mới.

Toán tử spread có cú pháp giống như rest parameter,  nhưng toán tử spread lấy Array của chính nó và không chỉ là các đối số. Ta có thể sử dụng tham số Spread để lấy giá trị của một mảng, thay vì sử dụng vòng lặp for hoặc bất kỳ phương thức nào khác.

 

const arr = ['đã nói', 20, 'Người say mê JavaScript', 'Xin chào', 'Đã nói', 'Bạn khoẻ không?'];
const Func = (... anArray) => { 
return anArray; } 
console .log (Func (arr)); 
// output ["said", 20, "Người say mê JavaScript", "Xin chào", "Đã nói", "Bạn khoẻ không?"

9.Classes

Class là cốt lõi của lập trình hướng đối tượng (OOP). Chúng làm cho code của bạn an toàn hơn và được đóng gói. Việc sử dụng class giúp code có cấu trúc đẹp và cho nó được định hướng.

Để tạo một class,  sử dụng  từ khóa là class sau đó là tên của class với hai dấu ngoặc nhọn.
 

Bây giờ ta có thể truy cập các  class phương thức và thuộc tính bằng cách sử dụng từ khóa new
class myClass { 
    constructor ( tên , tuổi ) { 
    this.name = name; 
     this.age = age; 
} 
} 
const Home = new myClass ("đã nói", 20);
console .log (Home.name) // đã nói
Để kế thừa từ một class khác, sử dụng từ khóa  extends và sau là tên của class muốn kế thừa từ đó.

Kết luận

Hy vọng các bạn thấy bài viết này hữu ích, và tôi hy vọng tôi có thể giới thiệu cho bạn một số tính năng của ES6. Cảm ơn vì đã dành thời gian