ECMAScript 2018: Hướng dẫn thân thiện cho người mới bắt đầu

Xin chào các pháp sư JavaScript tương lai! Tôi rất vui mừng được làm hướng dẫn viên cho bạn trong hành trình thú vị này qua ECMAScript 2018. Là một ai đó đã dạy lập trình trong nhiều năm, tôi không thể chờ đợi để chia sẻ những tính năng mới này với bạn. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ cùng nhau học từng bước, và trước khi bạn nhận ra, bạn sẽ viết JavaScript như một chuyên gia!

Các tính năng mới được thêm vào trong ECMAScript 2018

ECMAScript 2018, còn được gọi là ES9, đã mang lại một số tính năng tuyệt vời cho ngôn ngữ JavaScript. Nó giống như được nhận một bộ công cụ mới sáng bóng cho những cuộc phiêu lưu lập trình của bạn! Hãy cùng tìm hiểu các tính năng này một lần một.

Vòng lặp đồng bộ không đồng bộ của JavaScript

Hãy tưởng tượng bạn đang ở một tiệc buffet, thay vì lấy tất cả mọi thứ lên đĩa một lần, bạn có thể kỳ diệu gọi món ăn từng món khi bạn sẵn sàng để ăn. Đó chính là điều mà vòng lặp đồng bộ không đồng bộ làm cho mã của bạn!

Vòng lặp for-await-of

Vòng lặp này cho phép chúng ta làm việc với các nguồn dữ liệu không đồng bộ dễ dàng hơn. Dưới đây là một ví dụ:

async function* numberGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

async function printNumbers() {
for await (const num of numberGenerator()) {
console.log(num);
}
}

printNumbers();
// Output:
// 1
// 2
// 3

Trong ví dụ này, numberGenerator là một hàm tạo không đồng bộ yield các hứa. Vòng lặp for-await-of chờ từng hứa giải quyết trước khi chuyển sang lần lặp tiếp theo. Nó giống như có một người bạn kiên nhẫn chờ bạn ăn xong từng miếng trước khi mời món tiếp theo!

Các tính năng mới của đối tượng RegExp()

RegExp, hoặc Biểu thức chính quy, giống như một cây kéo đa năng của xử lý văn bản. ECMAScript 2018 đã thêm một số tuyệt kỹ mới vào công cụ này.

Unicode Property Escapes

Tính năng này cho phép chúng ta khớp các ký tự dựa trên các thuộc tính Unicode của chúng. Nó rất hữu ích khi làm việc với văn bản quốc tế!

const greekSymbol = "π";
console.log(/\p{Script=Greek}/u.test(greekSymbol)); // true

Ở đây, \p{Script=Greek} khớp với bất kỳ ký tự nào trong hệ thống chữ viết Hy Lạp. Flag u bật chế độ Unicode.

Lookbehind Assertions

Bây giờ chúng ta có thể kiểm tra điều gì đi trước khớp của mình, không chỉ sau. Nó giống như có thể nhìn qua vai trong thế giới lập trình!

const price = "$123.45";
console.log(price.match(/(?<=\$)\d+(\.\d*)?/)[0]); // "123.45"

Trong ví dụ này, (?<=\$) là một lookbehind tích cực đảm bảo rằng khớp của chúng ta được đi trước bởi một dấu dollat, mà không bao gồm dấu dollat trong khớp.

Named Capture Groups

Chúng ta bây giờ có thể đặt tên cho các nhóm bắt giữ của mình, làm cho biểu thức chính quy dễ đọc và dễ bảo trì hơn.

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2023-05-15");
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "05"
console.log(match.groups.day);   // "15"

Nó giống như đánh dấu các ngăn chứa trong bộ công cụ của bạn - mọi thứ đều dễ tìm hơn!

JavaScript Promise finally()

Hứa trong JavaScript giống như lập kế hoạch với một người bạn. Đôi khi nó thành công, đôi khi không, nhưng dù sao đi nữa, bạn có thể muốn làm điều gì đó sau đó. Đó là lúc finally() xuất hiện!

function fetchData() {
return new Promise((resolve, reject) => {
// Simulating an API call
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Error fetching data");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Operation completed"));

Trong ví dụ này, không matter nếu hứa giải quyết hay từ chối, khối finally sẽ luôn chạy. Nó giống như nói "Dù chúng ta thành công hay thất bại, hãy dọn dẹp và về nhà."

JavaScript Rest Object Properties

Operator rest (...) trong các literall đối tượng giống như một túi ma thuật có thể giữ tất cả những gì còn lại. Nó rất hữu ích khi bạn muốn tách một số thuộc tính khỏi phần còn lại.

const person = {
name: "Alice",
age: 30,
city: "Wonderland",
occupation: "Explorer"
};

const { name, age, ...rest } = person;

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "Wonderland", occupation: "Explorer" }

Trong ví dụ này, chúng ta đang lấy ra name và age, và tất cả những gì còn lại được đặt vào rest. Nó giống như sắp xếp quần áo - tất cả vào một đống, còn lại vào đống khác!

Kết luận

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau khám phá qua các tính năng mới thú vị của ECMAScript 2018. Nhớ rằng, cách tốt nhất để học là làm, vì vậy đừng ngần ngại thử nghiệm với các công cụ mới. Lập trình giống như nấu ăn - càng thực hành nhiều, bạn càng trở nên giỏi hơn!

Dưới đây là bảng tham khảo nhanh các phương thức chúng ta đã涵盖:

Tính năng	Mô tả
for-await-of	Cho phép vòng lặp không đồng bộ qua hứa
Unicode Property Escapes	Khớp ký tự dựa trên thuộc tính Unicode trong RegExp
Lookbehind Assertions	Kiểm tra khớp dựa trên điều gì đi trước trong RegExp
Named Capture Groups	Cho phép đặt tên cho các nhóm bắt giữ trong RegExp
Promise.prototype.finally()	Xác định một hàm callback để chạy khi hứa được giải quyết
Rest Object Properties	Thu thập các thuộc tính còn lại vào một đối tượng mới

Chúc các bạn lập trình vui vẻ, và những cuộc phiêu lưu JavaScript của bạn luôn thú vị!

Credits: Image by storyset