Javascript ES6 là gì? Đặc điểm của phiên bản EcmaScript 6

Trong lĩnh vực CNTT thì thuật ngữ ES6 trở nên phổ biến và khá quen thuộc. Tuy nhiên, đối với các lập trình viên mới thì đây vẫn còn là một khái niệm xa lạ. Còn chần chừ gì nữa, hãy cùng chúng tôi tìm hiểu chi tiết về Javascript ES6 trong bài viết dưới đây.

Javascript ES6 là gì?

JavaScript ES6 hay còn có tên gọi là ECMAScript, cụ thể ES6 là một phần cải tiến hiện đại dành cho ngôn ngữ JavaScript. Ngoài ra, nó còn cung cấp một số tính năng cho trình duyệt web và hỗ trợ phát triển phần mềm quy mô lớn một cách dễ dàng và hiệu quả.

Hằng số

Hằng số là một trong những thành phần chính trong JavaScript thể hiện các giá trị được xác định một lần. Do đó, nếu như định nghĩa lặp lại hằng số thì chương trình sẽ xảy ra các lỗi.

{{EJS0}}

Hằng số có thể được chạy ở mọi lúc mọi nơi với một biến Var:

{{EJS1}}

Các biến và hàm trong phạm vi khối

Hầu hết các biến trong ES6 sẽ được khai báo bằng lệnh let cùng với các hằng số của nó và tuân theo các quy tắc trong phạm vi khối tương tự như trong Java hay C++. Đối với các phiên bản trước đó, các biến trong JavaScript đã được xác định sẵn phạm vi hàm.

Trong một hàm, các giá trị của biến sẽ không thay đổi cho đến cuối khối. Sau khối thì các giá trị của biến trong khối ở phạm vi ngoài sẽ được khôi phục.

{{EJS2}}

Arrow Functions

Arrow Functions của ES6 được triển khai với cú pháp tương đối đơn giản dành cho ngôn ngữ JavaScript. Một ví dụ về cú pháp này đó là giả sử hàm x chứa tham số a và trả về một giá trị tăng của nó như sau:

{{EJS3}}

Cú pháp này cho phép người dùng có thể tự xác định và chuyển các đối số trong hàm, hoặc có thể sử dụng cú pháp với forEach():

{{EJS4}}

Để có thể xác định các hàm chấp nhận nhiều đối số, hãy đặt các đối số trong dấu ngoặc đơn. Cụ thể như sau:

{{EJS5}}

Default Function Parameters

Các tham số trong hàm có thể được khai báo với giá trị mặc định. Chẳng hạn như hàm x bao gồm hai tham số là a và b, trong đó tham số b có giá trị mặc định là 1:

{{EJS6}}

Các tham số có giá trị mặc định này có thể được xuất hiện trước các tham số không có giá trị mặc định. Do đó, loại hàm này được coi là một khối có giá trị trả về theo cách minh họa:

{{EJS7}}

Tất cả các đối số trong hàm đều được xác định từ trái sang phải. Cụ thể trong lệnh gọi dưới đây, b có giá trị không xác định còn a được khai báo với giá trị mặc định. Đối số được chuyển vào sẽ khớp với tham số a và trả về NaN:

{{EJS8}}

Nếu như chuyển một đối số không xác định thì giá trị mặc định sẽ được sử dụng:

{{EJS9}}

Rest Function Parameters

Cú pháp Rest Function Parameters giúp xử lý các đối số trong hàm được chuyển đổi một cách tùy ý. Để có thể xác định được các phần còn lại của các đối số sau đối số đã được xác định, nó sẽ sử dụng cú pháp như sau:

{{EJS10}}

String Templating

String Templating là phương pháp tạo các chuỗi mẫu dựa trên cú pháp perl hoặc shell. Trong đó, mẫu chuỗi này sẽ được đặt trong các ký tự như (`) và chuỗi thường sẽ được đặt trong (') hoặc (“). Các biểu thức bên trong mẫu sẽ được đánh dấu ${ and }. Ví dụ:

{{EJS11}}

Một biểu thức khác có thể sử dụng để xác định giá trị chuỗi như sau:

{{EJS12}}

Cú pháp này có thể xác định chuỗi nhiều dòng như:

{{EJS13}}

Object Properties

Một cú pháp được sử dụng để triển khai Object được đơn giản hóa trong ES6 như sau:

{{EJS14}}

Đối với các phiên bản ES5 trở về trước thì các thuộc tính đối tượng đều được đặt tên như sau:

{{EJS15}}

Sau đó, tất cả các giá trị đều có thể được định nghĩa cụ thể:

{{EJS16}}

Định nghĩa hàm với tên để xác định các phương thức:

{{EJS17}}

Cú pháp định nghĩa Class

Class

Cuối cùng, JavaScript sẽ nhận được một cú pháp định nghĩa lớp chính thức được triển khai dựa vào các kiểu mẫu có sẵn. Chức năng của cú pháp này đó là xác định các code và loại bỏ các đối tượng không phù hợp.

{{EJS18}}

Phương pháp khai báo

Việc xác định một phương pháp cũng khá đơn giản:

{{EJS19}}

Getters và Setters

Xác định lại lớp Circle với thuộc tính area:

{{EJS20}}

Sau đó hãy thêm một Setter và để xác định Radius là thuộc tính có thể sử dụng hãy kiểm tra xem trường thực tế đã được chuyển đổi thành _radius hoặc đối tượng tương thích với Setter. Bởi vì nếu không tương thích thì hàm sẽ xảy ra các xung đột và dẫn đến lỗi tràn ngăn xếp.

Đây là lớp được xác định lại:

{{EJS21}}

Kế thừa (Inheritance)

Sử dụng Expand để kế thừa các siêu lớp, ví dụ:

{{EJS22}}

Tổng kết về ES6

Như vậy, bài viết trên đây chúng tôi đã hướng dẫn chi tiết về Javascript ES6 đến bạn đọc. Hy vọng thông qua những thông tin hữu ích này đã giúp bạn hiểu hơn về ES6 và có thể sử dụng nó hiệu quả nhất.

Nếu còn gặp bất cứ vướng mắc gì về ES6 hoặc muốn tìm hiểu thêm về Javascript, hãy để lại ở bên bình luận bên dưới, BKHOST sẽ trả lời bạn trong thời gian sớm nhất.

P/s: Bạn cũng có thể truy cập vào Blog của BKHOST để đọc thêm các bài viết chia sẻ kiến thức về lập trình, quản trị mạng, website, domain, hosting, vps, server, email,… Chúc bạn thành công.