ES6 có gì hay ?

Bài viết này mình sẽ giới thiệu chi tiết tới các bạn các tính năng mới trong ES6. Dưới đây là danh sách các tính năng sẽ được đề cập trong bài viết này.

• Default Parameters
• Template Literals
• Multi-line String
• Destructuring Assignment
• Enhanced Object Literals
• Arrow Function
• Promises
• Block-Scoped Constructs
• Classes
• Modules

Default Parameters

Chúng ta có các câu lệnh để khai báo các tham số mặc định

var rectangle = function (height, width) {
    var height = height || 10
    var width = width || 5
...
}

Trong ES6, chúng ta có thể đặt các giá trị mặc định khi khai báo tham số như thế này

var rectangle = function(height = 10, width= 5) {
  ...
}

Template Literals

Template Literals hay interpolation trong các ngôn ngữ khác là một cách hiển thị các biến trong chuỗi. Trong ES5 chúng ta hay làm như thế này:

var api = 'http://localhost:8080/api/products/' + id

ES6 giúp chúng ta có thể sử dụng cú pháp mới ${id} bên trong dấu “

var api = `http://localhost:8080/api/products/${id}`

Multi-line String

Trong ES5 để chúng ta có thể sử dụng chuỗi có nhiều dòng thì sẽ phải làm như sau:

var message= 'Hello word\n\t' + 'It's a beautiful day\n\t'

Trong ES6 chỉ cần sử dụng dấu “

var message = `Hello word. It's a beautiful day`

Destructuring Assignment trong ES6

Destructuring có thể là một khái niệm tương đối khó, hãy xem phép gán đơn giản này nơi các khóa house và mouse là các biến house và mouse:

var data = $('body').data(), // data has properties house and mouse
  house = data.house,
  mouse = data.mouse

Trong ES6, chúng ta có thể thay thế code ES5 với các câu lệnh

var {house, mouse} = $('body').data() // we'll get house and mouse variables

Enhanced Object Literals

function getCar(make, model, value) {
	return {
		['make' + make]: true
	};
}

Arrow Functions

Mình đã có 1 bài viết riêng về Arrow Function xem lại tại đây.

Promises

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

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

• Để tạo 1 promise sẽ sử dụng cú pháp sau:

      var promise = new Promise(function (resolve, reject) {});

Block-Scoped Constructs Let and Const

Let cho phép chúng ta khai báo biến trong phạm vi các khối lệnh. Các khối lệnh được định nghĩa bởi cặp ngoặc nhọn {}. Trong ES5, các khối không giới hạn phạm vi của các biến:

Trong ES5

function calculateTotalAmount (vip) {
  var amount = 0
  if (vip) {
    var amount = 1
  }
  { // more crazy blocks!
    var amount = 100
    {
      var amount = 1000
      }
  }  
  return amount
}
console.log(calculateTotalAmount(true)); // result: 100

Trong ES6

function calculateTotalAmount (vip) {
  var amount = 0 // probably should also be let, but you can mix var and let
  if (vip) {
    let amount = 1 // first amount is still 0
  } 
  { // more crazy blocks!
    let amount = 100 // first amount is still 0
    {
      let amount = 1000 // first amount is still 0
      }
  }  
  return amount
}

console.log(calculateTotalAmount(true)); // result: 0

Classes

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area);

Modules

Chúng ta có 1 file tool.js

function generateRandom() {
    return Math.random();
}

function sum(a, b) {
    return a + b;
}

export { generateRandom, sum }

Ờ file js khác app.js, chúng ta có thể import module đã export ở trên

import { generateRandom, sum } from 'utility';

console.log(generateRandom()); //logs a random number
console.log(sum(1, 2)); //3