Trong khi coding, bạn sẽ nhận thấy rằng có một số thứ bạn vấp phải và lặp đi lặp lại, và thông thường họ yêu cầu một giải pháp nhanh chóng. Tất cả điều này thậm chí không cần bạn cài đặt một thư viện để giải quyết nó. Đây là 25 giải pháp hàng đầu của tôi được thu thập trong nhiều năm.
Tìm hiểu thêm về khóa học Javascript tại Techmaster.
1. Gõ kiểm tra util
JavaScript không phải là một ngôn ngữ gõ mạnh và để có được giải pháp tốt nhất ,TypeScript là thứ mà tôi khuyên bạn nên sử dụng, nhưng đôi khi tất cả những gì bạn cần là một loại kiểm tra đơn giản mà JavaScript cho phép bạn thực hiện với từ khóa “ typeof ”.
Vấn đề với “ typeof ” là nếu bạn sử dụng nó cho một số primitives và function, nó hoạt động tốt nhưng đối với mảng và đối tượng, khó có thể biết được sự khác biệt vì cả hai đều được coi là “objects”
Javascript Type checker Code on Github
2. Kiểm tra trống
Đôi khi bạn chỉ cần biết nếu một cái gì đó trống và tùy thuộc vào những gì bạn đang kiểm tra, bạn cần sử dụng các phương thức khác nhau như kiểm tra độ dài, kích thước hoặc nếu nó chứa bất kỳ phần tử con nào. util này hợp nhất tất cả những điều đó cho phép bạn kiểm tra kích thước của Chuỗi, Đối tượng, Mảng, Bản đồ và Tập hợp.
Is Empty Checker Code on Github
3. Lấy mục cuối cùng trong danh sách
Các ngôn ngữ khác làm cho điều này trở thành một phương thức hoặc hàm mà bạn có thể gọi trên mảng, nhưng đối với JavaScript, bạn cần thực hiện một số công việc.
Last Item Getter Code on Github
4. Tạo số ngẫu nhiên với một phạm vi nhất định
Nếu đôi khi bạn cần tạo các số ngẫu nhiên nhưng bạn muốn các số này nằm trong một phạm vi, bạn cần tiện ích nhỏ này.
5. Tạo id ngẫu nhiên
Chỉ cần một số id? Không cần phải cài đặt thư viện mới trừ khi bạn cần một số trình tạo ID phức tạp hơn như UUID. Kiểm tra các tùy chọn này có thể đủ để bắt đầu. Bạn có thể bắt đầu từ thời điểm hiện tại tính bằng mili giây hoặc Số nguyên cụ thể và số gia tăng hoặc bạn có thể tạo ID từ các ký tự chữ và số.
Unique Id Generators Code on Github
6. Tạo một dãy số
Một điều tôi yêu thích trong Python là range và tôi thường cần nó khi coding bằng JavaScript. Đây là một triển khai đơn giản của nó, là hoàn hảo cho for…of vòng lặp và bất cứ khi nào bạn cần số trong một phạm vi cụ thể.
Range numbers Generator Code on Github
7. Định dạng chuỗi json và chuỗi bất kì
Tôi thấy mình sử dụng điều này rất nhiều khi làm việc với NodeJs để ghi các đối tượng vào bảng điều khiển. Các JSON.stringify nhận tham số thứ ba phải là một số khoảng trắng để thụt lề dòng. Tham số thứ hai có thể là null nhưng bạn có thể sử dụng nó để xử lý những thứ như hàm, Set, Map và Symbol mà phương thức JSON.stringify không xử lý hoặc đơn giản là bỏ qua.
Javascript Any Object Stringifier Code on Github
8. Thực hiện promise một cách tuần tự
Nếu bạn có một loạt các hàm không đồng bộ hoặc bình thường mà trả về một promise việc mà bạn cần thực hiện lần lượt, tiện ích này có thể giúp ích rất nhiều. Nó có một danh sách các hàm hoặc promises và giải quyết chúng một cách tuần tự bằng cách sử dụng mảng reduce phương pháp.
Async sequentializer Code on GitHub
9. Dữ liệu thăm dò
Nếu bạn cần tiếp tục kiểm tra các bản cập nhật dữ liệu nhưng không có sẵn WebSocket trong hệ thống của mình, thì việc sử dụng này cho phép bạn thực hiện điều đó. Điều này rất tốt cho các trường hợp bạn tải lên một tệp và bạn muốn tiếp tục kiểm tra xem tệp đã được xử lý xong chưa hoặc bạn đang làm việc với API của bên thứ ba như dropbox hoặc uber và bạn muốn tiếp tục kiểm tra xem quá trình đã hoàn tất hay chưa hoặc chuyến xe đã đến đích.
Polling function Code on GitHub
10. Chờ cho tất cả Promises được hoàn thành
Đây không hoàn toàn là một giải pháp code nhưng bạn nên biết về Promise API. Nó không ngừng phát triển và tôi đã từng có giải pháp code cho các phương pháp hiện có sẵn “allSettled”, “race” and “any” nhưng tôi rất vui khi chỉ cho bạn biết về chúng thay vì chia sẻ cách triển khai code của chúng.
11. Hoán đổi vị trí các giá trị mảng
ES6 giúp dễ dàng hoán đổi các giá trị từ các vị trí trong mảng. Đây không phải là một điều khó thực hiện nhưng nó là một điều tốt để biết về nó.
12. khóa đối tượng có điều kiện
Đây là thủ thuật yêu thích của tôi và tôi thấy mình đã sử dụng nó rất nhiều khi làm việc với các trạng thái cập nhật của React. Nó chỉ đơn giản là cho phép bạn chèn một khóa có điều kiện vào một đối tượng spread bằng cách đặt điều kiện trong dấu ngoặc đơn.
13. Sử dụng các biến làm khóa đối tượng
Một biến khác hữu ích dành cho các trường hợp khi bạn có một biến chuỗi và muốn sử dụng nó làm khóa trong đối tượng để đặt giá trị.
14. Kiểm tra khóa trong đối tượng
Cái này có thể có vấn đề nhưng đây là một mẹo hay để biết giúp bạn kiểm tra các khóa đối tượng.
15. Loại bỏ các bản sao của mảng
Thông thường có giá trị trùng lặp trong một mảng mà bạn có thể loại bỏ bằng Set cấu trúc dữ liệu. Nó hoạt động tốt với nhiều kiểu dữ liệu và tập hợp, có một cách khác để kiểm tra sự cân bằng và nó giúp ích rất nhiều. Đối với các trường hợp, bạn có thể có các trường hợp hoặc đối tượng khác nhau, bạn vẫn có thể sử dụng Set để theo dõi một thứ cụ thể và lọc ra các đối tượng trùng lặp.
16. Thực hiện “break” và “continue” trong Array forEach
Tôi thực sự thích sử dụng mảng “.forEach” nhưng đôi khi tôi cần thoát khỏi sớm hoặc tiếp tục với vòng lặp tiếp theo và không muốn sử dụng vòng lặp for… cho nó. Bạn có thể tái tạo câu lệnh hành vi “continue” với return sớm nhưng nếu bạn muốn sao chép hành vi “break” bạn cần sử dụng mảng “.some” thay vào đó.
17. Destructuring với tên bí danh và giá trị mặc định
Destructuring là một trong những tính năng JavaScript tốt nhất và điều thú vị là bạn có thể đặt bí danh bằng cách sử dụng "dấu hai chấm" và các giá trị mặc định bằng cách sử dụng dấu "bằng" cho các thuộc tính.
18. Liên kết tùy chọn và liên kết vô hiệu
Một vài tính năng JavaScript tuyệt vời và rất được mong đợi mà bạn phải bắt đầu sử dụng ngay bây giờ để giải quyết các vụ hack thường được sử dụng khi cần kiểm tra sâu thuộc tính đối tượng và xử lý các giá trị null và undefined.
19. Kế thừa lớp với hàm
Tôi luôn nói với mọi người, JavaScript classes chỉ là constructor functions và các nguyên mẫu. Không phải là một khái niệm thực như trong Java. Một cách để chứng minh điều đó là chỉ sử dụng một hàm khởi tạo để mở rộng một lớp. Nó rất hữu ích cho những thứ riêng tư mà trong lớp là lạ với toàn bộ “#” và nó biên dịch thành ít code hơn khi được sử dụng với babel hoặc WebPack.
20. Kế thừa hàm khởi tạo
Vấn đề với lớp là bạn chỉ có thể mở rộng một lớp khác. Với hàm khởi tạo, bạn có thể soạn một hàm bằng cách sử dụng nhiều hàm tạo khác, làm cho nó linh hoạt hơn nhiều khi làm việc với nó. Bạn làm điều đó bằng cách sử dụng phương pháp .apply hoặc là .call của hàm nguyên mẫu. Bạn thậm chí có thể mở rộng chỉ các phần của hàm miễn nó là một đối tượng.
21. Vòng lặp bất kì
Đôi khi bạn chỉ muốn lặp lại bất cứ thứ gì, Set, Map, Object, Array, String, v.v., miễn là nó có thể lặp được. Tiện ích hàm forEach rất đơn giản này cho phép bạn thực hiện điều đó. Nếu lệnh gọi lại trả về true, nó sẽ thoát ra khỏi vòng lặp.
ForEach Iterables Code on Github
22. Đặt đối số hàm là bắt buộc
Đây là một cách tuyệt vời để đảm bảo rằng một hàm được gọi với những gì nó cần để thực hiện công việc. Bạn có thể sử dụng tính năng của giá trị đối số mặc định để gọi một hàm đơn giản là tạo ra một lỗi. Nếu bạn gọi hàm với những gì nó cần, giá trị sẽ thay thế hàm đó và không có gì xảy ra. Gọi với undefined cũng có tác dụng tương tự.
required Argument Code on Github
23. Tạo mô-đun hoặc đơn lẻ
Đôi khi, bạn cần khởi tạo một thứ gì đó khi tải, thiết lập nó với mọi thứ nó cần và sau đó sử dụng nó ở mọi nơi trong ứng dụng mà không cần phải làm bất cứ điều gì với nó. Bạn có thể sử dụng sức mạnh của IIFE function để làm điều đó và nó sẽ thay đổi cuộc sống của bạn. Đây là mô-đun rất hữu ích để cô lập mọi thứ và chỉ hiển thị những gì bạn sẽ cần tương tác.
24. Sao chép deep đối tượng
Đây là một số thứ mà các nhà phát triển thường cài đặt một số thư viện như “lodash” để có thể thực hiện điều này, nhưng nó thực sự dễ dàng để thực hiện trong JavaScript đơn thuần. Nó là một hàm đệ quy đơn giản, miễn nó là một đối tượng, khởi tạo lại nó như một bản sao bằng cách sử dụng hàm khởi tạo “constructor”, sau đó lặp lại quá trình cho tất cả các thuộc tính.
25. Đóng băng deep đối tượng
Nếu bạn yêu thích tính bất biến, đây là một tiện ích phải có, nhưng tính bất biến là một chủ đề lớn, vì vậy hãy chắc chắn theo dõi Before Semicolon ngay trên Medium và Youtube để chúng tôi giải quyết những điều này.
For the code of all of these, please check this repo.
Bài viết gốc tại đây
Bình luận