Mẹo JavaScript hữu ích giúp bạn cải thiện hiệu quả phát triển của mình

Tram Ho

Là một nhà phát triển, bạn luôn tìm cách cải thiện kỹ năng và tăng hiệu quả của mình. Bài viết này chia sẻ 20 thủ thuật JavaScript hữu ích. Từ những cách đơn giản để cải thiện khả năng đọc đến các kỹ thuật nâng cao hơn, những mẹo này chắc chắn sẽ giúp ích cho dự án của bạn.

1. Dấu tách số

Khi làm việc với số lượng lớn, chúng có thể khó đọc và hiểu trong nháy mắt. Một cách dễ dàng để cải thiện khả năng đọc là sử dụng dấu gạch dưới làm dấu phân cách.

2. Người nghe sự kiện chỉ được thực hiện một lần

Đôi khi bạn muốn thêm một trình lắng nghe sự kiện vào một phần tử, nhưng chỉ thực hiện một lần. Bạn có thể sử dụng tùy chọn once để đạt được điều này.

3. Trình bao bọc biến console.log

Khi sử dụng console.log() , bạn có thể thấy cả tên biến và giá trị biến bằng cách đặt các đối số trong dấu ngoặc vuông. Điều này hữu ích để gỡ lỗi và hiểu mã tốt hơn.

4. Kiểm tra xem Caps Lock có đang Bật không

Bạn có thể phát hiện xem Caps Lock có đang bật hay không bằng cách sử dụng phương thức KeyboardEvent.getModifierState() . Điều này rất hữu ích để tạo các biểu mẫu đăng nhập hoặc ứng dụng trong đó trường hợp quan trọng là trường hợp.

5. Nhận giá trị tối thiểu/tối đa từ mảng

