ECMAScript 6

ECMAScript 6

Một chút tìm hiểu lại về ECMAScript 6

Biến let

ECMAScript 6 giới thiệu một từ khóa "let". Không giống như var là một function-scoped, let được khai báo như một block-scoped: có nghĩa rằng chúng chỉ khai báo và sử dụng trong block mà chúng được định nghĩa.

Hãy thử xem xét ví dụ dưới đây:

var caculation = function (a) {
    if (a) {
        var numberTotal = a * 30;
    }
    return numberTotal;
};
caculation();

Để ý đến biên numberTotal . Biến này được khai báo trong block if. Vì var là khiểu khai báo function-scoped và không phải là block-scoped.

Hãy thử thay var bằng let. và không làm gì cả nữa. Sau đó hãy thử refresh lại trình duyệt. bạn sẽ thấy lỗi báo ngay ở dòng return

"Uncaught ReferenceError: numberTotal is not defined"

Điều này xảy ra vì không giống var là function-scoped. let là một block-scoped: nó chỉ tồn tại ở trong block mà nó được định nghĩa.

Nhưng nếu như bạn định nghĩa giống như sau:

var caculation = function (a) {
    let numberTotal = 0
    if (a) {
        numberTotal = a * 30;
    }
    return numberTotal;
};
caculation(4);

Bây giờ thì hãy refesh lại trang nhé. bạn sẽ thấy không còn lỗi nữa.

Sử dụng Destructuring

1. ĐẦu tiên hãy vào js/main.js
2. sửa file giống như đoạn code dưới đây

var caculatePersonNumber = function (person, classNumber) {
    var totalPerson = person * classNumber;
    return {person, classNumber, totalPerson};
};

Chú ý vào giá trị trả về. 3. Sau đó trong sự kiện click button ta sẽ xử lý sự kiện như sau:

document.getElementById('calcBtn').addEventListener('click', function () {
    let {totalPerson} = caculatePersonNumber(10, 20);
   document.getElementById("monthlyRate").innerHTML = totalPerson;
});

Tất nhiên việc có một trang html tương ứng là không thể thiếu:

<div>
    <label htmlFor="calcBtn"></label>
    <button id="calcBtn">Calculate</button>
</div>

4. Hãy f5 để xem kết quả nhé. Nhìn vào việc gọi hàm caculatePersonNumber ta thấy được việc khởi tạo một biến từ một object sử dụng Destructuring.

Sử dụng arrow function

Trong ECMA 6 arrow function là cách viết ngắn của function. Giá trị của this ở bên trong function sẽ được bảo tồn như giá trị của this ở bên ngoài function. vì vậy mà câu lệnh thường thấy khi viết js "var self = this" . Tin vui là khi bạn sử dụng arrow function thì việc này không cần thiết nữa.

let caculatePersonNumberArrowFunction = (person, classNumber) => {
    var totalPerson = person * classNumber;
    return {person, classNumber, totalPerson};
};

Trong sự kiện click của button calcBtn . Thay vì gọi caculatePersonNumber chúng ta thay bằng caculatePersonNumberArrowFunction. Và hãy thay bằng arrow function:

document.getElementById('calcBtn').addEventListener('click', () => {

Nào giờ thì refresh trang lại lần nữa. và chúng ta vẫn thu được kết quả là 200.

Sử dụng Template Strings

Với ECMA6, với một chỗi gồm nhiều dòng. ta có thể sử dụng ký tự ` và cho phép nhúng một expression bằng cách đặt bên trong ${}

HÃY thử làm như sau Trong file index.html add đoạn code dưới đây

<table>
    <thead>
    <tr>
        <th>No</th>
        <th>Name</th>
    </tr>
    </thead>
    <tbody id="class-no"></tbody>
</table>

Trong file main.js. add thêm function dưới đây

var showInfo = () => {
    let html = "";
    let data = [
        {no: 1, numberStudent: 20, name: "class 1"},
        {no: 2, numberStudent: 40, name: "class 2"},
        {no: 3, numberStudent: 50, name: "class 3"},
        {no: 4, numberStudent: 60, name: "class 4"},
        {no: 5, numberStudent: 70, name: "class 5"}
    ];
    data.forEach((item, index) => html += `
        <tr>
            <td>${item.no}</td>
            <td>${item.name}</td>
        </tr>
    `);
    return html;
}

và ngay trong sự kiện click của button calcBtn:

document.getElementById("class-no").innerHTML = showInfo();

Và bây giờ hãy xem kết quả nhé. Hãy để ý đến ${item.no} . chúng ta đã có thể thêm một expression vào chuỗi string.

Thật dễ dàng phải không.

That's it. Come and enjoy it!