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

Xin chào các siêu 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ị này vào thế giới của ECMAScript 2019. Là một người đã dạy lập trình trong nhiều năm, tôi không thể chờ đợi để chia sẻ những điều kỳ diệu của ngôn ngữ này với các bạn. Nào, hãy mở sổ tay ảo của bạn và cùng nhau bước vào!

Giới thiệu về ECMAScript 2019

Trước khi chúng ta bắt đầu, hãy nhanh chóng thảo luận về ECMAScript là gì. Hãy tưởng tượng JavaScript như một chiếc bánh ngon lành, và ECMAScript là công thức của nó. Mỗi năm, công thức này được điều chỉnh và cải thiện, và năm 2019 cũng không ngoại lệ. ECMAScript 2019 đã mang đến cho chúng ta một số tính năng mới thú vị giúp chiếc bánh JavaScript của chúng ta trở nên ngon hơn!

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

ECMAScript 2019 đã 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 trở nên dễ dàng hơn. Hãy cùng khám phá chúng một lần nữa nhé?

Phương thức flat() của JavaScript Array

Bạn có bao giờ gặp phải một căn phòng bừa bộn với những hộp trong hộp không? Đó là điều tương tự như các mảng đệ quy trong JavaScript. Phương thức flat() giống như một robot làm sạch kỳ diệu mở hết tất cả các hộp và đặt mọi thứ vào một lớp ngăn nắp.

Hãy xem nó trong hành động:

const messyRoom = [1, 2, [3, 4, [5, 6]]];
const tidyRoom = messyRoom.flat(2);
console.log(tidyRoom); // Output: [1, 2, 3, 4, 5, 6]

Trong ví dụ này, messyRoom là mảng đệ quy của chúng ta. Phương thức flat(2) đi sâu hai cấp để làm phẳng mảng. Kết quả là tidyRoom, nơi tất cả các số đều ở cùng một cấp độ. Đẹp phải không?

Phương thức flatMap() của JavaScript Array

Bây giờ, hãy tưởng tượng robot làm sạch của chúng ta không chỉ dọn dẹp mà còn chuyển đổi các vật phẩm khi nó di chuyển. Đó là điều flatMap() làm! Nó giống như map() và flat() đã sinh ra một đứa con siêu năng lượng.

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

const pets = ["dog", "cat", "fish"];
const petSounds = pets.flatMap(pet => {
if (pet === "dog") return ["woof", "bark"];
if (pet === "cat") return ["meow"];
return [];
});
console.log(petSounds); // Output: ["woof", "bark", "meow"]

Trong đoạn mã này, chúng ta đang lấy mảng pets và tạo ra một mảng mới với các âm thanh của chúng. Chú ý rằng chó có hai âm thanh, nhưng chúng vẫn kết thúc trong cùng một mảng phẳng. Cá quá yên lặng để vào danh sách!

Phương thức sort() được cải tiến

Phương thức sort() đã nhận được một chút nâng cấp trong ECMAScript 2019. Nó bây giờ đảm bảo rằng các mảng sẽ được sắp xếp một cách ổn định. Điều đó có nghĩa là gì? Nếu hai mục được coi là bằng nhau bởi hàm sắp xếp, chúng sẽ giữ nguyên thứ tự ban đầu so với nhau.

Hãy xem một ví dụ:

const students = [
{name: "Alice", grade: "B"},
{name: "Bob", grade: "A"},
{name: "Charlie", grade: "B"},
{name: "David", grade: "A"}
];

students.sort((a, b) => a.grade.localeCompare(b.grade));
console.log(students);
/* Output:
[
{name: "Bob", grade: "A"},
{name: "David", grade: "A"},
{name: "Alice", grade: "B"},
{name: "Charlie", grade: "B"}
]
*/

Trong ví dụ này, chúng ta đang sắp xếp học sinh theo điểm số. Chú ý rằng Bob và David (cả hai đều có điểm A) giữ nguyên thứ tự ban đầu, và cũng như Alice và Charlie (cả hai đều có điểm B). Thứ tự sắp xếp ổn định này có thể rất quan trọng trong nhiều ứng dụng!

Phương thức Object.fromEntries

Bạn có bao giờ ước ao có thể biến một loạt các cặp khóa-giá trị thành một đối tượng không? Bây giờ bạn có thể làm điều đó với Object.fromEntries()! Nó giống như魔法, nhưng tốt hơn vì nó là JavaScript.

Hãy xem thử:

const entries = [
['name', 'Alice'],
['age', 25],
['city', 'Wonderland']
];

const person = Object.fromEntries(entries);
console.log(person);
// Output: { name: 'Alice', age: 25, city: 'Wonderland' }

