Hướng dẫn ... in javascript es6

Đã đăng vào thg 12 23, 2016 11:47 CH 4 phút đọc

1. ECMAScript ES6 là gì?

• ES6 là chữ viết tắt của ECMAScript 6, là phiên bản mới nhất của chuẩn ECMAScript. ECMAScript do hiệp hội các nhà sản xuất máy tính Châu Âu đề xuất làm tiêu chuẩn của ngôn ngữ Javascript. Bạn cứ nghĩ xem hiện nay có khá nhiều trình duyệt Browser ra đời và nếu mỗi Browser lại có cách chạy Javascript khác nhau thì các trang web không thể hoạt động trên tất cả các trình duyệt đó được, vì vậy cần có một chuẩn chung để bắt buộc các browser phải phát triển dựa theo chuẩn đó.

• ES6 ra đời vào năm 2015 nên cái tên ES2015 được lấy làm tên chính thức với nhiều tính năng mới học hỏi các ngôn ngữ cấp cao khác, hy vọng dần theo thời gian Javascript trở thành một ngôn ngữ lập trình hướng đối tượng.

• Phiên bản sắp ra trong năm 2017 đó là phiên bản ES7 cũng đang được nghiên cứu và phát triển, họ cũng nhắm đến các kiến thức mới lạ như async function, observer, .. Hy vọng sẽ có nhiều biến động mới.

2. Các chức năng mới của ES6

• Arrow function: Bạn có thể tạo hàm bằng cách sử dụng dấu mũi tên =>.
• Block Scoped: Định nghĩa biến với từ khóa 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)
• Destructuring Assignments: Bạn có thể khởi tạo các biến từ một mảng bằng một dòng code đơn giản.
• Default Parameters: Bạn có thể gán giá trị mặc định cho các tham số.
• Template String: Tạo templaet HTML cực kì đơn giản
• Weak, Set: các kiểu dữ liệu phức tạp mới

3. Arrow function

• Arrow là một dạng viết tắt của các function sử dụng dấu =>, tương tự như trong C#, Java 8,…

Cú pháp căn bản:

Cú pháp căn bản nhất của arrow function như sau:

var functionName = (var1, var2) => {
    // Nội dung function
};

ví dụ

var hello = () => {
  console.log('Hello Bạn');
};
hello();

4. Block Scoped

Block Scoped là gì:

• Block Scoped là phạm vi trong một khối, nghĩa là chỉ hoạt động trong phạm vi được khai báo bời cặp {}.
• ở Es6 người ta sử dụng biến let để khai báo cho biến trong cặp {}

xét ví dụ sau:

    for (let i = 0; i < 5; i++) {
   setTimeout(function(){
      console.log('hello ', i);
   }, 1000);
}

kết quả trả về sẽ là:

hello 1

hello 2

hello 3

hello 4

hello 5

- Vậy biến let so với var có gì khác biệt:

• let tạo ra một biến chỉ có thể truy cập được trong block bao quanh nó, khác với var - tạo ra một biến có phạm vi truy cập xuyên suốt function chứa nó.

cũng cùng ví dụ về biến let ở trên nay ta sử dụng biến var:

    for (var i = 0; i < 5; i++) {
   setTimeout(function(){
      console.log('hello ', i);
   }, 1000);
}

nhưng ở biến var kết quả trả về sẽ là :

hello 5

hello 5

hello 5

hello 5

hello 5

• Biến const : dùng để khai báo một hằng số - là một giá trị không thay đổi được trong suốt quá trình chạy.

ví dụ:

  const A = 5;
  A = 6;  // sẽ xảy ra lỗi

Chú ý:

• Trong es6 hạn chế dùng biến var thay vào đó là ta dùng biến let
• Nếu bạn sử dụng Jquery trong Es6 thì $(this) trong ES6 sẽ được hiểu là (window)
• Để sửa chữa khi bạn sử dụng $(this) sẽ thay bằng $(e.currentTarget)

5. Babel.js

• Babel.js là tool cuối cùng mình muốn giới thiệu với mọi người. Các bạn có thể viết code ES6 và dùng Repl của BabelJS để dịch lại sang mã ES5 chạy được trên browser. BabelJS mang lại khả năng phát triển và sử dụng các tính năng của ES6 ngay tại thời điểm này và chỉ cần thêm một thao tác compile là code sẽ chạy được trên các browser bình thường.

• Qua bài này hy vọng bạn đã hiểu được sơ qua về ES6 là gì, hẹn gặp lại các bạn ở bài tiếp theo. Cảm ơn các bạn đã đọc bài viết này

All rights reserved