Tổng hợp các tính năng quan trọng trong ECMAScript 6 (ES6)

1. Khai báo biến với let và const

Trong ES6, let và const được giới thiệu để thay thế cho var với phạm vi khối (block scope).

  • let: Không cho phép khai báo lại trong cùng một phạm vi. Biến khai báo bằng let không có cơ chế hoisting (Temporal Dead Zone), nghĩa là bạn phải khai báo trước khi sử dụng.
  • const: Dùng để khai báo hằng số. Giá trị của const không thể thay đổi sau khi gán. Tuy nhiên, đối với kiểu dữ liệu phức tạp như Array hoặc Object, ta vẫn có thể thay đổi nội dung bên trong (ví dụ: push thêm phần tử vào mảng).

2. Arrow Function (Hàm mũi tên)

Arrow function mang lại cú pháp ngắn gọn và thay đổi cách hoạt động của từ khóa this.

  • Không tự ràng buộc this, nó sẽ kế thừa this từ ngữ cảnh (context) mà nó được định nghĩa.
  • Không thể sử dụng làm constructor (không có phương thức new) và không có thuộc tính prototype.
  • Không có đối tượng arguments, thay vào đó ta sử dụng Rest Parameters (...args).

3. Template Strings

Sử dụng dấu backtick (`) để nối chuỗi và nhúng biến một cách dễ dàng hơn thông qua cú pháp ${expression}.

4. Các phương thức duyệt mảng mới

ES6 và các phiên bản kế cận cung cấp nhiều phương thức mạnh mẽ để xử lý mảng:

forEach: Dùng để lặp qua từng phần tử của mảng.

const users = [{ id: 1, name: 'Kien' }, { id: 2, name: 'Linh' }];
users.forEach((user, index) => {
    console.log(`User ${index}: ${user.name}`);
});

map: Duyệt mảng và trả về một mảng mới dựa trên logic xử lý.

const scores = [8, 9, 10];
const doubleScores = scores.map(score => score * 2);
console.log(doubleScores); // [16, 18, 20]

filter: Lọc các phần tử thỏa mãn điều kiện và trả về mảng mới.

const products = [
    { name: 'A', active: true },
    { name: 'B', active: false }
];
const activeProducts = products.filter(p => p.active);

some & every: some trả về true nếu ít nhất một phần tử thỏa mãn; every trả về true nếu tất cả phần tử thỏa mãn.

const ages = [18, 20, 15];
const hasMinor = ages.some(age => age < 18); // true
const allAdults = ages.every(age => age >= 18); // false

reduce: Tính toán giá trị tích lũy từ mảng.

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((sum, current) => sum + current, 0);
console.log(total); // 10

5. Vòng lặp for...of

Dùng để duyệt qua các giá trị của một đối tượng có thể lặp (iterable).

const colors = ['red', 'green', 'blue'];
for (let color of colors) {
    console.log(color);
}

// Duyệt index và value bằng entries()
for (let [idx, val] of colors.entries()) {
    console.log(`${idx}: ${val}`);
}

6. Các phương thức bổ trợ của Array

  • Array.from(): Chuyển đổi các đối tượng giống mảng (array-like) hoặc các iterable sang mảng thực thụ.
  • Array.of(): Tạo một mảng mới từ các tham số truyền vào.
  • find() & findIndex(): Tìm kiếm phần tử đầu tiên hoặc chỉ số của phần tử đầu tiên thỏa mãn điều kiện.
  • includes(): Kiểm tra mảng hoặc chuỗi có chứa giá trị cụ thể hay không.

7. Xử lý Object

  • Object.is(): So sánh hai giá trị xem chúng có giống nhau hay không (xử lý chính xác hơn === đối với NaN và -0).
  • Object.assign(): Sao chép thuộc tính từ một hoặc nhiều đối tượng nguồn vào đối tượng đích.
  • Object.keys(), Object.values(), Object.entries(): Trả về mảng chứa key, value hoặc cặp [key, value] của đối tượng.

8. Promise, Generator và Symbol

  • Promise: Giải quyết vấn đề "callback hell" trong lập trình bất đồng bộ.
  • Symbol: Một kiểu dữ liệu nguyên thủy mới, đại diện cho một định danh duy nhất và không thể thay đổi.
  • Generator: Hàm có khả năng tạm dừng thực thi và tiếp tục lại sau đó thông qua từ khóa yield.

9. Async và Await

Là cú pháp "đường dẫn" (syntactic sugar) giúp làm việc với Promise trở nên giống như lập trình đồng bộ, tăng tính dễ đọc cho mã nguồn.

async function fetchData() {
    try {
        const result = await someAsyncCall();
        console.log(result);
    } catch (error) {
        console.error('Lỗi:', error);
    }
}

10. Cấu trúc dữ liệu Set

Set là tập hợp các giá trị duy nhất, không trùng lặp.

const mySet = new Set([1, 2, 2, 3]);
mySet.add(4);
console.log(mySet.size); // 4
console.log(mySet.has(2)); // true
mySet.delete(1);
mySet.clear();

Thẻ: ecmascript-6 JavaScript es6-features async-await frontend-development

Đăng vào ngày 27 tháng 9 lúc 15:54