Tìm hiểu các tính năng tuyệt vời được cung cấp bởi bản cập nhật ECMAScript 2021
ECMAScript 2021 (ấn bản thứ 12) hiện đã có sẵn và đi kèm với các tính năng và cải tiến cú pháp mới. Các thông số kỹ thuật đã được hoàn thiện bởi ECMA International vào ngày 22 tháng 6 năm 2021. Những cải tiến này đã được thực hiện để làm cho JavaScript mạnh mẽ hơn và giúp các nhà phát triển hoàn thành nhiệm vụ của họ một cách dễ dàng.
Tôi sẽ trình bày chi tiết 5 tính năng hàng đầu được cung cấp bởi ECMAScript 2021 để bạn có thể bắt đầu sử dụng chúng trong các dự án của mình và cải thiện trải nghiệm của bạn trong JavaScript. Người mới bắt đầu và các nhà phát triển có kinh nghiệm có thể được hưởng lợi từ bài viết này.
5 tính năng JavaScript hàng đầu được cung cấp bởi bản cập nhật ECMAScript 2021
- Dấu phân tách số
- String.prototype.replaceAll
- Promise.any () và AggregateError
- Toán tử chỉ định logic
- Phương thức lớp riêng và trình truy cập
1. Dấu phân cách số
Các dấu phân cách số cho phép bạn thêm dấu gạch dưới giữa các chữ số trong các số theo nghĩa đen, điều này làm cho chúng dễ đọc hơn. Các dấu gạch dưới này sẽ tự động bị loại bỏ khi tệp được phân tích cú pháp. Tham khảo đoạn mã sau để hiểu cách bạn có thể sử dụng dấu phân tách số.
// Decimal integer literal with digits grouped by thousand.
let n1 = 1_000_000_000;
console.log(n1); // This will print: 1000000000
// Decimal literal with digits grouped by thousand.
let n2 = 1_000_000_000.150_200
console.log(n2); // This will print: 1000000000.1502
// Hexadecimal integer literal with digits grouped by byte.
let n3 = 0x95_65_98_FA_A9
console.log(n3); // This will print: 641654651561
// BigInt literal with digits grouped by thousand.
let n4 = 155_326_458_156_248_168_514n
console.log(n4); // This will print: 155326458156248168514n2. String.prototype.replaceAll
Hàm replaceAll () trên nguyên mẫu Chuỗi cho phép thay thế tất cả các phiên bản của chuỗi con mà không cần sử dụng regex. Nếu thereplace () được sử dụng trên một chuỗi, nó chỉ thay thế phiên bản đầu tiên của giá trị đó. Mặt khác, replaceAll () cung cấp chức năng thay thế tất cả các trường hợp của giá trị đó. Tham khảo đoạn mã sau để hiểu cách bạn có thể sử dụng replaceAll ().
// Declare a variable and store some value.
const orgStr = 'JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm.';
// To replace single instance, use replace().
let newStr = orgStr.replace('JavaScript', 'TypeScript');
console.log(newStr);
// To replace all instances, use replaceAll().
let newStr2 = orgStr.replaceAll('JavaScript', 'TypeScript');
console.log(newStr2);3. Promise.any () và AggregateError
Promise.any hoàn toàn ngược lại với Promise.all (). Promise.any () sẽ được kích hoạt nếu bất kỳ promise nào được giải quyết. Mặt khác, Promise.all () sẽ đợi cho đến khi tất cả các lời hứa được giải quyết. Sau đây là sự khác biệt trong any (), all () và allSettled ().
- any () - Điều này sẽ thực hiện nếu ít nhất một lời hứa được giải quyết và sẽ từ chối nếu tất cả lời hứa bị từ chối.
- all () - Điều này sẽ thực thi nếu tất cả các lời hứa được giải quyết và sẽ từ chối nếu ít nhất một promise bị từ chối.
- allSettled () - Điều này sẽ thực thi nếu tất cả các promise đã được giải quyết hoặc bị từ chối.
Tham khảo đoạn code sau để hiểu cách bạn có thể sử dụng Promise.any ().
// Create a Promise.
const promise1 = new Promise((resolve, reject) => {
// After 2 seconds resolve the first promise.
setTimeout(() => resolve("The first promise has been resolved."), 2000);
});
// Create a Promise.
const promise2 = new Promise((resolve, reject) => {
// After 1 second resolve the second promise.
setTimeout(() => resolve("The second promise has been resolved."), 1000);
});
// Create a Promise.
const promise3 = new Promise((resolve, reject) => {
// After 3 seconds resolve the third promise.
setTimeout(() => resolve("The third promise has been resolved."), 3000);
});
(async function () {
const data = await Promise.any([promise1, promise2, promise3]);
// Print the data returned from the first resolved Promise.
console.log(data);
// The above will print: The second promise has been resolved.
})();
Nếu tất cả các promise bị từ chối, thì một Ngoại lệ AggregateError sẽ được ném ra. Tham khảo đoạn mã sau để hiểu cách bạn có thể xử lý ngoại lệ.
// Create a Promise.
const promise1 = new Promise((resolve, reject) => {
// After 1 second reject the first promise.
setTimeout(() => reject("The first promise has been rejected."), 1000);
});
// Create a Promise.
const promise2 = new Promise((resolve, reject) => {
// After 500 miliseconds reject the second promise.
setTimeout(() => reject("The second promise has been rejected."), 500);
});
// Try executing the Promises.
(async function () {
try {
const data = await Promise.any([promise1, promise2]);
console.log(data);
} catch (error) {
// If all Promises gets rejected, then this try-catch block will handle
// the aggregate errors.
console.log("Error: ", error);
}
})();4. Các toán tử chỉ định logic
Ba toán tử gán logic đã được giới thiệu trong bản cập nhật ECMAScript 2021. Chúng cung cấp sự kết hợp của các toán tử logic và biểu thức gán.
- Toán tử gán logic HOẶC || =
- Toán tử gán logic AND && =
- Toán tử gán liên kết Nullish ?? =
4.1. Toán tử gán logic OR
Toán tử gán OR logic || = chấp nhận hai toán hạng và gán toán hạng bên phải cho toán hạng bên trái nếu toán hạng bên trái là sai. Tham khảo đoạn mã sau để tìm hiểu cách bạn có thể sử dụng toán tử gán OR logic.
// In the example, the ||= will check if the songsCount is false (0).
// If false, then the right value will be assigned to the left variable.
let myPlaylist = {songsCount: 0, songs:[]};
myPlaylist.songsCount ||= 100;
console.log(myPlaylist); // This will print: {songsCount: 100, songs: Array(0)}Toán tử gán OR logic ngắn mạch. Toán tử || = này tương đương với câu lệnh sau sử dụng toán tử OR logic.
a || (a = b)4.2. Toán tử gán logic AND
Toán tử gán logic && = chỉ gán toán hạng bên phải cho toán hạng bên trái nếu toán hạng bên trái là true. Tham khảo đoạn mã sau để tìm hiểu cách bạn có thể sử dụng toán tử gán logic AND.
// In the example, the &&= will check if the filesCount is true.
// If true, then the right value will be assigned to the left variable.
let myFiles = {filesCount: 100, files:[]};
myFiles.filesCount &&= 5;
console.log(myFiles); // This will print: {filesCount: 5, files: Array(0)}Toán tử gán logic AND cũng ngắn mạch. Toán tử && = này tương đương với câu lệnh sau sử dụng toán tử logic AND.
a && (a = b)4.3. Toán tử gán liên kết Nullish
Toán tử gán kết hợp nullish ?? = chỉ gán toán hạng bên phải cho toán hạng bên trái nếu toán hạng bên trái là null hoặc không xác định. Tham khảo đoạn mã sau để tìm hiểu cách bạn có thể sử dụng toán tử gán kết hợp nullish.
// In the example, the ??= will check if the lastname is null or undefined.
// If null or undefined, then the right value will be assigned to the left variable.
let userDetails = {firstname: 'Katina', age: 24}
userDetails.lastname ??= 'Dawson';
console.log(userDetails); // This will print: {firstname: 'Katina', age: 24, lastname: 'Dawson'}Toán tử gán liên kết vô hiệu cũng ngắn mạch. Toán tử này ?? = tương đương với câu lệnh sau sử dụng toán tử kết hợp nullish.
a ?? (a = b)5. Phương pháp lớp riêng và trình truy cập
Các phương thức và thuộc tính của lớp là công khai theo mặc định, nhưng các phương thức và thuộc tính private có thể được tạo bằng cách sử dụng tiền tố băm #. Việc đóng gói quyền riêng tư đã được thực thi từ bản cập nhật ECMAScript 2021. Các phương thức và thuộc tính private này chỉ có thể được truy cập từ bên trong lớp. Tham khảo đoạn mã sau để tìm hiểu cách bạn có thể sử dụng các phương pháp riêng tư.
// Let's create a class named User.
class User {
constructor() {}
// The private methods can be created by prepending '#' before
// the method name.
#generateAPIKey() {
return "d8cf946093107898cb64963ab34be6b7e22662179a8ea48ca5603f8216748767";
}
getAPIKey() {
// The private methods can be accessed by using '#' before
// the method name.
return this.#generateAPIKey();
}
}
const user = new User();
const userAPIKey = user.getAPIKey();
console.log(userAPIKey); // This will print: d8cf946093107898cb64963ab34be6b7e22662179a8ea48ca5603f8216748767Các accessor tư nhân là - Getters và Setters riêng tư. Getter cho phép bạn lấy giá trị của một thuộc tính lớp và Setter cho phép bạn gán giá trị cho một thuộc tính lớp. Bạn có thể xác định một getter riêng tư bằng cách sử dụng một hash # tiền tố.
get #newAccountPassword() {}Tương tự, bạn có thể xác định bộ cài đặt riêng bằng cách sử dụng tiền tố băm #.
set #generateAccountPassword(newPassword) {}Tham khảo đoạn code sau để tìm hiểu cách bạn có thể sử dụng Getters và Setters riêng.
// Let's create a class named Str.
class Str {
// The private attributes can be created by prepending '#'
// before the attribute name.
#uniqueStr;
constructor() {}
// A private Setters can be created by prepending '#' before
// the Setter name.
set #generateUniqueStringByCustomLength(length = 24) {
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let randomStr = "";
for (let i = 0; i < length; i++) {
const randomNum = Math.floor(Math.random() * characters.length);
randomStr += characters[randomNum];
}
this.#uniqueStr = randomStr;
}
// Public Setter
set setRandomString(length) {
this.#generateUniqueStringByCustomLength = length;
}
// A private getter can be created by prepending '#' before
// the Getter name.
get #fetchUniqueString() {
return this.#uniqueStr;
}
// Public Getter
get getRandomString() {
return this.#fetchUniqueString;
}
}
const str = new Str();
// Calling a public Setter which will then access the private Setter
// within the class.
str.setRandomString = 20;
// Calling a public Getter which will then access the private Getter
// withing the class.
const uniqueStr = str.getRandomString;
console.log(uniqueStr); // This will print a random string everytime you execute the Getter after the Setter.Kudos! Bạn đã hoàn thành việc tìm hiểu các tính năng được cung cấp bởi bản cập nhật JavaScript ES12 (ECMAScript 2021). Bây giờ bạn có thể tiếp tục và bắt đầu triển khai các tính năng trên cho các dự án hiện tại hoặc sắp tới của bạn.
Bài viết gốc tại đây.
Hiện tại khóa học Web Frontend + React.js tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Với cả hai hình thức là đào tạo Offline và học trực tuyến có tương tác. Và vẫn đảm bảo việc làm cho học viên tốt nghiệp đối với cả hai hình thức đào tạo.
Chi tiết khóa học: https://frontend.techmaster.vn/.
Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).
Bình luận