Tìm hiểu 10 tính năng của ES6

Tổng quan ES6:

+ES6 là chữ viết tắt của ECMAScript6, đây được coi là một tập hợp các kỹ thuật nâng cao của Javascript và là phiên bản mới của chuẩn ECMAScript.

ECMAScript 6 (ES6, ES2015) là phiên bản được sử dụng phổ biến nhất hiện nay của chuẩn ECMAScript. Chuẩn này được phê duyệt vào tháng 6/2015. Nó là bản nâng cấp quan trọng cho ES kể từ ES5 đã được chuẩn hoá vào năm 2009 (tìm hiểu thêm lịch sử).

Tính năng của ES6:

1. Block – Scoped Constructs Let and Const

– 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 {}

Cú pháp : let var_name = var_value;

Cách khai báo này thường được 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 đó, không sử dụng qua vị trí khác.

let div = document.createElement(‘div’);
let p = document.createElement(‘p’);
let btn = document.createElement(‘button’);

2. Arrow Function

Trong Javascript để tạo một function thì thông thường có hai cách sau:

// Cách 1

function Name (var1, var2) {

}

// Cách 2

let Name = function (var1, var2) {

}

Nhưng trong ES6 chúng ta có cách định nghĩa mới như sau:

// Arrow

let functionName = (var1, var2) {

     // Nội dung function

}

Nếu nội dung là một câu lệnh đơn thì viết tắt như sau:

// Nội dung là một câu lệnh đơn

let hello = (name, message) => console.log(“Chào” + name + “, bạn là “ + message);

Trường hợp chỉ có một tham số:

// Nội dung là một tham số

let hello = message => console.log(message); 

hello(‘Chào bạn‘);

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

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

let hello = () => {console.log(‘Chào bạn’)}; 

hello();

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

// Convention

const func1 = (x, y) // Sai

=> {

         return x + y;

};

const func2 = (x, y) =>// Đúng

{

          return x + y;

};

const func3 = (x, y) => {// Chuẩn

          return x + y;

};

const func4 = (x, y) // Sai

=> x + y;

 

const func5 = (x, y) => // Đúng

x + y;

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

const func6  =  ( // Đúng

     x ,

     y

) => {

     return x + y;

};

3. Rest Parameter:

Rest Parameter: Tham số còn lại (có thể khai báo một hàm với số lượng tham số không xác định).

Để khai báo các tham số còn lại của một hàm thì đặt 3 dấu chấm (…) trước biến đại diện

Ví dụ:

// Rest parameter

const functionName =  ( param1 , param2, …other ) => {

   //

};

// Khai báo hàm

let domainList = (main, sub, …other) =>

{

         console.log(“Main: “ + main); 

         console.log(“Sub: “ + sub); 

         console.log(“Other“); 

         console.log(other); 

}

// Gọi hàm

domainList(‘facebook.com’, ‘google.com’, ‘zalo.com’, ‘pinterest.com’);

Kết quả: 

Main: facebook.com

Sub: google.com

Other

[“zalo.com”, “pinterest.com”]

4. Destructuring Assignment in ES6

// Hàm list trong PHP

$domain = array(

       ‘tranvana’

       ‘ceres’

);

 

// Gán 2 phần tử vào 2 biến $main và $sub

list($name, $comp) = $domain;

echo $name; // kết quả tranvana

echo $comp; // kết quả ceres

ES6

// js

// Array

let date = [20, 05, 2020]

 

// Chuyển 3 giá trị vào 3 biến d, m, y

let [d, m, y] = date;

 

// In kết quả

console.log(“Day: “ + d); // Day: 20

console.log(“Month: “ + m); // Month: 05

console.log(“Year: “ + y); // Year: 2020

Nếu muốn lấy 1 phần tử thôi thì bỏ trống các phần tử không muốn lấy

• Array

// Array

let date = [30, 01, 2020]

// Chuyển 3 giá trị vào 3 biến

let [, , y] = date;

// In kết quả

console.log(“Year: “ + y); // Year: 2020

• Object

// Object

let date = {

         day: 10,

         month: 06,

         year: 2020

}

 

// Chuyển 3 giá trị vào 3 biến

let {day : d, month: m, year : y} = date;

 

// In kết quả

console.log(“Day: “ + d); // Day: 10

console.log(“Month: “ + m); // Month: 06

console.log(“Year: “ + y); // Year: 2020

• Lấy giá trị theo key Object

const person = {name: “tranvana”, email: “tranvana@gamil.com”};

