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

ECMAScript 2023 (ES14) là phiên bản mới nhất của JavaScript, mang đến nhiều cải tiến quan trọng giúp lập trình viên viết code hiệu quả, tối ưu hơn. Với sự phát triển không ngừng của JavaScript, ES14 tiếp tục nâng cao trải nghiệm lập trình bằng cách bổ sung các phương thức mới cho mảng và tập hợp dữ liệu, cải thiện hiệu suất xử lý chuỗi, đồng thời đơn giản hóa các thao tác trên đối tượng.

Những tính năng mới trong ES14 không chỉ giúp code trở nên dễ đọc, bảo trì hơn mà còn hỗ trợ tối ưu hóa hiệu suất, đặc biệt trong các ứng dụng web hiện đại. Bài viết này sẽ giới thiệu những tính năng quan trọng nhất của ES14, giúp bạn hiểu rõ và ứng dụng chúng một cách hiệu quả trong lập trình JavaScript.

ECMAScript 2023 (ES14) là gì?

ECMAScript 2023 (ES14) là phiên bản mới nhất của tiêu chuẩn ECMAScript, tiếp tục mở rộng và nâng cấp JavaScript với nhiều tính năng mạnh mẽ. Những cải tiến trong ES14 giúp ngôn ngữ này trở nên linh hoạt hơn, tối ưu hóa hiệu suất và giúp lập trình viên viết code dễ dàng hơn.

JavaScript ngày càng được sử dụng rộng rãi trong phát triển web, ứng dụng di động và backend. Vì vậy, việc cải thiện cú pháp, hiệu suất và khả năng xử lý dữ liệu là điều cần thiết để đáp ứng nhu cầu ngày càng cao của lập trình viên. ES14 mang đến một loạt tính năng đáng chú ý như: cải tiến trong xử lý mảng, hỗ trợ làm việc với số lớn, tối ưu hóa logic, và nâng cấp cách thức xử lý bất đồng bộ.

Với những cải tiến này, ES14 không chỉ giúp tối ưu hóa mã nguồn mà còn nâng cao trải nghiệm lập trình, giúp JavaScript tiếp tục duy trì vị thế là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay. Trong bài viết này, chúng ta sẽ cùng khám phá những tính năng mới của ES14 và cách chúng cải thiện quá trình phát triển phần mềm.

Các tính năng mới trong ES14 trong JavaScript

ECMAScript 2023 (ES14) mang đến nhiều cải tiến giúp lập trình viên thao tác với dữ liệu một cách dễ dàng và hiệu quả hơn. Dưới đây là những tính năng quan trọng nhất trong phiên bản này:

Cải tiến thao tác với mảng: toSorted(), toReversed(), toSpliced() và with()

Trước đây, khi làm việc với mảng trong JavaScript, các phương thức như sort(), reverse() hay splice() thường thay đổi trực tiếp mảng gốc. Điều này có thể gây ra lỗi ngoài ý muốn khi lập trình viên vô tình làm thay đổi dữ liệu gốc.

Trong ES14, các phương thức mới giúp thao tác với mảng một cách an toàn hơn mà không làm thay đổi mảng ban đầu:

toSorted(): Trả về một bản sao của mảng đã được sắp xếp mà không thay đổi mảng gốc.

const numbers = [3, 1, 4, 1, 5, 9];
const sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // [1, 1, 3, 4, 5, 9]
console.log(numbers); // [3, 1, 4, 1, 5, 9] (không thay đổi)

toReversed(): Trả về một bản sao của mảng đã được đảo ngược mà không thay đổi mảng gốc.

const letters = ["a", "b", "c"];
const reversedLetters = letters.toReversed();
console.log(reversedLetters); // ["c", "b", "a"]
console.log(letters); // ["a", "b", "c"] (không thay đổi)

toSpliced(): Trả về một bản sao của mảng với các phần tử bị xóa hoặc thay thế mà không làm thay đổi mảng gốc.

const fruits = ["apple", "banana", "cherry"];
const newFruits = fruits.toSpliced(1, 1, "orange");
console.log(newFruits); // ["apple", "orange", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry"] (không thay đổi)

with(): Trả về một bản sao của mảng với giá trị tại một vị trí cụ thể được thay đổi.

const colors = ["red", "green", "blue"];
const newColors = colors.with(1, "yellow");
console.log(newColors); // ["red", "yellow", "blue"]
console.log(colors); // ["red", "green", "blue"] (không thay đổi)

