ES6 là gì? Những nổi bật và sự thay đổi tuyệt vời của ES6

1653
ES6 là gì

Giới thiệu

Xin chào mọi người! Hôm nay mình xin chia sẻ về ES6. Trong thời gian tìm hiểu, mình cảm thấy thích thú về những thay đổi hay ho của ES6. Vậy ES6 là gì? Và những nổi bật cũng như thay đổi mới nhất trong ES6 là gì? Cùng mình tìm hiểu qua bài viết hôm nay nhé!

ES6 là gì ?

ECMAScript 2015 hay còn được gọi là ES6 là một đặc tả ngôn ngữ kịch bản được tiêu chuẩn hóa bởi ECMAScript International. Nó được sử dụng bởi các ứng dụng phái client-side. Các ngôn ngữ như JavaScript, Jscript và ActionScript được điều chỉnh bởi thông số kỹ thuật này. Hướng dẫn này giới thiệu cho bạn về triển khai ES6 trong JavaScript.

ES6 là gì

Những yêu cầu tối thiểu để ta có thể bắt đầu với Es6

Trước tiên bạn cần có kiến thức cơ bản về javascript. Và có trình duyệt xịn xò với phiên bản mới nhất.

Các tính năng nổi bật làm chúng ta đam mê của ES6

Block Scope

Là phạm vi chứa tất cả những đoạn code nằm bên trong cặp thẻ {}. Ví dụ dưới đây mình sẽ chỉ cho mọi người biết các khi dùng var và let sao cho tối ưu.

Sau đây khi chúng ta thay var ở trong if thành let thì kết quả trả về câu lệnh console.log(“abc :” + abc); sẽ báo lỗi;

Như ở trên mình nói kết quả của câu console.log(“abc” + abc); báo lỗi là vì let chỉ tồn tại trong 1 block ra khỏi là nó không thể sử dụng được nữa. còn var thì chiếm tốn tài nguyên nên chúng ta nên cân nhắn trong trường hợp nào nên sử dụng var or let cho hợp lý và tối ưu nhất.

Arrow Functions

Arrow function chắc chắn là một trong những tính năng phổ biến hơn của ES6 chúng ta sẽ đi vào ví dụ cụ thể để dễ hiểu hơn khi sử dụng dấu => trong Arrow function. so sánh 1 chút về hàm được viết ở ES5 và ES6 hàm đươc viết ở ES5

function timesTwo(params) { return params * 2}
timesTwo(4);
// 8

Và bây giờ ở ES6 ta cảm thấy dễ chịu hơn khi đọc dòng code khai báo một hàm với một tham số và sử dụng dấu =>

var timesTwo = params => params * 2
timesTwo(4);
// 8

Rất ngắn gọn phải không nào.

Xem thêm Những hàm Javascript hay sử dụng mà bạn cần nhớ. 

Extended Parameter Handling

Default Parameter Values là giá trị tham số mặc định khi truyền giá trị vào các hàm. Ở 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 ho 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.

Ví dụ với ES5 ta sử dụng || để set mặc định như sau:

Còn ở ES6 ta có thể truyền giá trị trên parameter như sau:

Template String

Trước đây js không có string.fomat do đó cộng chuỗi bằng tay rất mệt . giờ chúng ta có Template String , không cần mất công cộng chuỗi nữa code rõ ràng hơn rất nhiều khi sử dụng 2 dấu

Multi-line Strings

Với ES5 khi muốn xuống dòng phải sử dụng syntax “\n\t” mỗi lần cộng chuỗi xuống dòng để code dễ nhìn thì chúng ta đau mắt lắm phải không.

Còn với ES6 thì đơn giản hơn:

Promise

Promise được đưa vào Javascript từ ES6. Là một kĩ năng nâng cao để xử lý việc bất đồng bộ hiệu quả hơn. Trước đây kết qủa của một tác vụ đồng bộ và bất đồng bộ sẽ trả về kiểu dữ liệu hoặc một Callback Function.

