Javascript ES6

ECMAScript 2015 còn được gọi là ES6 có những tính năng quan trọng sau:

1. Let keyword: định nghĩa biến trong phạm vi block

2. Const: const cho phép bạn định nghĩa 1 hằng số (1 biến js với 1 giá trị là hằng số). Const tương tự let, ngoại trừ việc giá trị không thể thay đổi.

3. Arrow function:

Cấu trúc ngắn để viết biểu thức hàm, không cần function, return và dấu {}

const x = (x, y) => x * y;

// khong co tham so
var docLogEs6 = () => { console.log(document); };

Arrow function không có this. Nó không phù hợp để định nghĩa method cho class.

Sử dụng const an toàn hơn var, vì biểu thức function luôn là 1 giá trị hằng số.

Bạn chỉ có thể bỏ qua return và {} nếu function chỉ có 1 dòng lệnh.

This là gì?

Xử lý của this trong arrow function cũng khác so với function thông thường. Tóm lại, với arrow function không có ràng buộc gì với this. Trong function thông thường this đại diện cho đối tượng đã gọi function, có thể là window, document, button hoặc … Ví dụ:

// regular function
hello = function() {
  alert('Hello ' + this)
}

// window gọi function
window.addEventListener('load', hello)
// Trả về Hello object Window

// button gọi function
document.getElementById('button').addEventListener('click', hello);
// Trả về Hello object Button

Ở ví dụ trên, đối với function thông thường, this đại diện cho đối tượng gọi function đó. Lúc đầu khi page load là Window object, sau đó khi click vào button thì là Button object.

Với arrow function this đại diện cho đối tượng đã định nghĩa arrow function. Ví dụ:

hello = () => alert('Hello ' + this);

// window gọi function
window.addEventListener('load', hello);

// button gọi function
document.getElementById('button').addEventListener('click', hello);

Trong ví dụ này, cả 2 lần gọi method đều trả về cùng 1 đối tượng Window (là đối tượng đã định nghĩa function này).

4. Object Destructuring: gán thuộc tính của đối tượng cho biến. Ví dụ:

const person = {
  firstName = "John",
  lastName = "Doe",
  age: 50,
  color: "blue"
};

// gán cho 2 biến firstName và age 2 giá trị tương ứng trong object person
let { firstName, age } = person;

5. Array Destructuring: gán giá trị của array cho biến:

const fruits = ["Banana", "Orange", "Apple"]
let [fruit1, fruit2] = fruits

const [a, b, ...c] = [1, 2, 3, 4, 5]
// c = [3, 4, 5]

6. Toán tử Spread (…)

Toán tử ... mở rộng 1 iterable (tương tự 1 array) vào nhiều giá trị:

const a1 = ["a", "b", "c"]
const a2 = ["d", "e", "f"]

const m = [...a1, ...a2]
// m = ["a", "b", "c", "d", "e", "f"]

Toán tử ... có thể dùng để mở rộng iterable thành nhiều tham số cho function:

const numbers = [1, 2, 3]
let max = Math.max(...numbers)

7. For/of: dùng để duyệt các phần tử trong iterable như array, string, map, nodelist …

const cars = ["BMW", "Volvo", "Mini"]
for (let x of cars) {
  console.log(x)
}

8. Maps: có thể sử dụng object như 1 key:

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Map giữ cặp key-value mà key có thể là bất kỳ kiểu dữ liệu nào. Map ghi nhớ thứ tự của key chèn vào.

Tạo map bằng new Map() hoặc Map.set():

const fruits = new Map()
fruits.set("apples", 500)
fruits.set("bananas", 200)

Method get, set:

fruits.get("apples");    // return 500

Maps là objects. Khác nhau giữa map và object:

9. Set: là 1 tập hợp các giá trị unique. Mỗi giá trị chỉ xuất hiện 1 lần trong set.

Giá trị có thể là bất kỳ kiểu nào, kể cả object.

Tạo set bằng new Set() hoặc dùng method add() để thêm giá trị:

const letters = new Set(["a", "b", "c"]);

const letters = new Set();
letters.add("a");
letters.add("b");
letters.add("c");

for (const x of letters) {
  console.log(letters);
}

Set cũng là object.

10. Javascript Class:

Js class là mẫu (template) cho các object:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

// sử dụng class:
const car1 = new Car("Ford", 2024);

11. Javascript Promises: promise là object chứa giá trị tương lai của hoạt động không đồng bộ. Ví dụ nếu viết bằng callback:

getData(function (x) {
  console.log(x);
  getMoreData(x, function(y) {
    console.log(y);
    getSomeMoreData(y, function(z) {
      console.log(z);
    });
  });
});

Viết lại đoạn code sau sử dụng promise:

getData()
  .then((x) => {
    console.log(x);
    return getMoreData(x);
  })
  .then((y) => {
    console.log(y);
    return getSomeMoreData(y);
  })
  .then((z) => {
    console.log(z);
  });