Lập Trình Viên
Overview ES6 - Part 2

Overview ES6 - Part 2

's photo
·

10 min read

Chào mọi người, mình lại quay lại với series bài viết về ES6 đây! Ở bài trước mọi người đã biết về ES6 là gì, những tính năng nổi bật trong ES6 rồi phải không và mình có nói về 5 tính năng nổi bật của nó rồi.

  1. Block-Scoped Constructs Let and Cont

  2. Arrow Function in ES6

  3. Destructuring Assignment in ES6

  4. Default Parameters in ES6

  5. Rest Parameter

Đến với bài hôm nay mình sẽ giới thiệu cho các bạn nốt nhưng tính năng còn lại trong ES6 nhé! :star_struck: 6. Template Literals in ES6

  1. Multi-line String in ES6

  2. Enhanced Object Literals in ES6

  3. Promises in ES6

  4. Classes in ES6 Không bắt mọi người chờ lâu nữa, chúng mình vào bài luôn cho nóng nhé :love_you_gesture:

1: Template Literals in ES6

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 first = "Tran Van";
var last = "My";
var name = 'Ten cua minh la:' + first + ' ' + last + '.'

console.log(name);

Kết quả sẽ là: Ten cua minh la:Tran Van My

Nhưng khi đến với ES6 chúng ta có cách hiện thị các biến trong chuỗi bằng cachs khác ! loại bỏ đi những dấu ' ' và + đi:.

var first = "Tran Van";
var last = "My";
var name = `Ten cua minh la: ${first} ${last}.`

console.log(name);