Để tìm giá trị nhỏ nhất hoặc lớn nhất trong một mảng, bạn có thể sử dụng các hàm Math.min( Math.min()Math.max() kết hợp với toán tử trải rộng ( ... ).

6. Nhận vị trí chuột

Bạn có thể lấy thông tin về tọa độ của vị trí chuột hiện tại bằng cách sử dụng các thuộc tính clientXclientY của đối tượng MouseEvent .

7. Sao chép vào Clipboard

Bạn có thể tạo chức năng “クリップボードにコピー” bằng API clipboard. Một ví dụ về cách thực hiện việc này sẽ là:

8. Giữ câu điều kiện ngắn gọn

Nếu bạn có một hàm chỉ thực thi khi một điều kiện là đúng, bạn có thể viết hàm đó ngắn gọn hơn bằng cách sử dụng ký hiệu tốc ký && . Ví dụ:

9. Tạo một bảng định dạng sẵn với console.table()

console.table() có thể được sử dụng để xuất dữ liệu ở định dạng bảng trong bảng điều khiển. Cú pháp như sau:

Đây là một ví dụ về cách sử dụng nó:

10. Chuyển chuỗi thành số

Bạn có thể nhanh chóng chuyển đổi chuỗi thành số bằng cách sử dụng toán tử cộng một ngôi ( + ). Ví dụ:

11. Mảng loại trừ

Bạn có thể sử dụng toán tử trải rộng và Set đối tượng để loại bỏ các bản sao khỏi mảng. thí dụ:

12. Loại trừ các giá trị giả khỏi mảng

Nếu bạn muốn loại trừ các giá trị giả ( undefined , null , NaN , v.v.) khỏi mảng, bạn có thể sử dụng phương thức filter() . thí dụ:

13. Tạo chuỗi truy vấn URL

Đối tượng URLSearchParams có thể được sử dụng để tạo chuỗi truy vấn URL từ một đối tượng. thí dụ:

14. Kiểm tra xem một phần tử có chứa trong khung nhìn hay không

Bạn có thể sử dụng phương thức getBoundingClientRect() và các thuộc tính window.innerWidthwindow.innerHeight để xem liệu một phần tử có được chứa trong khung nhìn hay không. thí dụ:

15. Chức năng bướm ga

Nếu bạn muốn giới hạn tần suất một hàm được gọi, bạn có thể tạo một hàm “ga” bằng cách sử dụng phương thức setTimeout() . thí dụ:

16. Array.includes() để kiểm tra nhanh tư cách thành viên

Array.includes() có thể được sử dụng để kiểm tra nhanh xem một phần tử có được chứa trong một mảng hay không. Ngắn gọn hơn phương thức indexOf() . thí dụ:

17. Nhận phần tử khớp đầu tiên với Array.find()

Array.find() có thể được sử dụng để lấy phần tử đầu tiên trong một mảng phù hợp với tiêu chí nhất định. thí dụ:

18. Lấy mảng giá trị đối tượng với Object.values()

Object.values() có thể được sử dụng để lấy một mảng các giá trị đối tượng. Hữu ích khi bạn cần thao tác với các giá trị của đối tượng như mảng. thí dụ:

19. Tính tổng một mảng với Array.reduce()

Array.reduce() có thể được sử dụng để giảm một mảng thành một giá trị duy nhất bằng cách áp dụng một hàm cho từng phần tử. Một ví dụ về cách tính tổng một mảng:

20. Truy cập thuộc tính dữ liệu tùy chỉnh của phần tử bằng thuộc tính dataset

Thuộc tính dataset có thể được sử dụng để truy cập các thuộc tính dữ liệu tùy chỉnh của phần tử ( data- data-* ). thí dụ:

Phần kết luận

Trong bài viết này, chúng tôi đã chia sẻ 20 mẹo JavaScript sẽ giúp bạn nâng cao hiệu quả phát triển của mình. Những mẹo này bao gồm:

  1. Sử dụng dấu gạch dưới làm dấu phân cách để cải thiện khả năng đọc số lượng lớn
  2. Thêm trình xử lý sự kiện chỉ chạy một lần
  3. Xem tên biến và giá trị bằng cách đặt đối số console.log trong dấu ngoặc vuông
  4. Kiểm tra xem Caps Lock có được bật hay không bằng cách sử dụng KeyboardEvent.getModifierState()
  5. Tìm giá trị tối thiểu hoặc tối đa trong mảng bằng cách sử dụng toán tử trải rộng và Math.min Math.min() , Math.max()
  6. Nhận vị trí chuột bằng thuộc tính clientXclientY của đối tượng MouseEvent
  7. Sao chép vào khay nhớ tạm bằng Clipboard API
  8. Sử dụng && ký để rút ngắn câu điều kiện
  9. In bảng ra bàn điều khiển bằng console.table()
  10. Chuyển đổi chuỗi thành số bằng toán tử cộng một ngôi
  11. Xóa các bản sao khỏi mảng bằng toán tử trải rộng và Set đối tượng
  12. Loại trừ các giá trị giả khỏi mảng bằng phương thức filter()
  13. Tạo chuỗi truy vấn URL bằng đối tượng URLSearchParams
  14. Sử dụng phương thức getBoundingClientRect() và các thuộc tính window.innerWidthwindow.innerHeight để kiểm tra xem phần tử có được đưa vào chế độ xem hay không
  15. Điều chỉnh một chức năng bằng cách sử dụng setTimeout()
  16. Array.includes() để kiểm tra nhanh tư cách thành viên
  17. Lấy phần tử phù hợp đầu tiên trong một mảng bằng cách sử dụng Array.find()
  18. Nhận một mảng các giá trị đối tượng bằng cách sử dụng Object.values()
  19. Tính tổng một mảng sử dụng Array.reduce()
  20. Truy cập thuộc tính dữ liệu tùy chỉnh của phần tử bằng thuộc tính dataset

Chúng tôi hy vọng những lời khuyên này sẽ giúp bạn cải thiện hiệu quả phát triển của mình và đưa các kỹ năng của bạn lên một tầm cao mới. Mã hóa vui vẻ!

Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới.

Cảm ơn rất nhiều. Hẹn gặp lại các bạn trong bài viết tiếp theo!

Nếu các bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách like và subscribe. Cảm ơn rất nhiều.

Giới thiệu

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo