Những tính năng mới ECMAScript 2019 (ES10) trong JavaScript

Hữu ích trong debug, kiểm tra function runtime.

Ứng dụng của ES10 trong lập trình JavaScript

ECMAScript 2019 (ES10) mang lại nhiều tính năng giúp lập trình viên viết code ngắn gọn hơn, dễ đọc hơn và tối ưu hóa hiệu suất. Dưới đây là một số ứng dụng cụ thể của ES10 trong thực tế.

Giúp code ngắn gọn và dễ đọc hơn

Các phương thức mới như flatMap(), trimStart(), trimEnd(), và Optional Catch Binding giúp loại bỏ những đoạn code dài dòng không cần thiết, cải thiện khả năng đọc code.

Ứng dụng của flatMap() trong xử lý mảng phức tạp

• Khi làm việc với dữ liệu dạng mảng lồng nhau hoặc cần vừa map vừa làm phẳng dữ liệu, flatMap() giúp giảm số dòng code cần viết.
• Trước đây, lập trình viên phải dùng map() kết hợp với flat(), nhưng ES10 giúp xử lý gọn hơn.

Ví dụ:

const orders = [
  { id: 1, items: ["Laptop", "Mouse"] },
  { id: 2, items: ["Keyboard"] },
];

const items = orders.flatMap(order => order.items);
console.log(items);
// Output: ["Laptop", "Mouse", "Keyboard"]

Ứng dụng của trimStart() và trimEnd() trong xử lý chuỗi đầu vào

• Khi nhận dữ liệu từ người dùng hoặc API, khoảng trắng thừa ở đầu/cuối chuỗi có thể gây lỗi khi xử lý.
• ES10 giúp chuẩn hóa chuỗi nhập vào mà không cần dùng trim() toàn bộ.

Ví dụ:

const userInput = "   Hello, World!   ";
console.log(userInput.trimStart()); // "Hello, World!   "
console.log(userInput.trimEnd());   // "   Hello, World!"

Optional Catch Binding giúp viết code ngắn gọn hơn

• Trong các tình huống xử lý ngoại lệ mà không cần chi tiết lỗi, ES10 giúp loại bỏ biến lỗi không cần thiết.

Ví dụ:

try {
  JSON.parse("{ invalid JSON }");
} catch {
  console.log("Lỗi JSON không hợp lệ!");
}

Cải thiện hiệu suất xử lý dữ liệu JSON, Buffer, và Symbol

Một số cải tiến trong ES10 giúp xử lý dữ liệu hiệu quả hơn trong ứng dụng web và server-side.

Ứng dụng của Object.fromEntries() trong việc xử lý dữ liệu API

• Khi làm việc với API trả về mảng key-value, ES10 giúp chuyển đổi nó thành object nhanh chóng.

Ví dụ:

const entries = new Map([
  ["name", "Alice"],
  ["age", 25],
]);

const user = Object.fromEntries(entries);
console.log(user);
// Output: { name: "Alice", age: 25 }

Ứng dụng của Symbol.prototype.description trong debug và logging

• Trước ES10, việc truy xuất mô tả của Symbol khá bất tiện, nhưng giờ đây có thể dễ dàng lấy thông tin cho mục đích debug.

Ví dụ:

const sym = Symbol("ID của user");
console.log(sym.description); // Output: "ID của user"

Cải thiện hiệu suất JSON với Well-formed JSON.stringify()

• Trước ES10, khi JSON.stringify() gặp ký tự không hợp lệ, nó có thể tạo lỗi không mong muốn.
• ES10 giúp xử lý tốt hơn với các ký tự UTF-8 không hợp lệ.

Ví dụ:

console.log(JSON.stringify("\uD800")); // Output: '"\\ud800"' (thay vì lỗi)

Xử lý dữ liệu nhị phân với JSON ⬌ Buffer trong Node.js

• Khi làm việc với dữ liệu nhị phân trong Node.js, ES10 giúp chuyển đổi giữa Buffer và JSON dễ dàng hơn.

Ví dụ:

const buffer = Buffer.from("Hello");
const json = JSON.stringify(buffer);
console.log(json);
// Output: {"type":"Buffer","data":[72,101,108,108,111]}

Hỗ trợ trên trình duyệt hiện đại và Node.js

Tương thích tốt với trình duyệt và Node.js

• Các tính năng mới trong ES10 được hỗ trợ trên hầu hết các trình duyệt hiện đại như Chrome, Firefox, Edge, Safari.
• Các tính năng như flatMap(), Object.fromEntries(), và cải tiến JSON giúp tối ưu hiệu suất cho các ứng dụng web và server-side.

Ứng dụng trong dự án thực tế

• Frontend:
  • Xử lý chuỗi: trimStart(), trimEnd() giúp chuẩn hóa dữ liệu nhập từ form.
  • Xử lý mảng: flatMap() giúp tối ưu hóa dữ liệu trả về từ API.
• Backend (Node.js):
  • Xử lý JSON & Buffer: Cải tiến giúp xử lý dữ liệu nhị phân nhanh hơn.

So sánh ES10 với ES9 trong Javascript

ECMAScript 2019 (ES10) và ECMAScript 2018 (ES9) đều mang đến những cải tiến quan trọng cho JavaScript, nhưng chúng có những khác biệt rõ ràng về mục tiêu phát triển:

• ES9 (2018) tập trung vào cải tiến bất đồng bộ, xử lý Promise, và tối ưu hóa thao tác với object.
• ES10 (2019) hướng đến tối ưu hiệu suất, đơn giản hóa cú pháp, và nâng cao khả năng xử lý mảng, chuỗi, JSON.

Dưới đây là những so sánh chi tiết giữa ES9 và ES10.

Xử lý mảng: ES10 tối ưu hơn với flat() và flatMap()

ES9: Tập trung vào Rest/Spread Properties để thao tác object

• Rest Properties (...rest): Giúp lấy phần còn lại của object khi destructuring.
• Spread Properties (...spread): Giúp gộp nhiều object lại với nhau dễ dàng.

Ví dụ trong ES9:

const user = { id: 1, name: "Alice", age: 25 };
const { id, ...info } = user;

console.log(info); // Output: { name: "Alice", age: 25 }

ES10: Thêm flat() và flatMap() để xử lý mảng dễ dàng hơn

• flat(depth): Làm phẳng mảng lồng nhau.
• flatMap(callback): Kết hợp map() và flat() để xử lý dữ liệu nhanh hơn.

Ví dụ trong ES10:

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

const numbers = [1, 2, 3];
console.log(numbers.flatMap(n => [n, n * 2])); 
// Output: [1, 2, 2, 4, 3, 6]

• ES9 tập trung vào object (...rest, ...spread).
• ES10 giúp xử lý mảng tốt hơn với flat() và flatMap().

Bất đồng bộ: ES9 mạnh hơn với for-await-of, ES10 tối ưu hóa try...catch

ES9: Hỗ trợ for-await-of để xử lý bất đồng bộ tốt hơn

• Dùng với async/await để lặp qua các iterable object bất đồng bộ như API hoặc stream.

Ví dụ trong ES9:

async function fetchData(urls) {
  for await (const url of urls) {
    console.log(await fetch(url).then(res => res.json()));
  }
}

ES10: Đơn giản hóa try...catch với Optional Catch Binding

• Không cần khai báo biến lỗi khi dùng catch.
• Giúp code ngắn gọn hơn khi không cần xử lý lỗi chi tiết.

Ví dụ trong ES10:

try {
  JSON.parse("{ invalid JSON }");
} catch {
  console.log("Lỗi JSON không hợp lệ!");
}

• ES9 tối ưu bất đồng bộ với for-await-of.
• ES10 giúp try...catch gọn hơn với Optional Catch Binding.

Xử lý Promise: ES9 tập trung vào bất đồng bộ, ES10 thêm .finally()

ES9: Không có .finally(), chỉ có then() và catch()

• Nếu muốn thực hiện hành động sau khi Promise hoàn thành, cần gọi then() hoặc catch().

Ví dụ trong ES9:

fetch("https://api.example.com/data")
  .then(response => console.log("Success", response))
  .catch(error => console.log("Error", error));

fetch("https://api.example.com/data")
  .then(response => console.log("Success", response))
  .catch(error => console.log("Error", error))
  .finally(() => console.log("Request done!"));

const regex = /(?<=\$)\d+/;
console.log("$100".match(regex)); // Output: ["100"]

console.log(JSON.stringify("\uD800")); // Output: '"\\ud800"' (thay vì lỗi)