Trong ví dụ này, chúng ta bắt đầu với một mảng các cặp khóa-giá trị. Object.fromEntries() chuyển đổi này thành một đối tượng mà mỗi cặp trở thành một thuộc tính. Đây là ngược lại với Object.entries(), mà chúng ta đã có từ lâu.

Gán biến tùy chọn trong khối catch

Xử lý lỗi đã trở nên mượt mà hơn với việc gán biến tùy chọn trong khối catch. Trước đây, chúng ta luôn phải chỉ định một tham số lỗi trong khối catch, ngay cả khi chúng ta không sử dụng nó. Bây giờ, chúng ta có thể bỏ qua nó nếu không cần.

Dưới đây là cách nó trông như thế nào:

// Trước ECMAScript 2019
try {
// Some code that might throw an error
} catch (error) {
console.log("An error occurred");
}

// Với ECMAScript 2019
try {
// Some code that might throw an error
} catch {
console.log("An error occurred");
}

Xem cách chúng ta đã loại bỏ phần (error) trong ví dụ thứ hai? Đó là gán biến tùy chọn trong khối catch đang hoạt động. Nó là một thay đổi nhỏ, nhưng nó có thể làm cho mã của chúng ta sạch sẽ hơn khi chúng ta không cần sử dụng đối tượng lỗi.

Phương thức JSON.stringify() được cải tiến

JSON.stringify() đã trở nên thông minh hơn trong ECMAScript 2019. Nó bây giờ xử lý một số ký tự Unicode tốt hơn, đảm bảo rằng JSON của chúng ta vẫn hợp lệ.

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

const obj = { name: "Pikachu\uD800" };
console.log(JSON.stringify(obj));
// Output: {"name":"Pikachu�"}

Trong trường hợp này, \uD800 là một bộ phận chưa ghép của một ký tự thay thế, có thể gây ra vấn đề trong một số bộ phân tích JSON. Phương thức JSON.stringify() mới thay thế nó bằng ký tự thay thế Unicode (�) để giữ cho JSON hợp lệ.

Phương thức toString() của hàm được cải tiến

Phương thức toString() cho hàm bây giờ trả về mã nguồn chính xác của hàm, bao gồm bất kỳ khoảng trống và nhận xét nào. Nó giống như việc nhận được một bản sao chính xác của hàm của bạn!

Hãy xem nó trong hành động:

function greet(name) {
// This is a greeting function
console.log(`Hello, ${name}!`);
}

console.log(greet.toString());
/* Output:
function greet(name) {
// This is a greeting function
console.log(`Hello, ${name}!`);
}
*/

Như bạn có thể thấy, đầu ra bao gồm nhận xét và giữ nguyên định dạng ban đầu. Điều này rất hữu ích cho việc gỡ lỗi hoặc tạo tài liệu!

Ký tự phân cách cho phép trong cácLiter string

ECMAScript 2019 mang đến một thay đổi nhỏ nhưng hữu ích: bạn bây giờ có thể sử dụng U+2028 (ký tự phân cách dòng) và U+2029 (ký tự phân cách đoạn văn) trong cácLiter string mà không cần escape.

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

const text = "Line 1 separator→\u2028←Line 2";
console.log(text);
// Output:
// Line 1
// Line 2

Thay đổi này làm cho việc làm việc với văn bản chứa các ký tự phân cách này dễ dàng hơn, đặc biệt là khi xử lý dữ liệu từ các nguồn khác.

Phương thức trimStart() và trimEnd() của JavaScript String

Cuối cùng, chúng ta có hai phương thức mới cho chuỗi: trimStart() và trimEnd(). Chúng giống như trim(), nhưng chúng chỉ loại bỏ khoảng trắng từ một đầu của chuỗi.

Hãy xem chúng trong hành động:

const messy = "   Hello, World!   ";
console.log(messy.trimStart()); // Output: "Hello, World!   "
console.log(messy.trimEnd());   // Output: "   Hello, World!"
console.log(messy.trim());      // Output: "Hello, World!"

Các phương thức này rất hữu ích khi bạn chỉ muốn làm sạch một bên của chuỗi. Chúng là别名 cho các phương thức cũ trimLeft() và trimRight(), nhưng với các tên mô tả rõ ràng hơn về điều chúng làm.

Kết luận

Và đây là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua các tính năng mới thú vị của ECMAScript 2019. Từ việc làm phẳng các mảng đến việc làm sạch các chuỗi, những bổ sung này làm cho JavaScript của chúng ta mạnh mẽ và dễ sử dụng hơn.

Nhớ rằng, cách tốt nhất để học là làm. Vậy, hãy đi thử nghiệm các tính năng mới này trong mã của bạn. Đừng sợ mắc lỗi - đó là cách chúng ta học và phát triển như những nhà lập trình viên.

Chúc các bạn lập trình vui vẻ và may mắn trong các cuộc phiêu lưu JavaScript của bạn!

Credits: Image by storyset