Thực hiện một callback function thì sẽ dễ sảy ra lỗi Callback Hell.nghĩa là gọi call back khá nhiều lần và lồng nhau dẫn đến không kiểm soát được chương trình và không đủ bộ nhớ để hoạt động. Vì vậy một package được đưa vào ES6 để giải quyết vấn đề này.

Promise sinh ra để xử lý kết quả một hành động cụ thể kết quả của mỗi hành động sẽ là thành công hoặc thất bại và Promise sẽ giúp chúng ta trả lời câu hỏi Nếu thành công thì làm gì ? và Nếu thất bại thì làm gì ?. Cả 2 hành động này ta gọi cụ thể là 1 hành động gọi lại (Callback action). Chúng ta cùng đi vào ví dụ cụ thể nhé.

Ví dụ : khi load 1 hình ảnh có sự kiện ready() ta sẽ áp dụng sự kiện này để đổi hình ảnh default nếu như ảnh đó không tồn tại .

Và nếu ta áp dụng Promise trong Es6 thì nó sẽ đơn giản hơn nhiều

Để trả lời cho câu hỏi làm thế nào để để quả lý tốt kết quả của một hành động bất đồng bộ (Async) ? Chúng ta cùng đi tìm hiểu tiếp về Promise nhé!

Khi một Promise được khởi tạo thì nó có một trong ba trạng thái sau:

  • Fulfilled: hành động xử lý xong và thành công
  • Rejected: hành động xử lý xong và thất bại
  • Pending: hành động đang chờ xử lý hoặc bị từ chối

Trong đó hai trạng thái Reject và Fulfilled ta gọi là Settled, tức là đã xử lý xong.

Để tạo 1 promise ta sẽ có cú pháp sau đây:

Trong đó callback là một function có hai tham số truyền vào như sau:

Trong đó:

  • resolve là một hàm callback xử lý cho hành động thành công
  • reject là một hàm callback xử lý cho một hành động thất bại
Thenable trong Promise

Thenable nó là một phương thức ghi nhận kết quả của trạng thái Thành công hoặc Thất bại mà ta khai báo ở resolve và reject . Nó có 2 tham số truyền vào là 2 callback function Xử lý cho 2 nhiệm vụ thành công và thất bại.

Vào ngay ví dụ dưới đây nhé:

Demo console trả về kết quả luôn cho bạn thấy:

Với đoạn code này chạy lên bạn sẽ nhận giá trị là Success!

Bây giờ ta thử với một đoạn Reject.

Chạy đoạn code này lên sẽ nhận giá trị là Error!.

vậy hai hàm trong then chỉ xảy ra một trong hai trường hợp nhưu ta sử dụng truyền vào param là resolve , reject . Nếu ta khai báo cả hai thì nó chỉ nhận giá trị đầu tiên thôi.

ví dụ luôn nhé:

Kết quả trả về là:

Catch trong Promise

Hàm then() có hai 2 tham số callback là success và error nhưng bạn cũng có thể sử dụng hàm catch để bắt lỗi:

promise.then().catch();

Ví dụ

Run sẽ có kết quà là Error!

Promise là một gói dùng để quản lý kết quả trả về của một hành động Asycn (bất đồng bộ) và nó vừa được bổ sung vào ngôn ngữ Javascript từ version ES6. Việc nắm vững Promise không hề đơn giản và không phải ai cũng hiểu rõ các bạn có thể tự tìm hiểu thêm nữa về nó nhé!

Xem thêm về Promise và ASYNC/AWAIT

Kết thúc

Cảm ơn mọi người đã lắng nghe về bài viết của mình! Mong rằng bài viết sẽ giúp cho các bạn phần nào hiểu thêm về ES6 là gì. Bên cạnh đó biết thêm những nổi bật và thay đổi trong ES6.

Đọc thêm nhiều bài viết hay về:

Xem thêm việc làm Javascript Developer hot nhất tại TopDev

TopDev via viblo