Quay trở lại năm 2015, ES6 mang tính cách mạng đã được giới thiệu với một loạt các tính năng thường được sử dụng trong phát triển web hiện đại.
Kể từ đó, ECMAScript đã phát triển đáng kể lên đến ES12, chính thức được gọi là ECMAScript 2021. ES12 đến vào tháng 6 năm 2021 với các khả năng, cải tiến mới và một số thay đổi về cú pháp.
Mọi nhà phát triển JavaScript muốn hoạt động tốt nhất nên tìm hiểu các tính năng mới nhất của ES12. Trong blog này, chúng tôi sẽ xem xét sáu tính năng hàng đầu với các ví dụ.
1. Promise.any ()
Promise.any () lấy một đối tượng Promise có thể lặp lại và giải quyết nếu bất kỳ lời hứa nào trong số đó được giải quyết. Điều này rất hữu ích khi chúng ta chỉ cần một lời hứa để thực hiện bất kể điều gì xảy ra với người khác.
Promise.all () là một phương thức tương tự đã tồn tại trong ES, nhưng nó chỉ giải quyết được nếu tất cả các lời hứa đã được giải quyết. Tương tự, Promise.race () được sử dụng để trả về lời hứa đầu tiên để kết thúc cho dù nó được giải quyết hay bị từ chối.
const err = new Promise((resolve, reject) => { reject(new Error('Error'));
});
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('First Promise'); }, 200);
});
const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('Second Promise'); }, 500);
});
Promise.any(\\\[err, p1, p2\\\]).then((res) => { console.log(res);
})
// output: First Promise Lớp AggregateError mới giúp chúng ta bắt các ngoại lệ của phương thức Promise.any (). Ví dụ: Nếu tất cả các lời hứa được chuyển đến Promise.any () đều bị từ chối, nó sẽ ném ra một đối tượng AggregateError.
const e1 = new Promise((resolve, reject) => { reject(new Error('Error 1'));
});
const e2 = new Promise((resolve, reject) => { reject(new Error('Error 2'));
});
Promise.any(\\\[e1, e2\\\])
.then((res) => { console.log(res);
})
.catch((err) => { console.log(err);
});
// output: "AggregateError: All promises were rejected"
Việc sử dụng Promise.any () trong phát triển khá đơn giản. Ví dụ: chúng tôi có thể gửi một số lệnh gọi API giống hệt nhau đến một máy chủ hoặc cơ sở dữ liệu và trả về dữ liệu bất kể cái nào đến trước.
2. WeakRef
Như tên cho thấy, WeakRef là một tham chiếu yếu đến một đối tượng khác. Một đối tượng được tham chiếu yếu sẽ không được lưu trong bộ nhớ miễn là nó không được tham chiếu mạnh.
JavaScript sử dụng thuật toán thu gom rác của nó để xóa các đối tượng trong bộ nhớ không còn được các đối tượng khác tham chiếu. Vì vậy, khi chúng ta tạo một đối tượng WeakRef, nó có thể được thu gom bất cứ lúc nào.
const student = { name: "John Doe", age: 20, address: { number: 365, street: "Flower street", },
};
const ref = new WeakRef(student);
ref.deref().age;
//output: 20
Chúng ta có thể sử dụng phương thức deref () để truy cập tham chiếu yếu nếu nó vẫn còn trong bộ nhớ.
Mặc dù WeakRef hữu ích để tiết kiệm một số bộ nhớ, các tác giả của WeakRef khuyên bạn nên tránh nó mọi lúc nếu có thể, lý do là hành vi phức tạp của bộ thu gom rác trong các công cụ JavaScript khác nhau.
3. Private class methods
Kể từ khi giới thiệu các lớp cho JavaScript trong ES6, các phương thức và thuộc tính đã được công khai theo mặc định. Mặc dù các nhà phát triển đã sử dụng tiền tố gạch dưới (_) khi khai báo các phương thức và thuộc tính riêng tư, nó chỉ là một quy ước.
Nó không ngăn bất kỳ ai truy cập các thuộc tính riêng tư từ bên ngoài lớp. Nhưng với ES12, JavaScript đã cho phép tạo ra các phương thức và thuộc tính riêng tư một cách nguyên bản. Để tạo một mã định danh, chúng ta phải đặt trước mã định danh bằng một hàm băm (#).
class Auth { #getToken() { return "12345678"; } isAuth() { return this.#getToken(); }
}
const auth = new Auth();
auth.getToken(); //output: auth.getToken is not a function
auth.isAuth(); //output: 12345678
Tương tự như các phương thức và thuộc tính riêng, chúng ta có thể xác định các trình truy cập riêng (getters và setters) bằng cách sử dụng cùng một cú pháp.
class Auth { get #getToken() { return localStorage.getItem("token"); } set #setToken(token) { localStorage.setItem("token", token); } set login(token) { this.#setToken = token; } get isAuth() { return this.#getToken; }
}
let token = "12345678";
const auth = new Auth();
auth.login = token;
auth.isAuth; //output: 12345678
4. Các toán tử gán logic
JavaScript đã hỗ trợ toán tử số học và phép gán bit. Từ ES12 trở đi, nó đã mở rộng hỗ trợ cho các toán tử gán logic.
Có ba toán tử gán logic mới:
Bài tập vô lý logic (?? =) Logic AND Assignment (&& =) Phép gán logic HOẶC (|| =) Mặc dù cú pháp trông tương tự như toán tử gán số học (+ =), các toán tử gán logic sẽ không phải lúc nào cũng thực hiện phép gán. Thay vào đó, phép gán sẽ chỉ xảy ra nếu điều kiện được xác định bởi toán tử logic được đáp ứng.
4.1 Phép gán vô hiệu logic
Toán tử gán nullish hợp lý (?? =) sẽ gán giá trị của toán hạng bên phải cho toán hạng bên trái chỉ khi toán hạng bên trái là null hoặc không xác định (nullish).
Thoạt nhìn, toán tử ?? = có thể hơi khó hiểu vì dạng mở rộng của toán tử này tương đương với x ?? (x = y).
const person = { name: "John" };
person.name ??= "User 1";
console.log(person.name);
// output: John
person.age ??= 18;
console.log(person.age);
// output: 18
Nếu chúng tôi sử dụng phiên bản ES cũ hơn, đoạn mã trên sẽ giống như sau:
const person = { name: "John" };
if (person.name === undefined || person.name === null) { person.name = "User 1";
}
console.log(person.name);
if (person.age === undefined || person.age === null) { person.age = 18;
}
console.log(person.age);
4.2 Phép gán logic AND
Toán tử gán logic AND (&& =) sẽ thực hiện phép gán nếu toán hạng bên trái là giá trị trung thực. Vì chúng ta vừa đề cập đến phép gán rỗng, nên việc sử dụng toán tử gán logic AND khá dễ hiểu.
const product = { stocks: 10 };
product.stocks &&= 20;
console.log(product.stocks);
// output: 20
product.exp &&= "12/31/2021";
console.log(product.exp);
// output: undefined
4.3 Phép gán logic HOẶC
Toán tử gán OR logic (|| =) tương tự như phép gán nullish, nhưng toán hạng bên trái phải sai để phép gán xảy ra. Một giá trị được coi là sai nếu nó là null, không xác định, false, 0 hoặc NaN.
const product = { stocks: 0, exp: "12/31/2021",
};
product.stocks ||= 10;
console.log(product.stocks);
// output: 10
product.exp ||= "01/31/2022";
console.log(product.exp);
// output: 12/31/2021
5. String.replaceAll()
Mục đích của phương thức ReplaceAll () là thay thế tất cả các chuỗi con bên trong một chuỗi. Trong các phiên bản ES trước, nếu chúng ta muốn làm điều này, chúng ta phải sử dụng phương thức Replace () .
Trong phương thức Replace (), chỉ lần xuất hiện đầu tiên sẽ được thay thế nếu bạn sử dụng một chuỗi làm đối số đầu tiên. Do đó, chúng tôi sẽ đặt đối số đầu tiên là một biểu thức chính quy để thay thế tất cả các lần xuất hiện.
let str = "hotdog dog".replace(new RegExp("dog", "g"), "cat");
console.log(str); //output: hotcat cat
Với ES12, chúng ta có thể sử dụng phương thức ReplaceAll () ngay lập tức mà không cần sử dụng biểu thức chính quy. Phương pháp này siêu đơn giản và an toàn.
let str = "hotdog dog".replaceAll("dog", "cat");
console.log(str); //output: hotcat cat
6. Numeric separators
Đây là một tính năng đơn giản nhưng hữu ích đã có sẵn trên các trình duyệt nhờ động cơ V8, nhưng giờ đây nó được tích hợp với ES12. Dấu phân cách số là dấu gạch dưới (_) giúp chúng ta phân cách các số lớn.
let billion = 1_000_000_000;
console.log(billion); //output: 1000000000
Trình duyệt sẽ bỏ qua các dấu gạch dưới. Dấu phân cách số giúp cuộc sống của các nhà phát triển dễ dàng hơn khi làm việc với số lượng lớn.
Kết luận
ECMAScript tiếp tục phát triển với việc giới thiệu các tính năng mới thú vị hàng năm. Phiên bản thứ 12 của ES đã đơn giản hóa các chức năng mã hóa thiết yếu với các tính năng nâng cao của nó.
Trong bài viết này, chúng tôi đã khám phá sáu tính năng hàng đầu của ES12 mà bạn nên tìm hiểu với tư cách là một nhà phát triển JavaScript. Tôi hy vọng rằng bạn tận dụng các tính năng này cho các dự án phát triển của mình.
Cảm ơn bạn đã đọc!
Syncfusion Essential JS 2 là bộ ứng dụng duy nhất bạn cần để xây dựng một ứng dụng. Nó chứa hơn 65 thành phần UI hiệu suất cao, nhẹ, mô-đun và đáp ứng trong một gói duy nhất. Tải xuống bản dùng thử miễn phí để đánh giá các điều khiển ngay hôm nay.
Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, bạn có thể liên hệ với chúng tôi thông qua các diễn đàn hỗ trợ , cổng hỗ trợ hoặc cổng phản hồi của chúng tôi . Chúng tôi luôn sẵn lòng hỗ trợ bạn!