Phần mềm
Các tính năng độc đáo mang đến sự thú vị từ ES2021
Trong lĩnh vực công nghệ phần mềm, việc đáp ứng nhu cầu ngày càng cao của người dùng và phát triển ứng dụng hiệu quả yêu cầu các ngôn ngữ lập trình phải cung cấp các tính năng tiên tiến và thú vị. Trong trường hợp của ES2021, những vấn đề được đặt ra là: ngôn ngữ ngôn ngữ này có thể đáp ứng những yêu cầu mới và đáng chú ý của các nhà phát triển? Có những khó khăn gì trong việc tạo ra các ứng dụng phức tạp và linh hoạt?
ES2021 tự hào giới thiệu một loạt tính năng thú vị và cải tiến, giải đáp những vấn đề đã nêu ra trước đó. Với những tính năng mới này, nhà phát triển có thể tận dụng ES2021 để xây dựng các ứng dụng mạnh mẽ và linh hoạt hơn bao giờ hết.
ES2021 mang đến nhiều tính năng đáng chú ý, bao gồm việc cải thiện vòng lặp với “for-in” và “for-of”, hỗ trợ toán tử nullish coescing và chuỗi tùy chọn giúp làm giảm mã, cung cấp hỗ trợ cho cú pháp của Promise, và nhiều tính năng khác như mô-đun hóa, xử lý lỗi nâng cao và khả năng gọi đa hình. Tất cả những điều này giúp nhà phát triển xây dựng các ứng dụng JavaScript hiện đại, linh hoạt và dễ bảo trì.
Với những cải tiến và tính năng thú vị của ES2021, nhà phát triển có thể nâng cao hiệu suất và sáng tạo của ứng dụng, đồng thời đáp ứng được yêu cầu ngày càng cao của người dùng.
ES2021 (ECMAScript 2021)
ES2021, còn được gọi là ES12, được TC39 phát hành trong năm nay với các thông số kỹ thuật toàn diện. Nếu bạn chưa biết về TC39, hãy để tôi giới thiệu sơ qua về nó. Mỗi năm, một phiên bản JavaScript mới được phát hành với các tính năng mới và với tư cách là nhà phát triển giao diện người dùng, chúng tôi phải cập nhật các bản cập nhật này nhanh nhất có thể.
Toán tử gán có điều kiện
Vâng, các toán tử điều kiện quen thuộc của chúng ta ||, &&, ?? bây giờ có một số anh chị em mới: ||=, &&=, ??=. Bây giờ bạn có thể sử dụng chúng để kiểm tra điều kiện và gán giá trị trực tiếp. Hãy cùng xem qua một số ví dụ ngắn để hiểu rõ hơn về những “em nhỏ” này nhé:
|
/* “Or Or Equals” */
/* If x is falsy (false, 0…), perform the assignment on the right-hand side */
x ||= y;
x || (x = y);
/* “And And Equals” */
/* If x is truthy (true, 1…), perform the assignment on the right-hand side */
x &&= y;
x && (x = y);
/* “Q Q Equals” */
/* If x is undefined or null, perform the assignment on the right-hand side */
x ??= y;
x ?? (x = y);
|
Bạn cũng có thể xử lý thủ công các bài tập như thế này:
| const updateID = (user) => { // We can do it manually like this if (!user.id) user.id = 1; // Or use conditional assignment operators user.id ||= 1; } |
|
function setOpts(opts) {
opts.cat ??= ‘meow’;
opts.dog ??= ‘bow’;
}
const obj = {};
setOpts(obj);
console.log(obj); // { cat: ‘meow’, dog: ‘bow’ }
|
Sử dụng dấu gạch dưới để phân tách các số
Tính năng này khá thú vị vì nó làm cho các con số trong mã của chúng ta dễ đọc hơn nhiều. Mặc dù nó không có nhiều ý nghĩa đối với ứng dụng hoặc người dùng, nhưng nó hoàn toàn tuyệt vời đối với các nhà phát triển chúng tôi.
| const billion = 1000_000_000; console.log(billion); // 1000000000 |
Hãy phát triển hơn nữa với BigInt:
| const trillion = 1000_000_000_000n; console.log(trillion.toString()); // “1000000000000” |
Promise.any và AggregateError
Ồ, đây cũng là một tính năng thú vị. Promise.anygiải quyết ngay sau khi bất kỳ lời hứa được cung cấp giải quyết. Hãy lấy một ví dụ để hiểu rõ hơn. Chúng tôi sẽ có ba lời hứa với thời gian giải quyết khác nhau:
|
const p1 = new Promise((resolve, reject) => {
setTimeout(() => resolve(“A”), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => resolve(“B”), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => resolve(“C”), Math.floor(Math.random() * 1000));
});
|
Trong số ba lời hứa p1, p2, và p3, lời hứa nào giải quyết trước sẽ được xử lý bởi Promise.any:
| (async function () { const result = await Promise.any([p1, p2, p3]); console.log(result); // Prints “A”, “B”, or “C” })(); |
Tất nhiên, đôi khi lời hứa có thể trở thành lời hứa suông. Trong trường hợp không có lời hứa nào được giải quyết thành công, Promise.anyhãy ném tệp AggregateError. Nhiệm vụ của chúng ta là xử lý hậu quả của những lời hứa suông đó một cách đơn giản và hiệu quả:
|
const p = new Promise((resolve, reject) => reject());
try {
(async function () {
const result = await Promise.any([p]);
console.log(result);
})();
} catch (error) {
console.log(error.errors);
}
|
Phương thức replaceAll của String
Thay vì tìm kiếm và thay thế một chuỗi con trong một Chuỗi bằng cách sử dụng phương thức thay thế, bạn có thể sử dụng phương thức thay thế Tất cả để thay thế toàn bộ chuỗi con đó. Đây là một phương thức mạnh mẽ và dễ sử dụng. Tuy nhiên, để sử dụng phương thức này, hãy đảm bảo rằng bạn đã cấu hình đúng phiên bản ES2021 cho dự án của mình.
| ‘Hello World’.replaceAll(‘l’, ‘_’); // → ‘He_lo World’ ‘Hello World’.replace(/l/g, ‘_’); // → ‘He__o Wor_d’ ‘Hello World’.replaceAll(‘l’, ‘_’); // → ‘He__o Wor_d’ |
WeakRef và Finalizers
JavaScript có cơ chế “thu gom rác” tương tự như Java, C#, Python… Đây là một cơ chế tự động thu gom và giải phóng các đối tượng/tài nguyên mà chương trình không còn sử dụng. Tuy nhiên, trong các phiên bản JavaScript trước đây, hầu hết các tham chiếu được coi là “tham chiếu mạnh” (Tham chiếu mạnh), dẫn đến việc nhiều đối tượng không được giải phóng mặc dù chúng không còn được sử dụng trong thực tế.
Sự tồn tại của các tham chiếu (references) ảnh hưởng đến quyết định giải phóng tài nguyên trong chương trình. Khác với tham chiếu mạnh (Tham chiếu mạnh), tham chiếu yếu (Tham chiếu yếu) là một loại tham chiếu không bảo vệ đối tượng/tài nguyên khỏi việc thu gom rác.
WeakRef
Khi một đối tượng A có tham chiếu tới một đối tượng B, đối tượng B chỉ được giải nén khi và chỉ khi đối tượng A đã được giải nén hoàn toàn trước đó. Please view ví dụ sau:
|
// Global scope
const theA = {};
(() => {
// Private scope
const theB = { foo: ‘foo’ };
theA.obj = theB;
})();
|
Ở đây, đối tượng A nằm trong phạm vi toàn cục, dẫn đến việc đối tượng B không thể giải nén được do đối tượng A vẫn tồn tại. Đây là một tham chiếu mạnh từ A đến B. Để giải quyết vấn đề này, WeakRef đã ra đời để tạo ra một tham chiếu yếu tới một đối tượng. WeakRef sẽ tạo ra một lớp bao bọc để truy cập vào các đối tượng, đồng thời đảm bảo quá trình thu thập gom diễn ra một cách trơn tru. Điều này rất hữu ích khi chương trình chứa nhiều đối tượng có thể ảnh hưởng đến hiệu quả nếu không được giải nén đúng cách! Cách sử dụng WeakRef khá đơn giản, hãy xem ví dụ sau:
|
// Global scope
const theA = {};
(() => {
// Private scope
const theB = new WeakRef({ foo: ‘foo’ });
// Sử dụng từ khoá “new” để tạo một WeakRef mới
theA.obj = theB.defer();
// Sử dụng defer để truy cập vào đối tượng
})();
console.log(theA.obj); // Có thể trả về undefined
|
Đúng như vậy, đầu tiên, chúng ta tuyên bố một WeakRef với từ khóa “new” và truyền đối tượng mà bạn muốn tham khảo. Tiếp theo, chúng ta có thể truy cập vào đối tượng bằng chức năng trì hoãn. Nếu các đối tượng chưa được giải nén, hàm defer sẽ trả về đối tượng đó, ngược lại sẽ trả về không xác định. Hãy nhớ rằng quá trình thu gom rác có thể khác nhau trong các trình duyệt, vì vậy hãy cẩn thận khi sử dụng WeakRef.
Finalizers
FinalizationRegistry là một phần mở rộng của WeakRef, cho phép bạn đăng ký các hàm gọi lại (gọi lại) để thực thi khi một đối tượng có thể được giải nén. Finalizers giúp bạn nắm bắt việc giải nén các đối tượng. Bằng cách tận dụng Finalizers, trình lập trình viên có thể xử lý các vấn đề khác nhau liên quan đến việc giải phóng các đối tượng trên các trình duyệt khác nhau, như các chủ đề đã được cập nhật ở trên. Để sử dụng Finalizers, bạn có thể làm như sau:
|
console.log(‘script starting…’);
// Tạo một Finalizers mới với một callback, có thể có tham số “heldValue” hoặc không
const r = new FinalizationRegistry((heldValue) => {
console.log(heldValue);
});
(() => {
// Private scope
const obj = {};
r.register(obj, ‘Just got garbage-collected!’);
// Đăng ký một đối tượng vào Finalizers
})();
|
Với đoạn mã đơn giản như trên, khi đối tượng đối tượng được giải nén, Trình hoàn thiện sẽ gọi lại và trong dòng chữ “vừa được thu gom rác!”
ES2021 đưa ra một loạt tính năng thú vị và cải tiến cho ngôn ngữ lập trình JavaScript. Những tính năng mới này không chỉ giúp nhà phát triển xây dựng các ứng dụng mạnh mẽ hơn mà còn nâng cao tính năng hoạt động và hiệu quả của chúng.
Với việc cải thiện vòng lặp, hỗ trợ toán tử mới và cú pháp Promise, ES2021 giúp giảm bớt mã lặp lại và tối ưu hóa quy trình phát triển. Bên cạnh đó, tính năng mô-đun hóa, xử lý lỗi nâng cao và khả năng gọi đa hình cũng mang lại sự thuận tiện và tiện ích trong quá trình phát triển ứng dụng.
ES2021 đã có thể thực hiện một bước tiến đáng chú ý và sẽ là công cụ hữu ích cho các nhà phát triển trong việc tạo ra các ứng dụng JavaScript hiện đại, linh hoạt và mạnh mẽ hơn.
- Hướng dẫn đăng ký Shopee Mall một cách dễ dàng nhất - 24/09/2023
- Chiêu thức thành công vượt qua Sao quả tạ Shopee - 24/09/2023
- Shopee và Lazada: Đâu là nền tảng bán hàng tốt nhất? - 24/09/2023