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

Xin chào các bạn, những ngôi sao lập trình tương lai! 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 ECMAScript 2021. 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 đã chứng kiến hàng trăm học sinh từ những người mới bắt đầu trở thành những lập trình viên tự tin. Hôm nay, chúng ta sẽ khám phá các tính năng mới nhất của JavaScript, và tôi hứa sẽ làm cho nó thú vị và dễ hiểu nhất có thể. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu nhé!

ECMAScript 2021 là gì?

Trước khi chúng ta nhảy vào các tính năng mới, hãy nhanh chóng trò chuyện về ECMAScript là gì. Hãy tưởng tượng ECMAScript như một cuốn sách công thức cho JavaScript. Mỗi năm, các đầu bếp (tức là các nhà phát triển ngôn ngữ) thêm mới các công thức (tính năng) để làm cho cuộc sống lập trình của chúng ta dễ dàng và thú vị hơn. ECMAScript 2021, còn được gọi là ES12, là phiên bản mới nhất của cuốn sách công thức này.

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

ECMAScript 2021 mang đến cho chúng ta một số công cụ mới thú vị để chơi. Nó giống như được nhận một bộ LEGO mới sáng bóng để thêm vào bộ sưu tập của chúng ta. Hãy cùng khám phá từng tính năng mới một.

Phân cách số (_)

Bạn có bao giờ thử đọc một con số rất dài, như 1000000000? Nó hơi đau đầu, phải không? Well, phân cách số chính là người bạn cứu giúp!

// Không có phân cách số
const billion = 1000000000;

// Với phân cách số
const billionReadable = 1_000_000_000;

console.log(billion === billionReadable); // Output: true

Dấu gạch dưới (_) trong 1_000_000_000 không thay đổi giá trị của số. Nó chỉ có ở đó để giúp chúng ta con người dễ đọc hơn. Thật tuyệt vời phải không? Nó giống như thêm khoảng trống trong một câu dài để làm cho nó dễ đọc hơn.

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

Các Promise trong JavaScript giống như việc gọi điện thoại cùng một lúc và chờ ai đó nhấc máy. Phương thức Promise.any() là một cách mới để xử lý nhiều Promise.

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'promise1'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'promise2'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'promise3'));

Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));

// Output: promise2

Trong ví dụ này, Promise.any() được giải quyết ngay khi một trong các Promise trong mảng được hoàn thành. Nó giống như một cuộc đua mà chúng ta chỉ quan tâm đến người đầu tiên crossed the finish line, không quan tâm ai đến thứ hai hoặc thứ ba.

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

Bạn có bao giờ chơi trò chơi thay thế từ không? Phương thức replaceAll() giống như那样, nhưng cho các chuỗi trong JavaScript.

const sentence = "I love cats. Cats are great pets.";
const newSentence = sentence.replaceAll("cats", "dogs");

console.log(newSentence); // Output: "I love dogs. Dogs are great pets."

Trước replaceAll(), chúng ta phải sử dụng các biểu thức chính quy hoặc vòng lặp để thay thế tất cả các lần xuất hiện của một substring. Bây giờ, nó chỉ cần gọi một phương thức đơn giản!

Các toán tử phân bổ logic

ECMAScript 2021 giới thiệu ba toán tử phân bổ logic mới. Đây là những cách viết ngắn gọn cho các mẫu thông dụng trong JavaScript. Hãy cùng xem xét từng toán tử:

Toán tử phân bổ logic AND (&&=)

let x = 1;
let y = 2;

x &&= y;

console.log(x); // Output: 2

// Điều này tương đương với:
// x && (x = y);

Toán tử &&= chỉ phân bổ giá trị bên phải nếu giá trị bên trái là truthy. Nó giống như nói, "Nếu x là true, thì làm cho nó bằng y."

Toán tử phân bổ logic OR (||=)

let a = null;
let b = 'default value';

a ||= b;

console.log(a); // Output: "default value"

// Điều này tương đương với:
// a || (a = b);

Toán tử ||= chỉ phân bổ giá trị bên phải nếu giá trị bên trái là falsy. Nó hoàn hảo cho việc đặt giá trị mặc định!

Toán tử phân bổ nullish (??=)

let foo = null;
let bar = 'baz';

foo ??= bar;

console.log(foo); // Output: "baz"

// Điều này tương đương với:
// foo ?? (foo = bar);

Toán tử ??= chỉ phân bổ giá trị bên phải nếu giá trị bên trái là null hoặc undefined. Nó tương tự như ||=, nhưng cụ thể hơn về điều gì được coi là "rỗ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ả	Ví dụ
Phân cách số	Làm cho số lớn dễ đọc hơn	1_000_000_000
Promise.any()	Giải quyết khi bất kỳ Promise nào trong mảng hoàn thành	Promise.any([promise1, promise2, promise3])
String.replaceAll()	Thay thế tất cả các lần xuất hiện của một substring	"hello hello".replaceAll("hello", "hi")
&&=	Phân bổ nếu bên trái là truthy	x &&= y
||=	Phân bổ nếu bên trái là falsy	x \|\|= y
??=	Phân bổ nếu bên trái là null hoặc undefined	x ??= y

Và thế là bạn đã cùng nhau khám phá qua các tính năng mới thú vị của ECMAScript 2021. Nhớ rằng, cách tốt nhất để học lập trình là thông qua việc làm. Vì vậy, tôi khuyến khích bạn chơi với các tính năng mới này, thử nghiệm, và quan trọng nhất, hãy vui vẻ!

Như giáo sư lập trình cũ của tôi từng nói, "Lập trình giống như nấu ăn. Bạn có thể làm cháy một vài món ăn đầu tiên, nhưng với sự thực hành, bạn sẽ nhanh chóng tạo ra những kiệt tác!" Vậy đừng sợ mắc lỗi - chúng đều là một phần của quá trình học tập.

Tiếp tục lập trình, giữ vững sự tò mò, và chúc bạn học tập vui vẻ!

Credits: Image by storyset