Array.sort() có kết quả khác nhau giữa các trình duyệt
Khi bạn cần sort một array, bạn nghĩ ngay đến việc sẽ sử dụng callback như thế này sort((x, y) => x < y), tuy nhiên đây là kết quả từ Chrome và Firefox
Hàm callback chúng ta truyền vào phải return một trong ba giá trị 1, 0, -1, vì chúng ta đang return một giá trị boolean, nên sẽ tùy vào trình duyệt quyết định.
Sử dụng JSON.stringify với tham số
JSON.stringify cho phép ta truyền thêm một tham số thú 2 nữa, nó giống như một whitelist khi hàm này được thực thi (parse) mà chỉ có các giá trị trong whitelist mới được parse
Ngoài truyền vào một mảng, ta có thẻ truyền một function để thực hiện các chức năng nâng cao hơn như validate, replace, parse các tham số,...
Array.filter() không làm việc với Promise
Đôi khi chúng ta cần thực thiện mộ số xử lý ở các async trên các phần tử trong mảng, lặp qua các phần tử để xử lý data rồi filter các phần tử mong muốn.
Ví dụ: Kiểm tra xem user có quyền thực hiện một chức năng nào đó hay không, chúng ta cần loop qua tất cả các phần tử
Code trên sẽ chạy hoàn hảo, tuy nhiên trong hoàn cảnh khác, nếu là một hàm async thì sẽ như thế nào ?
Sai rồi, nó sẽ không chạy đúng, sửa lại chúng ta phải dùng map trước khi dùng dến filter
Nullish và toán tử OR
Ai là dev cũng biết tới OR
const foo = baz || "fallback"
Nếu bar = 0, thì foo = "fallback", nhưng bạn lại không muốn như thế, cho dù bar = 0 thì foo = bar (0 vẫn là giá trị hợp lệ) vậy hãy thử cái này
Console.table()
console.log(...) một object khó nhìn đối với bạn ?
Thử ngay với console.table(...) đi
The Promise constructor anti-pattern
Nếu bạn có một xử lý async function thì bản chất nó đã return một promise rồi, việc bạn return new Promise như bên dưới chẳng có tác dụng gì cả.
Chỉ cần return về hàm async đó là đủ (fetchThing là async function)
Catch await error
Đối với một Promist chúng ta dùng then/catch, còn với async/await thì dùng try/catch như thế này;
Nhưng thần kỳ là chúng ta có thể dùng .catch đối với await được (Thực tế thì await cũng chỉ là một cách viết từ Promise mà ra)
Optional chaining với function
Optional chaining trên functiondùng cũng giống như đối với object thôi các bạn ạ
Hay ví dụ một tình huống trong React như thế này
... <button onClick={onClick && (() => onClick(params))}> // With Optional chaning ... <button onClick={() => props?.onClick(params)}>