Nội dung bài viết
Video học lập trình mỗi ngày
ES12 hay ES2021 chuẩn bị sắp phát hành những tính năng mới, cùng với đó là ES11 đã là một phiên bản cũ. Từng đó cũng đủ cho tôi và các bạn cảm thấy những phương thức, cách hoạt động thay đổi và nâng cấp một cách chóng mặt. Nhưng từ đó cũng sẽ đào thải những developers không theo kịp hoặc không tìm hiểu và phát huy những thế mạnh của những tính năng cho năm 2021 này.
Hẳn các bạn còn nhớ ở bài viết trước, tips javascript đã giới thiệu 9 tính năng của ES11 / ES2020. Và hàng năm, JavaScript sẽ cập nhật và bổ sung các tính năng mới và các tiêu chuẩn mới và ES2021 (ES12) cũng dự kiến sẽ được phát hành vào năm sau, vào giữa năm 2021. Các tính năng mới của mỗi năm trải qua bốn giai đoạn và giai đoạn thứ tư và giai đoạn cuối cùng.
Bài viết này sẽ giới thiệu các tính năng mới có liên quan trong proposals 4, điều này cũng có nghĩa là những tính năng mới này sẽ xuất hiện trong phiên bản tiếp theo. Cho nên chúng tôi sẽ update liên tục cho các bạn, vì vậy các bạn cứ yên tâm, việc của các bạn là lót dép hóng ở đây mà thôi.
ES2021 Features
- String.prototype.replaceAll
- Promise.any
- WeakRefs
- Logical Assignment Operator
- Numeric separator (Dấu phân cách số)
Trên đó là những tính năng đang được xem xét và có thể xuất hiện giữa năm 2021, nhưng không cần đến đó chúng ta mới có thể biết đến những khái niệm trên, vì hướng dẫn dưới đây sẽ giúp bạn đi trước một bước. Có một số bạn nếu chưa tìm hiểu về những tính năng ES6 thì có thể đọc trước khi xem xét tìm hiểu về bài viết này. Còn bây giờ thì lần lượt đi xem qua những tính năng trên.
ReplaceAll Method
Còn bạn nào đã từng bị một Error như thế này chưa? "replaceAll() is not a function javascript". Đó là vì trong javascript chưa có support chức năng này đâu. Cố sử dụng chi cho khổ.
Như mỗi devjs đã biết thì ai cũng đã từng sử dụng replace, tính năng này chỉ có thể thay thế ký tự mẫu đầu tiên được tìm thấy trong chuỗi cho trước. Chính vì thế chúng ta muốn thay thế tất cả những từ mà muốn thì còn cách sử dụng biểu thức chính quy là cách tốt nhất mà thôi. Tốt nhất cho dễ hình dung thì xem ví dụ là ổn.
Ví dụ:
let string = 'I like javascript,I like anonystick';
//replace
let replaceStr = string.replace('like','love')
console.log(replaceStr) // 'I love javascript,I like anonystick'
//replace với biểu thức chính quy
console.log(string.replace(/like/g,'love')) // 'I love javascript,I love anonystick'
replace chỉ có thể thay thế ngay từ đầu tiên mà nó tìm được, cho nên kết quả không làm ta hài lòng, vì vậy replaceAll mới được đề xuất.
ReplaceAll là trả về một chuỗi hoàn toàn mới, tất cả các ký tự đáp ứng các quy tắc phù hợp sẽ được thay thế, quy tắc thay thế có thể là một chuỗi hoặc một biểu thức chính quy.
//replaceAll
let replaceAllStr = string.replaceAll('like','love')
console.log(replaceAllStr) // 'I love javascript,I love anonystick'
Rất hay, một sự bổ sung cần thiết, khỏi loop khỏi liếc cho mệt :D
ES12 - Promise.any
Promise.any Tính năng này thì có lẽ năm 2019 ở một bài viết trước tips javascript đã đề cập tới rồi. Để diễn tả một cách dễ hiểu chúng ta sẽ xem xét những ví dụ dưới đây:
Ở ví dụ này thì ta thấy khi một promise bị từ chối, thì nó vẫn tiếp tục hoạt động cho đến khi nhận được một giá trị trả về thành công của bất kỳ một promise nào. Nghĩa là nó sẽ tìm đến một promise có giá trị trả về. Thì nó sẽ ngừng. Vậy nếu mà bị từ chối hết thì nó trả về gì, hãy xem ví dụ thứ 2 Ở ví dụ này, thì ta thấy [promise.any](promise.any) sẽ trả về một Error như trên.
Nhưng cá nhân tôi thấy như vậy không được hài lòng lắm. Điều tôi muốn nó trả về hết tất cả các lỗi. Và ở đây, bạn lưu ý rằng promise.any rất nhầm lẫn với promise.race. Bạn phải chú ý phân biệt, và tốt hơn hết bạn nên xem những ví dụ về promise.race, và xem sự khác nhau giữa promise.any và promise.race ở bài viết trước.
WeakRefs method
Đối với tính năng này, có lẽ không dành cho các bạn mới học javascript. Vì nó có liên quan quan đến cơ chế garbage collection mà chúng ta hay gọi thu gom rác ở javascript. Nói sơ qua một chút, khi chúng ta đặt một giá trị ở biến thì sử dụng const, let, var. Bạn cũng nên phân biệt cách sử dụng const, let, var như thế nào cho hợp lý. Tiếp, khi gán một giá trị thì garbage collection (GC) sẽ không bao giờ xoá khỏi bộ nhớ miễn là tham chiếu của nó vẫn tồn tại và có thể truy cập được. WeakRef chính là những Objects chứa các tham chiếu đến các đối tượng.
Khó hiểu phải không, vì tôi nói rồi, bạn mới học javascript thì có thế chưa hiểu được. Nhưng với những bạn đã nói rằng "Em học xong javascript rồi, giờ muốn học thêm back-end...". Thì những tính năng này dành cho bạn đấy. WeakRefs hữu ích trong nhiều trường hợp chẳng hạn như bạn đang sử dụng Map() chứa những cặp key/value đòi hỏi nhiều bộ nhớ. Và trong trường hợp này, điều thuận tiện nhất là giải phóng bộ nhớ bị chiếm bởi cặp key/value càng sớm càng tốt. Và hiện tại, bạn có thể dùng WeakMap () hoặc WeakSet () để sử dụng WeakRefs.
Còn đây là lời giải thích ngắn gọn của tôi. Khi bạn sử dụng WeakRefs trong ES2021 điều đó có nghĩa là bạn muốn xoá những biến khai báo sau khi sử dụng, để tốn khỏi bộ nhớ mà thôi.
Ví dụ
const callback = () => {
const aBigObj = new WeakRef({
name: "Anonystick.com"
});
console.log(aBigObj.deref().name);
}
(async function(){
await new Promise((resolve) => {
setTimeout(() => {
callback(); //Print "Anonystick.com"
resolve();
}, 2000);
});
await new Promise((resolve) => {
setTimeout(() => {
callback(); // Chưa chắc "Anonystick.com" is printed
resolve();
}, 5000);
});
})();
Theo tôi, thì đối với bộ nhớ đệm dữ liệu từ xa, đây có thể không phải là một ý tưởng hay, vì dữ liệu từ xa có thể bị xóa khỏi bộ nhớ một cách khó lường. Trong trường hợp này, tốt hơn là sử dụng bộ nhớ đệm như LRU. các bạn có thể tìm hiểu về LRU là gì?
ES12 - Logical Assignment Operator
Tính năng thì nó liên quan đến mấy cái toán tử như ??, || , && và một số toán tử khác, mà có lẽ bạn chưa bao giờ sử dụng tới như toán tử bitwise. Hãy xem những ví dụ sau:
//"Or Or Equals"
x ||= y;
x || (y = z);
// "And And Equals"
x &&= y;
x && (y = z);
// "QQ Equals"
x ??= y;
x ?? (y = z);
Hiểu như vậy
const updateID = user => {
// We can do this
if (!user.id) user.id = 1
// Or this
user.id = user.id || 1
// Or use logical assignment operator.
user.id ||= 1
}
Để hiểu hơn về tính năng này, tôi xin phép sẽ viết một bài cụ thể hơn vì nó liên quan đến những khái niệm như RHS và LHS. Hay còn gọi là right hand side và left hand side.
Numeric separator
Phần cuối của bài viết này, thì chúng ta nói đến Numeric separator (Dấu phân cách số). Một sự tiện lợi nhất định mà những ai đã sử dụng thư viện underscores quen rồi thì có lẽ đã biết về tính năng này.
Mục đích là tách các số ra cho dễ đọc hơn mà thôi. Và nếu có cũng tốt thì khỏi sử dụng underscores cho mệt.
const money = 1_000_000_000
//Tương tự như
const money = 1000000000
const totalFee = 1000.12_34
//Tương tự như
const totalFee = 1000.1234
Lời kết với ES2021
ES11 chưa qua ES12 đã tới. Khiếp quá, nhưng cũng nhìn nhận lại là nó giúp cho những người như chúng ta, những lập trình viên có thể giảm bớt thời gian, giảm bớt bugs theo thòi gian với những tính năng có thể là xuất hiện ở phiên bản tiếp theo, hoặc có thể là không.
Nhưng nếu bạn quan tâm thì Bạn có thể trải nghiệm trực tiếp các tính năng mới được giới thiệu trong bài viết này một cách vui vẻ trong phiên bản mới nhất của Google Chrome.
