10 tính năng của ES6 lập trình Javascript phải biết

Bài viết này sẽ giới thiệu nhanh về ES6. Nó là phiên bản mới của Javascript. Nếu bạn là một developer về javascript thì bạn hãy tiếp tục đọc để tìm hiểu 10 tính năng tốt nhất của thế hệ mới của ngôn ngữ lập trình phổ biến nhất Javascript Dưới đây là danh sách 10 tính năng tốt nhất của ES6

1. Default Parameters in ES6
2. Template Literals in ES6
3. Multi-line String in ES6
4. Destructuring Assignment in ES6
5. Enhanced Object Literals in ES6
6. Arrow Function in ES6
7. Promises in ES6
8. Block-Scoped Constructs Let and Const
9. Classes in ES6
10. Modules in ES6

Danh sách trên được sắp xếp một cách ngẫu nhiên, trong ES6 còn rất nhiều tính năng khác, các bạn tham khảo http://es6-features.org Bây giờ chúng ta tiến hành xem xét code

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

var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://viblo.asia'
    ...
}

Mọi thứ vẫn ổn cho đến khi giá trị là 0 bởi vì trong javascript 0 là false, vì thế chúng ta phải sử dụng cách khác, 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 link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

=> Cú pháp mới tương tự php, ruby

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 làm như thế này

var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id

Nhưng trong ES6 chúng ta có thể sử dụng cú pháp mới $$NAME} bên trong chuỗi

var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`

Rất tiện lợi, trong các ngôn ngữ swift và php đều có cách viết như trên, nhưng cú pháp hơi khác 1 chút

Một chuỗi có nhiều dòng. Trong ES5, chúng ta sử dụng chuỗi có nhiều dòng như sau

var roadPoem = 'Then took the other, as just as fair,
	'
    + 'And having perhaps the better claim
	'
    + 'Because it was grassy and wanted wear,
	'
    + 'Though as for that the passing there
	'
    + 'Had worn them really about the same,
	'

var fourAgreements = 'You have the right to be you.

    You can only be you when you do your best.'

Trong ES6 chỉ cần sử dụng dấu `` (backticks)

var roadPoem = Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`

Destructuring có thể là một khái niệm khó hiểu, 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

Giống với cú pháp sử dụng hàm list trong php, rất tiện lợi nếu muốn tạo 1 danh sách các biển với value khác nhau mà chỉ trong 1 dòng code