const {name: my_name, email: my_email} = person;

console.log( my_name ); // tranvana

console.log( my_email ); // tranvana@gmail.com

5. Default Parameters in ES6

Là giá trị mặc định của tham số khi truyền vào các function

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

// ES5

function sayHello(domain) {

       domain = domain || ‘tranvana’;

       return domain;

}

// Sử dụng

console.log(“KHÔNG truyền tham số: “ + sayHello());

// KHÔNG truyền tham số: tranvana

console.log(“CÓ truyền tham số: “ + sayHello(facebook.com));

// CÓ truyền tham số: facebook.com

Trong ES6 tương tự khai báo trong PHP, sử dụng phép gán ngay tại vị trí khai báo tham số cho function

// ES6

function sayHello(domain = ‘tranvana’)

{

     return domain;

}

6. Literals in ES6

Là một cách hiển thị các biến trong chuỗi.

• Trong ES5 

const first = “Tran Van”;

const last = “A”;

const name = ‘Ten cua minh la: ‘ + first + ‘ ‘ + last + ‘.’

 

console.log(name); //Ten cua minh la: Tran Van A.

• Trong ES6

const first = “Tran Van”;

const last = “A”;

const name = `Ten cua minh la: ${first} ${last}.`

 

console.log(name); //Ten cua minh la: Tran Van A.

7. Multi-line String in ES6

• Trong ES5

const content = ‘Toi ten la Tran Van A,\n\t‘

   + ‘La mot developer cua cong ty Ceres\n\t‘

   + ‘So thich la: code, xem anime, va ngu\n\t‘

 

console.log(content); // Toi ten la Tran Van A, La mot nhan vien cua cong ty Ceres So thich la: code, xem anime, va ngu

• Với ES6  có thể viết thế này:

const content = `Toi ten la Tran Van A,

   La mot developer cua cong ty Ceres,

   So thich la: code, xem anime, va ngu`

 

console.log(content);// Toi ten la Tran Van A, La mot nhan vien cua cong ty Ceres So thich la: code, xem anime, va ngu

8. Enhanced Object Literals in ES6

ES6 mang lại khả năng mô tả object một cách gọn gàng hơn.

• Property value shorthand: ES6 mặc định gán giá trị cho property khi property có tên match với tên của biến. Với ES5

function createSinger (name, age, address, salary) {

   return {

         name : name,

         age : age,

         address : address,

         salary : salary,

        …

    }

 }

Code ES6

function createSinger (name, age, address, salary) {

    return {

          name,

          age,

          address,

          salary,

          …

    }

 }

• Computed property key: Với khả năng này ta có thể set tên của property một cách linh hoạt hơn. Ví dụ với ES5

function createSinger (name, age, address, salary) {

     const singer = {};

     singer[‘salaryOf’ + name] : salary;

     return singer;

}

Code ES6

function createSinger (name, age, address, salary) {

return {

             [‘salaryOf’ + name] : salary

        }

 }

9. Promise in ES6

Promise được đưa vào Javascript từ ES6, đây có thể coi là một kỹ thuật nâng cao giúp xử lý vấn đề bất đồng bộ hiệu quả hơn.

Promise sinh ra để xử lý kết quả của 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 giải quyết câu hỏi “Nếu thành công thì làm gì? Nếu thất bại thì làm gì?”. Cả hai câu hỏi này ta gọi là một hành động gọi lại (callback action).

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.

Để tạo một Promise sử dụng cú pháp sau:

const promise = new Promise(callback);

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

const promise = new Promise(function(resolve, reject){

});

Note:

• 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 hành động thất bại.

>> Chi tiết về Promise sẽ có ở bài blog khác (link)

Trong javascript có thể khai báo một đối tượng bằng cách khai báo một biến có kiểu dữ liệu là object.

Ví dụ:

var employee {

    name: null,

    age: null,

    setName: functions (name) {

          this.name = name;

     }

    getName: function () {

          return this.name; 

     }

    setAge: function (age) {

          this.age = age;

     }

    getAge: function () {

          return this.age;

     }

};

Trong ES6 hỗ trợ khai báo một đối tượng theo chuẩn OOP, bằng cách sử dụng từ khóa class.

Ví dụ: Đối với VD trên có thể chuyển sang dạng ES6 như sau:

class Employee {

     setName (name) {

          this.name = name;

     }

     getName () {

          return this.name; 

     }

     setAge (age) {

          this.age = age;

     }

     getAge () {

          return this.age;

     }

};