JavaScript · ES2018

ES9 Interactive Hub — ECMAScript 2018

Async iteration + rest/spread cho object, regex nâng cao (lookbehind, named capture, dotAll) — mở rộng pattern functional sang async + nâng cấp toolkit pattern matching.

Kinh Nghiệm

0 XP

Hoàn thành khóa học0%

Object Rest / Spread

Chuyên đề cốt lõi

Trung bình6 phút

💡 Khái niệm tóm tắt

Toán tử "..." nay hoạt động trên object — cho phép clone, merge, và tách property bất biến (immutable).

🤔 Tại sao cần tính năng này?

ES6 mới chỉ có spread/rest cho array. Với object, muốn merge phải dùng Object.assign() khá dài và muốn tách property cũng phải gán thủ công. ES9 thống nhất syntax "..." cho object.

Trước (cách viết cũ)Verbose / Cồng kềnh

// Object merge bằng Object.assign() ES6
var user = { name: "Lan", age: 25 };
var updated = Object.assign({}, user, { age: 26 });
console.log(updated); // { name: 'Lan', age: 26 }

// Tách property phải gán thủ công
var name = user.name;
var rest = { age: user.age }; // phải xây dựng tay

ES9 (Hiện đại)Tối ưu & Khuyên dùng

// Object spread ES9 — clone + merge
const user = { name: "Lan", age: 25 };
const updated = { ...user, age: 26 };
console.log(updated); // { name: 'Lan', age: 26 }

// Object rest — tách property
const { name, ...rest } = user;
console.log(name); // 'Lan'
console.log(rest); // { age: 25 }

// Merge nhiều object
const defaults = { theme: 'light', lang: 'vi' };
const user2 = { lang: 'en' };
const config = { ...defaults, ...user2 };
console.log(config); // { theme: 'light', lang: 'en' }

Bạn đã nắm chắc? Thử chạy code thật hoặc làm trắc nghiệm!

Bảng Tra Cứu Nhanh ES9

Xem nhanh cấu trúc + copy snippet

Object Rest / Spread

Toán tử "..." nay hoạt động trên object — cho phép clone, merge, và tách property bất biến (immutable).

const user = { name: "Lan", age: 25 };
const updated = { ...user, age: 26 };
console.log(updated); // { name: 'Lan', age: 26 }
...

for await...of

Vòng lặp dành cho async iterable — giúp consume async generator hoặc stream dữ liệu theo cách tự nhiên.

async function* readPages(url) {
    let page = 1;
    while (true) {
...

Promise.prototype.finally

Callback chạy sau khi Promise kết thúc (cả resolve hoặc reject) — dùng cho cleanup như đóng loading, đóng kết nối.

setLoading(true);
fetchData()
    .then(data => setData(data))
...

RegExp nâng cao (Lookbehind, Named groups, dotAll)

Bộ ba nâng cấp regex: lookbehind (?<=...) / (?<!...), named capture groups (?<name>...), và flag /s cho phép "." khớp cả ký tự xuống dòng.

const text = "Giá: $250 và €180";
const dollars = text.match(/(?<=\$)\d+/g);
console.log(dollars); // ['250']
...