Kết quả sẽ là: Ten cua minh la:Tran Van My Note: Mọi người để ý đến dấu ` nhé! Nếu mọi người dúng dấu ' này thì nó lại hiểu là mỗi chuỗi string đấy nhé

Mọi người thấy gọn hơn chứ. Riêng mình thấy dùng tính năng này rất tiện lợi vì mình không phải nhớ những cặp dấu ' ', + khi chuỗi của mình có nhiều biến, đến với ES6 các bạn không phải lo nữa đúng không! chả còn + cũng chả còn ' ' luôn.

2: Multi-line String in ES6

Vừa nhìn các bạn thấy luôn Multi là các bạn hiểu luôn rồi phải không. Multi-Line có nghĩa là nhiều dòng. Khi bạn code một đoạn nào đấy các bạn không thể để 1 dòng code quá dài phải không ! nó rất là xấu và khi có sếp review code chắc chắn sẽ comment là convention luôn đấy :upside_down: Trong ES5 mọi người hay làm như thế này phải không :

 var content = 'Toi ten la Tran Van My,\n\t'
    + 'La mot developer cua cong ty Framgia\n\t'
    + 'Ad: 13F Keangnam Landmark 72 Tower, Plot E6, Pham Hung Road, Nam Tu Liem District\n\t'
    + 'So thich la: code, xem anime, va ngu\n\t'

console.log(content);

Và kết quả nó sẽ ra như này

Toi ten la Tran Van My, La mot nhan vien cua cong ty Framgia Ad: 13F Keangnam Landmark 72 Tower, Plot E6, Pham Hung Road, Nam Tu Liem District So thich la: code, xem anime, va ngu

Đầy cách bình thường đúng không các bạn! rất nhiều dấu ' ' và dấu + nhiều người không quen là mà bị bug là chả biết chỗ nào mà lần luôn ! Nhưng đừng lo đến với ES6 bạn có cách viết một cách dễ sáng hơn nhiều bằng cách sử dụng dấu ``

var content = `Toi ten la Tran Van My,
        La mot developer cua cong ty Framgia,
        Ad: 13F Keangnam Landmark 72 Tower, Plot E6, Pham Hung Road, Nam Tu Liem District,
        So thich la: code, xem anime, va ngu`

console.log(content);

Kết quả:

Toi ten la Tran Van My, La mot developer cua cong ty Framgia, Ad: 13F Keangnam Landmark 72 Tower, Plot E6, Pham Hung Road, Nam Tu Liem District, So thich la: code, xem anime, va ngu

Nhớ là dấu backticks `` này nhé chứ không phải dấu ' ' này đâu

Mọi người thấy nuối chuỗi, xuống dòng thấy đơn giản chưa nào! Tiếp tục nhé! đang hay đúng không

3: 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. Thấy khó hiểu đúng không các bạn. Thôi thì tai nghe không bằng mắt thấy => Xét ví dụ sau đây mọi người sẽ rõ thôi.

  • 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,
   ...
   }
}

Tương đương với 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) {
  var singer = {};
  singer['salaryOf' + name] : salary;
  return singer;
}

Tương đương với code ES6

function createSinger (name, age, address, salary) {
  return {
    ['salaryOf' + name] : salary,
  }
}

Phần này rất khỏ hiểu phải không các bạn ! Hồi mới đọc mình cũng mất một hồi mới hiểu được ấy! cố gắng ngâm nhé các bạn

4: Promises in ES6

Từ này thì chắc ai cũng biết rồi nhỉ ^^ Nó là lời hứa, phần này mình khá là thích, mình sẽ nói rõ cho các bạn hiểu

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. Như chúng ta đã biết Javascript là đơn luồng nghĩa là một đoạn mã xử lý một nhiệm vụ sẽ chỉ chạy một lần duy nhất và nếu có lần thứ hai thì nó phải chờ lần thứ nhất kết thúc, điều này tuân thủ theo nguyên tắt hoạt động đồng bộ và hoạt động này đã gây ra phiền toái cho một số trường hợp. Ví dụ cho mọi người dễ hiểu nhé:

Hai người đàn ông cần cắt tóc để đi gặp cùng một người yêu và họ đã vào cắt tại một tiệm Salon duy nhất nằm trong làng, khốn nạn ở chỗ cả hai đến cùng thời điểm nên thợ cắt tóc chỉ có thể cắt một trong hai người mà thôi, người còn lại vui lòng chờ đến lượt. Vậy hành đồng cắt tóc của người thứ nhất đã làm ảnh hưởng đến người thứ hai, và người thứ hai sẽ mất một khoảng thời gian chờ để đến lượt của mình (ta gọi là đồng bộ - Synchronous).

Thấy ngấm ngấm rồi phải không, tiếp nhé :V

Sự kiện là đa luồng

Sự kiện trong Javascript đã giải quyết vấn đề đa luồng, một hành động sẽ xảy ra khi một sự kiện được kích hoạt. Bạn viết một chương trình gửi mail và bạn gán nó vào sự kiện click vào button, mình click hai lần liên tiếp thì chương trình sẽ xử lý gửi mail 2 lần cùng một thời điểm, tuy nhiên sẽ rất khó để biết được bên nào sẽ xử lý xong trước.

// Xử lý gửi email
function sendEmail()
{
    $.ajax({
        url : "some-url",
        data : {},
        success : function(result){
            alert('Send Success!');
        }
    });
}

// Gán  hàm send Email vào sự kiện click
$('#button').click(function(){
    sendEmail();
});

Một ví dụ khác là khi load một hình ảnh thì có sự kiện ready(), ta sẽ áp dụng sự kiện này để đổi hình mặc định nếu như hình không tồn tại.

$('img').ready().then(function() {
    // loaded
}, function() {
    // failed
    $(this).attr('src', 'default.png');
});

Vậy câu hỏi của chủ đề này là làm thế nào để quản lý tốt kết quả của một hành động bất đồng bộ (Async)? Để trả lời câu hỏi này thì ta sẽ nghiên cứu về Promise. Vậy 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).

Như ở ví dụ trên mình demo việc xử lý hành động load hình ảnh của trình duyệt, nếu hình ảnh load không được thì sẽ làm thao tác bổ sung hình mặc định, đây là một hành động callback. Nói trong lập trình thì đây là một callback function.

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ý xông 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

Bây giờ ta sẽ tìm hiểu về cách khởi tạo Promise. Tạo một Promise Để tạo một Promise bạn sử dụng cú pháp sau:

var promise = new Promise(callback);

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

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

});

Trong đó:

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ạ

Thenable trong Promise

Thenable không có gì to tác mà nó là một phương thức ghi nhận kết quả của trạng thái (thành công hoặc thất bại) mà ta khai báo ở Reject và Resolve. Nó có hai tham số truyền vào là 2 callback function. Tham số thứ nhất xử lý cho Resolve và tham số thứ 2 xử lý cho Reject.

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


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

Thao tác Resolve và Reject Resolve

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


promise.then(
    function(success){
        console.log(success);
    }
);

Với đoạn code này chạy lên bạn sẽ nhận giá trị là Success!.

Bây giờ ta thử với một đoạn Reject.

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


promise.then(
    function(success){
        console.log(success);
    },
    function(error){
        console.log(error);
    }
);

Chạy đoạn code này lên sẽ nhận giá trị là Error!. Vậy hai hàm callback trong then chỉ xảy ra một trong hai mà thôi, điều này tương ứng ở Promise sẽ khai báo một là Resolve và hai là Reject, nếu khai báo cả hai thì nó chỉ có tác dụng với khai báo đầu tiên.

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


promise.then(
    function(success){
        console.log(success);
    },
    function(error){
        console.log(error);
    }
);

Kết quả: error

Chạy lên nó cũng chỉ nhận đúng một giá trị là Error! => callback error đã hoạt động. Kết Vậy Promise là một gói dùng để quản lý kết quả trả về của một hành động Asycn (bất đồng bộ) và nó vừa được bổ sung vào ngôn ngữ Javascript từ version ES6. Việc nắm vững Promise không hề đơn giản và không phải ai cũng hiểu rõ, nên mọi người cố gắng làm và tìm hiểu thật kỹ nhé

5: Class in ES6

Đến đây thì quá dễ với mọi người rồi phải không! nếu bạn chuyên code lập trình hướng đối tượng thì giờ đây đã có class để thực hiện rồi nhé!, đỡ được phần nào khi sử dụng prototype Minh có ví dụ sau:

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);

Có đầy đủ class như các ngôn ngữ lập trình OOP rồi, quá ngon

Kết Thúc

ES6 còn rất nhiều tính năng hay và lạ nhưng trong series này mình đã giới thiệu cho các bạn 10 tính năng nổi bật nhất của ES6 rồi nhé

ES6 rất hay và rất đáng để học phải không mọi người! Series của mình về ES6 kết thúc tại đây. đây cũng là lần đầu mình viết bài có gì chưa được mọi người comment cho mình xin ý kiến nhé

Tài liệu tham khảo

https://freetuts.net/tim-hieu-promise-trong-javascript-es6-620.html https://github.com/lukehoban/es6features

JavaScriptES6ecmascript