Ứng dụng thực tế: Những phương thức này giúp xử lý dữ liệu mảng một cách an toàn hơn, tránh thay đổi dữ liệu gốc và giảm thiểu lỗi.

Symbol.prototype.description trở thành thuộc tính truy cập

Trước đây, để lấy mô tả của một Symbol, lập trình viên phải sử dụng phương thức .description(). ES14 giúp truy cập dễ dàng hơn bằng cách biến nó thành một thuộc tính.

Ví dụ:

const mySymbol = Symbol("myDescription");
console.log(mySymbol.description); // "myDescription"

Ứng dụng: Hỗ trợ debug code, ghi log và làm việc với Symbol một cách tiện lợi hơn.

Phương thức mới cho Set: intersection(), union(), difference(), symmetricDifference()

Trong ES14, Set có thêm các phương thức mạnh mẽ giúp xử lý dữ liệu tập hợp dễ dàng hơn:

• intersection(setB): Trả về tập hợp chứa các phần tử có trong cả hai Set.
• union(setB): Hợp nhất hai Set thành một Set mới.
• difference(setB): Trả về tập hợp chứa các phần tử chỉ có trong Set đầu tiên mà không có trong Set thứ hai.
• symmetricDifference(setB): Trả về tập hợp chứa các phần tử chỉ xuất hiện trong một trong hai Set.

Ví dụ:

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

console.log(setA.intersection(setB)); // Set { 3, 4 }
console.log(setA.union(setB)); // Set { 1, 2, 3, 4, 5, 6 }
console.log(setA.difference(setB)); // Set { 1, 2 }
console.log(setA.symmetricDifference(setB)); // Set { 1, 2, 5, 6 }

Ứng dụng thực tế: Dễ dàng thao tác với tập hợp dữ liệu mà không cần dùng vòng lặp hay các thao tác phức tạp.

RegExp v Flag – Cải tiến biểu thức chính quy

ES14 giới thiệu cờ v giúp kiểm tra và so khớp biểu thức chính quy một cách linh hoạt hơn, đặc biệt khi làm việc với Unicode.

Ví dụ:

const regex = /\p{Script=Greek}/v;
console.log(regex.test("α")); // true (ký tự Hy Lạp)
console.log(regex.test("A")); // false (không phải ký tự Hy Lạp)

Ứng dụng: Hữu ích khi làm việc với đa ngôn ngữ, xử lý chuỗi văn bản phức tạp.

Object.groupBy() và Map.groupBy() – Nhóm dữ liệu dễ dàng hơn

• Object.groupBy(): Nhóm các phần tử của một mảng dựa trên một thuộc tính hoặc một hàm.
• Map.groupBy(): Tương tự nhưng trả về Map thay vì Object.

Ví dụ:

const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 25 },
];

const groupedByAge = Object.groupBy(people, (person) => person.age);
console.log(groupedByAge);
/*
{
  25: [{ name: "Alice", age: 25 }, { name: "Charlie", age: 25 }],
  30: [{ name: "Bob", age: 30 }]
}
*/

Ứng dụng thực tế: Hữu ích trong xử lý dữ liệu JSON, API và UI, giúp nhóm dữ liệu một cách đơn giản và hiệu quả.

Ứng dụng của ES14 trong JavaScript

ECMAScript 2023 (ES14) mang đến nhiều cải tiến giúp lập trình viên viết code dễ dàng hơn, nâng cao hiệu suất và tối ưu hóa quản lý dữ liệu. Dưới đây là những ứng dụng quan trọng của ES14 trong thực tế.

Giúp code dễ đọc và an toàn hơn với các phương thức mới cho Array và Set

Cải thiện thao tác với mảng mà không thay đổi dữ liệu gốc

Trước đây, khi sử dụng các phương thức như sort(), reverse(), hoặc splice(), mảng gốc sẽ bị thay đổi. Điều này dễ gây lỗi khi vô tình làm thay đổi dữ liệu gốc.

Với ES14, các phương thức mới như toSorted(), toReversed(), toSpliced(), và with() giúp đảm bảo dữ liệu gốc không bị thay đổi, giúp code an toàn hơn.

Ứng dụng thực tế: Khi làm việc với danh sách sản phẩm, danh sách người dùng hoặc bất kỳ mảng dữ liệu nào, bạn có thể thao tác mà không lo mất dữ liệu gốc.

