ES6 và những điều thú vị!

March 31, 2020

Bài viết này sẽ phù hợp hơn với bạn đọc đã biết và tìm hiểu về Javascript . Nếu chưa! Không sao, hãy học một chút cơ bản về Javascript theo link dưới đây nhé! ?

https://www.w3schools.com/js/

và … Browser phiên bản 2015 trở lên (vì ES6 ra đời năm 2015 nên những trình duyệt 2015 trở đi mới hỗ trợ).

I, ES6 là gì? Tại sao nên dùng ES6?

ES6 (ECMAScript 6) nói một cách gọn gàng là một phiên bản của Javascript (JS), được bổ sung thêm cú pháp mới quan trọng cho việc viết các ứng dụng phức tạp, bao gồm classes và modules. ES6 được sử dụng bởi các ứng dụng phía client-side.
Lý do nên dùng ES6:
– Có những cú pháp và các tính năng mới làm cho code tường minh cũng như dễ đọc hơn.
– Là một chuẩn mực code giúp thuận tiện trong một dự án có nhiều thành viên.

II, Các tính năng chính hay sử dụng trong ES6

Arrow function:

Thông thường, sẽ có 2 cách tạo function trong JS:

function sum(x, y) {
    return x+y
}

var sum = function(x, y) {
    return x+y
}

Trong ES6, chúng ta có một kiểu khai báo mới:

var sum = (x, y) => {
    return x+y
}

Mới nhìn thì cũng không khác nhau mấy, nhưng cú pháp ES6 sẽ gọn hơn rất nhiều khi:

Trong thân hàm chỉ có một câu lệnh duy nhất.

var count = (x,y) => console.log(x+y)

Hàm không có tham số.

var saySomething = () => console.log("I'm not giving up on you!")

2. Default parameters:

Thông thường, khi xét tham số mặc định

var square = (long, wide, high) => {
    this.long = long || 50
    this.wide = wide || 20
    this.high = high || 10
/* handle here */
}

trong code trên, nếu một trong 3 tham số long, wide, high bằng 0, thì nó sẽ nhận giá trị mặc định chứ không nhận 0 (vì 0 trong Javascript là False).

Vì vậy, trong ES6 có cách khai báo parameters khác:

var square = (long=50, wide=20, high=10) => {
    this.long = long
    this.wide = wide
    this.high = high
    /* handle here */
}

trong hàm trên, dù chúng ta khai báo hàm với tham số là 0, thì gía trị biến được gán trong hàm vẫn nhận đúng giá trị 0 như mong muốn.

3. Destructuring

let score = [8, 9, 10]

Ta muốn lấy 3 giá trị này lần lượt gán vào một mảng:

let [math, literature, english] = score // => Math=8, literature=9, english=10
// hoặc chỉ muốn lấy một giá trị
let [ , , english] = score // => english=10

Destructuring cũng áp dụng được với object:

let name = {
    first :'Duong',
    middle:'Khac',
    last:'Tung'
}

let {first: f, middle: m, last: l} = name// => f: 'Duong', m: 'Khac', l: 'Tung'

4. Template literals

Thường chúng ta hay sử dụng ‘+’ khi biểu diễn chuỗi trong JS

let info = 'My name is ' + name + ', ' + 'I\'m ' + age + 'years old'

trong ES6, chúng ta đã có thể biểu diễn biến trong chuỗi như Scala :))

let info = 'My name is  ${name} , I'm ${age} years old'

5. Rest parameters

Tính năng này giúp JS trở nên mạnh mẽ hơn, khi có thể khai báo một function với số lượng tham số chưa chắc chắn.

let num = (x, y, ...other) => { /* Handle here */}
num(1,2,3,4,5,6,32,12); // => other = [3,4,5,6,32,12]

qua trên thấy được chúng ta có thể truyền thoải mái số lượng tham số vào function trong JS ( Lưu ý khi sử dụng: sẽ khó quản lý code khi maintenance).

6. Multi-line String

Thông thường khi muốn biểu diễn một string nằm trên nhiều dòng:

let rememberUTW = 'When the sun goes down,\n\t'
+ 'And the band won\'t play,\n\t'
+ 'I will always remember us this way.'

pretty silly, right! khá khó nhìn, chưa kể chuỗi có thể dài hơn???

May mắn là ES6 có cú pháp dễ thở hơn:

let rememberUsThisWay = `When the sun goes down,
                   And the band won't play,
                   I'll always remember us this way.`

để ý kỹ thấy cái dấu đầu cuối string khác nhau giữa 2 cú pháp trên ?

7. Promise

Cái này khá đặc biệt và nổi tiếng trong làng JS kể từ khi nó ‘chào đời’ 🙂 Vì nó giúp xử lý bất đồng bộ tốt hơn trong JS, tránh gặp callback Hell (các hàm call back lồng nhau)

var promise = new Promise(function (resolve, reject) {
        resolve('Success');
        //OR
        reject('Error');
});


promise.then(function() {
    function(success) {
        //Success
    },
    function(error) {
        //Error
    }
});

mỗi một Promise khi khởi tạo sẽ có 1 trong 3 trạng thái (fullfilled, rejected, pending) = (xử lí xong và thành công, xử lí xong và thất bại, đang chờ xử lí)
resolve và reject ở trên là 2 hàm callback cho hành động thành công và callback cho hành động thất bại.

Dựa vào nguyên lý hoạt động như trên, thì Promise được sử dụng chủ yếu khi call API, sẽ có call fail và call success, trong lúc chờ result ở server thì nó pending :)). Tương ứng với nó là các hàm call back xử lý như trên.

III, Kết luận

Trên đây là tổng quát hóa một sô tính năng hay sử dụng trong JS, cũng như một số framework JS hiện nay. Nắm rõ sẽ tăng hiệu suất công việc khá nhiều.
Nếu thấy hay, bạn hãy ủng hộ mình bằng like, share, góp ý bài viết để có động lực viết tiếp các bài chất lượng hơn nữa nhé! Thanks

IV, tài liệu tham khảo:

https://www.taniarascia.com/es6-syntax-and-feature-overview/

https://techmaster.vn/posts/34069/10-tinh-nang-cua-es6-ecmascript2015-moi-lap-trinh-javascript-phai-biet

Post Views: 153

Tags:es6, javascript

About The Author

Duong Khac Tung