Tự học JS - Module 13: Các tính năng ES6+ hiện đại (Cheatsheet đầy đủ)

Table of contents

1. Destructuring (Phân rã)

Đây là cách cực kỳ nhanh để gán thuộc tính của Object hoặc phần tử của Array vào các biến riêng biệt.

Với Object:

const person = { name: "Tuấn", age: 28 };
const { name, age } = person;
console.log(name); // "Tuấn"

Với Array:

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

2. Spreadsheet (…) và Rest Parameters

Toán tử ... có hai vai trò chính tùy vào ngữ cảnh:

• Spread (Trải rộng): Dùng để sao chép mảng hoặc gộp các phần tử.

  const arr1 = [1, 2];
  const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

• Rest (Phần còn lại): Gom các đối số còn lại trong hàm thành một mảng.

  function sum(...args) {
    return args.reduce((acc, val) => acc + val, 0);
  }

3. Default Parameters (Tham số mặc định)

Bạn có thể gán giá trị mặc định cho tham số nếu người dùng không truyền giá trị vào hoặc truyền undefined.

function welcome(user = "Khách") {
  console.log("Chào mừng " + user);
}
welcome(); // "Chào mừng Khách"

4. For/Of Loop

Vòng lặp for...of giúp duyệt qua các giá trị của một đối tượng có thể lặp (Iterable) như Mảng, Chuỗi, Map, Set một cách trực quan.

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

5. JavaScript Maps & Sets

• Map: Một tập hợp các cặp key-value, trong đó key có thể là bất kỳ kiểu dữ liệu nào (không chỉ là string như Object).
• Set: Tập hợp các giá trị duy nhất (không trùng lặp).

6. JavaScript Modules (Import/Export)

Cho phép chia nhỏ mã nguồn thành nhiều file để quản lý dễ dàng hơn.

• Export:

  export const name = "Tuấn";

• Import:

  import { name } from "./person.js";

Lời kết Module 13

Nắm vững ES6+ là điều kiện bắt buộc để bạn có thể làm việc với các thư viện JS hiện nay. Trong Module 14, chúng ta sẽ học cách Debugging để tìm và sửa lỗi nhanh như một chuyên gia.

Hẹn gặp lại các bạn!