Ví dụ:

const users = ["Alice", "Bob", "Charlie"];
const sortedUsers = users.toSorted();
console.log(sortedUsers); // ["Alice", "Bob", "Charlie"]
console.log(users); // ["Alice", "Bob", "Charlie"] (mảng gốc không thay đổi)

Quản lý tập hợp dữ liệu dễ dàng hơn với Set

Các phương thức mới như intersection(), union(), difference(), và symmetricDifference() giúp xử lý tập hợp dữ liệu một cách trực quan và dễ hiểu hơn.

Ứng dụng thực tế:

• Lọc dữ liệu: Tìm phần tử chung giữa hai tập hợp.
• Gộp dữ liệu: Kết hợp nhiều tập hợp mà không bị trùng lặp.
• So sánh danh sách: Kiểm tra sự khác biệt giữa hai danh sách dữ liệu.

Ví dụ:

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

console.log(setA.intersection(setB)); // Set { 3 }
console.log(setA.union(setB)); // Set { 1, 2, 3, 4, 5 }
console.log(setA.difference(setB)); // Set { 1, 2 }
console.log(setA.symmetricDifference(setB)); // Set { 1, 2, 4, 5 }

Cải thiện hiệu suất và quản lý dữ liệu tốt hơn với Object.groupBy() và Map.groupBy()

Trong các ứng dụng thực tế, lập trình viên thường cần nhóm dữ liệu theo một thuộc tính nào đó. Trước đây, việc này yêu cầu sử dụng reduce(), nhưng ES14 đã đơn giản hóa với Object.groupBy() và Map.groupBy().

Ứng dụng thực tế:

• Nhóm sản phẩm theo danh mục.
• Phân loại người dùng theo độ tuổi.
• Chia nhóm dữ liệu JSON từ API.

Ví dụ:

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
  { name: "Charlie", role: "admin" },
];

const groupedByRole = Object.groupBy(users, (user) => user.role);
console.log(groupedByRole);
/*
{
  admin: [{ name: "Alice", role: "admin" }, { name: "Charlie", role: "admin" }],
  user: [{ name: "Bob", role: "user" }]
}
*/

const regex = /\p{Script=Greek}/v;
console.log(regex.test("α")); // true (ký tự Hy Lạp)
console.log(regex.test("A")); // false (không phải ký tự Hy Lạp)

const customerSet1 = new Set(["Alice", "Bob", "Charlie"]);
const customerSet2 = new Set(["Charlie", "David", "Eve"]);

console.log(customerSet1.intersection(customerSet2)); // Set { "Charlie" }
console.log(customerSet1.union(customerSet2)); // Set { "Alice", "Bob", "Charlie", "David", "Eve" }
console.log(customerSet1.difference(customerSet2)); // Set { "Alice", "Bob" }
console.log(customerSet1.symmetricDifference(customerSet2)); // Set { "Alice", "Bob", "David", "Eve" }

const numbers = [10, 20, 30, 40, 50];
console.log(numbers.at(-1)); // 50
console.log(numbers.at(-2)); // 40

const arr = [3, 1, 4, 2];

console.log(arr.toSorted()); // [1, 2, 3, 4] (không làm thay đổi arr)
console.log(arr.toReversed()); // [2, 4, 1, 3] (không làm thay đổi arr)
console.log(arr.with(1, 99)); // [3, 99, 4, 2] (thay đổi phần tử thứ 2)

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

console.log(setA.intersection(setB)); // Set {3, 4}
console.log(setA.union(setB)); // Set {1, 2, 3, 4, 5, 6}
console.log(setA.difference(setB)); // Set {1, 2}
console.log(setA.symmetricDifference(setB)); // Set {1, 2, 5, 6}

const regex = /foo/d;
const match = regex.exec("foo foo");

console.log(match.indices[0]); // [0, 3]

const regex = /\p{Script=Greek}/v;
console.log(regex.test("α")); // true (ký tự Hy Lạp)
console.log(regex.test("A")); // false (chữ Latin)

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
  { name: "Charlie", role: "admin" }
];

const groupedByRole = users.reduce((acc, user) => {
  acc[user.role] = acc[user.role] || [];
  acc[user.role].push(user);
  return acc;
}, {});

console.log(groupedByRole);

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
  { name: "Charlie", role: "admin" }
];

const groupedByRole = Object.groupBy(users, (user) => user.role);
console.log(groupedByRole);