JavaScript - ECMAScript 2020: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn học lập trình! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của ECMAScript 2020. Là một giáo viên khoa học máy tính với nhiều năm kinh nghiệm, tôi đã thấy rất nhiều sinh viên tỏa sáng khi họ hiểu được những khái niệm này. Hãy cùng nhau lặn sâu và khám phá những tính năng tuyệt vời mà ES2020 mang lại cho ngôn ngữ JavaScript!

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

ECMAScript 2020, còn được gọi là ES2020, giống như một bộ công cụ mới sáng bóng cho các nhà phát triển JavaScript. Nó giới thiệu nhiều tính năng thú vị giúp cuộc sống lập trình của chúng ta dễ dàng và hiệu quả hơn. Hãy mở bộ công cụ này cùng nhau và xem những gì hay ho chúng ta sẽ tìm thấy trong đó!

Kiểu dữ liệu BigInt

Hãy tưởng tượng bạn đang đếm sao trên bầu trời đêm. Có hàng tỷ ngôi sao! Trước đây, JavaScript có giới hạn về kích thước số có thể lớn đến mức nào. Nhưng bây giờ, với BigInt, trời cao là giới hạn (ý chỉ là chơi chữ)!

BigInt cho phép chúng ta làm việc với các số nguyên cực lớn. Dưới đây là cách bạn có thể sử dụng nó:

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// Output: 1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// Output: 1234567890123456789012345678901234567891n

Trong ví dụ này, chúng ta đang tạo một BigInt bằng cách thêm 'n' ở cuối số. 'n' báo cho JavaScript biết, "Hey, đây là một BigInt!" Chúng ta có thể thực hiện các thao tác trên BigInt như bình thường, nhưng nhớ thêm 'n' vào bất kỳ số nào bạn đang sử dụng với BigInt.

Оператор nullish coalescing (??)

Bạn có bao giờ chơi trò "guess the present" không? Bạn lắc hộp, và nếu không nghe thấy gì, bạn đoán rằng nó trống rỗng. Оператор nullish coalescing cũng giống như vậy, nhưng trong mã!

Оператор này giúp chúng ta kiểm tra xem một giá trị có null hoặc undefined không, và nếu có, chúng ta có thể cung cấp một giá trị mặc định. Dưới đây là cách nó hoạt động:

let username = null;
console.log(username ?? "Guest");
// Output: "Guest"

username = "Alice";
console.log(username ?? "Guest");
// Output: "Alice"

Trong trường hợp đầu tiên, username là null, vì vậy оператор trả về "Guest". Trong trường hợp thứ hai, username có giá trị, vì vậy nó trả về giá trị đó. Nó giống như nói, "Nếu hộp trống rỗng, hãy giả định rằng nó là một con gấu bông!"

Phương thức Promise.allSettled()

Hãy tưởng tượng bạn là một giáo viên (như tôi!) chờ tất cả học sinh của mình hoàn thành bài kiểm tra. Một số có thể hoàn thành thành công, những người khác có thể bỏ cuộc. Promise.allSettled() giống như chờ mọi người nộp bài kiểm tra của họ, bất kể họ làm tốt như thế nào.

Dưới đây là một ví dụ:

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));

// Output:
// "fulfilled"
// "rejected"

Trong đoạn mã này, chúng ta có hai promise. Một promise giải quyết thành công, promise khác bị từ chối. Promise.allSettled() chờ cả hai hoàn thành và sau đó cung cấp cho chúng ta trạng thái của từng promise.

Phương thức String.matchAll()

Bạn có bao giờ chơi trò "Where's Waldo?" không? matchAll() giống như chơi "Where's Waldo?" với văn bản! Nó giúp chúng ta tìm thấy tất cả các lần xuất hiện của một mẫu trong một chuỗi.

Hãy xem nó hoạt động như thế nào:

const text = "The cat and the hat sat on the mat.";
const regex = /at/g;
const matches = [...text.matchAll(regex)];

console.log(matches);
// Output: [
//   ['at', index: 7, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 19, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 31, input: 'The cat and the hat sat on the mat.', groups: undefined]
// ]

Ở đây, chúng ta đang tìm kiếm tất cả các lần xuất hiện của "at" trong văn bản của chúng ta. matchAll() trả về một bộ迭代, mà chúng ta chuyển đổi thành một mảng sử dụng toán tử phân tán (...). Mỗi lần khớp cung cấp cho chúng ta thông tin về vị trí nó được tìm thấy trong chuỗi.

Оператор optional chaining (?.)

Cuối cùng nhưng không kém phần quan trọng, hãy nói về оператор optional chaining. Nó giống như một nhà thám hiểm cẩn thận, kiểm tra từng bước của con đường trước khi tiến lên.

Dưới đây là cách nó hoạt động:

const user = {
name: "Alice",
address: {
street: "123 Main St"
}
};

console.log(user.address?.street);
// Output: "123 Main St"

console.log(user.phoneNumber?.home);
// Output: undefined

Trong ví dụ này, chúng ta đang cố gắng truy cập các thuộc tính có thể không tồn tại. Оператор ?. cho phép chúng ta làm điều này một cách an toàn. Nếu user.address tồn tại, nó sẽ cố gắng truy cập street. Nếu user.phoneNumber không tồn tại, nó dừng lại và trả về undefined thay vì ném lỗi.

Bảng tóm tắt phương thức

Dưới đây là bảng tóm tắt các phương thức mới chúng ta đã học:

Phương thức	Mô tả
BigInt	Cho phép làm việc với số nguyên lớn
?? (Nullish Coalescing)	Cung cấp giá trị mặc định cho null hoặc undefined
Promise.allSettled()	Chờ tất cả các promise hoàn thành
String.matchAll()	Tìm tất cả các lần xuất hiện của mẫu trong chuỗi
?. (Optional Chaining)	Truy cập an toàn thuộc tính của đối tượng

Và đó là tất cả, các bạn! Chúng ta đã khám phá các tính năng thú vị của ECMAScript 2020. Nhớ rằng, cách tốt nhất để học là làm. Vậy, hãy mở trình chỉnh sửa mã của bạn và bắt đầu thử nghiệm với các công cụ mới này. Chúc các bạn lập trình vui vẻ và hành trình JavaScript của bạn sẽ đầy sự phấn khích và khám phá!

Credits: Image by storyset