12 thủ thuật vô cùng hữu ích mà lập trình viên JavaScript cần biết

Trong bài viết này, tôi sẽ chia sẻ 12 Thủ thuật cực kỳ hữu ích cho JavaScript. Những thủ thuật này sẽ giúp bạn giảm số lượng mã cũng như làm cho mã chạy tối ưu hơn.

Chuyển đổi kiểu dữ liệu thành boolean bằng toán tử

Đôi khi chúng ta cần kiểm tra xem một số biến có tồn tại hoặc nó có giá trị hợp lệ hay không. Để xác nhận như vậy, bạn có thể sử dụng !! (toán tử phủ định kép). Nó sẽ tự động chuyển đổi bất kỳ kiểu dữ liệu nào trở lại boolean và biến này sẽ chỉ trả về false nếu nó có các giá trị như: 0, null, “”, undefined hoặc NaN. Nếu không nó sẽ trở lại thật. Để hiểu rõ hơn về cách nó hoạt động, hãy xem ví dụ đơn giản sau:

Trong ví dụ trên, nếu account.cash có giá trị lớn hơn sau đó account.hasMoney sẽ có giá trị như thật.

Chuyển đổi kiểu dữ liệu thành số bằng toán tử

Thủ thuật này rất hay và dễ thực hiện, nhưng nó chỉ hoạt động với các chuỗi số, nếu không nó sẽ trả về NaN (Không phải là Số). Hãy xem ví dụ về javascript bên dưới:

Câu điều kiện rút gọn

Nếu bạn thấy một đoạn mã như thế này:

Bạn có thể rút ngắn nó bằng cách kết hợp một biến (được xác thực) và một hàm bằng cách sử dụng && (nhà điều hành ) giữa. Ví dụ: đoạn mã trên có thể ngắn gọn trong một dòng:

Bạn có thể làm tương tự để kiểm tra xem một số thuộc tính hoặc chức năng có tồn tại trong đối tượng hay không. Tương tự như mã bên dưới:

Mình nghĩ bạn cần xem =>  Trình quay số tự động giúp nâng cấp tổng đài doanh nghiệp hiệu quả

Đặt các giá trị mặc định bằng cách sử dụng dấu || nhà điều hành

Ngày nay trong ES6, tham số mặc định được hỗ trợ. Trong trường hợp bạn muốn mô phỏng tính năng này trên các trình duyệt cũ hơn, bạn có thể sử dụng || (Toán tử OR) bằng cách chèn giá trị mặc định làm tham số thứ hai để sử dụng. Nếu tham số đầu tiên trả về false thì tham số thứ hai sẽ được sử dụng làm giá trị mặc định. Xem ví dụ sau:

Cache array.length trong vòng lặp

Thủ thuật này rất đơn giản và có tác động lớn đến hiệu suất khi xử lý các mảng lớn trong vòng lặp. Thông thường mọi người sử dụng vòng lặp for như vậy để duyệt qua mảng:

Không thành vấn đề nếu bạn chỉ làm việc với các mảng nhỏ. Nhưng nếu bạn xử lý các mảng lớn, mã này sẽ tính toán lại kích thước của mảng sau mỗi lần lặp và sẽ gây ra một chút độ trễ. Để tránh điều này, bạn có thể lưu vào bộ nhớ cache array.length trong một biến để sử dụng nó thay vì gọi array.length trong mỗi lần lặp lại:

Để làm cho nó trông gọn gàng hơn, chỉ cần viết lại nó như sau:

Xác định các thuộc tính trong một đối tượng

Thủ thuật này cực kỳ hữu ích khi bạn cần kiểm tra xem một số thuộc tính có tồn tại hay không và nó giúp tránh chạy các chức năng hoặc thuộc tính không xác định. Nếu bạn định viết mã chạy trên nhiều trình duyệt thì bạn cũng có thể sử dụng kỹ thuật này. Ví dụ: hãy tưởng tượng rằng bạn cần viết mã tương thích với IE6 và bạn muốn sử dụng document.querySelector () để lấy một vài phần tử theo ID của chúng. Tuy nhiên, trong trình duyệt này, chức năng đó không tồn tại, vì vậy để kiểm tra xem chức năng này có tồn tại hay không, bạn có thể sử dụng toán tử in, xem ví dụ:

Trong trường hợp này, nếu không có chức năng querySelector trong tài liệu chúng ta có thể sử dụng document.getElementById () thay thế.

Mình nghĩ bạn cần xem =>  ReCAPTCHA là gì và Mục đích của ReCAPTCHA

Lấy phần tử cuối cùng trong mảng

Array.prototype.slice (bắt đầu, kết thúc) có thể cắt mảng khi bạn đặt tham số bắt đầu và kết thúc. Nhưng nếu bạn không nhập tham số kết thúc, hàm này sẽ tự động đặt giá trị lớn nhất cho mảng. Tôi nghĩ rằng ít người biết hàm này có thể chấp nhận các giá trị âm và nếu bạn đặt tham số begin thành một số âm thì bạn sẽ nhận được các phần tử cuối cùng từ mảng:

Cắt bớt mảng

Kỹ thuật này có thể Key kích thước mảng, rất hữu ích để xóa một vài phần tử của mảng dựa trên số phần tử bạn muốn. Ví dụ: nếu bạn có một mảng có 10 phần tử nhưng bạn chỉ muốn lấy 5 phần tử đầu tiên thì bạn có thể cắt bớt mảng, làm cho nó nhỏ hơn bằng cách thiết lập array.length = 5. Xem ví dụ sau:

Thay thế đầy đủ

Hàm String.replace () cho phép sử dụng String và Regex để thay thế các chuỗi, nhưng hàm này chỉ thay thế các chuỗi con xuất hiện trước. Nhưng bạn có thể mô phỏng một hàm thay thế tất cả () sử dụng / g cuối cùng Regex:

Kết hợp các mảng

Nếu bạn cần hợp nhất hai mảng, bạn có thể sử dụng một hàm Array.concat ():

Tuy nhiên, hàm này không phải là cách phù hợp nhất để kết hợp các mảng lớn vì nó sẽ chiếm nhiều bộ nhớ bằng cách tạo một mảng mới. Trong trường hợp này, bạn có thể sử dụng Array.push.apply (arr1, arr2). Thay vì tạo một mảng mới, nó sẽ bao gồm mảng thứ hai trong mảng đầu tiên, do đó giảm mức sử dụng bộ nhớ:

Chuyển đổi NodeList thành một mảng

Nếu bạn chạy hàm document.querySelectorAll (“p”), nó sẽ trả về một mảng chứa các phần tử DOM – đối tượng NodeList. Nhưng đối tượng này không có tất cả các chức năng của mảng như: sắp xếp (), giảm (), bản đồ (), bộ lọc (). Trong trường hợp bạn muốn sử dụng các hàm này và nhiều hàm mảng có sẵn khác, bạn cần chuyển NodeList thành một mảng. Để thực hiện kỹ thuật này, bạn chỉ cần sử dụng các hàm [].slice.call (phần tử).

Mình nghĩ bạn cần xem =>  Next-generation firewall (NGFW) - Tường lửa thế hệ mới tiên tiến

Trộn các phần tử trong mảng

Để xáo trộn các phần tử của một mảng mà không cần sử dụng các thư viện riêng như Lodash, chỉ cần sử dụng thủ thuật sau:

Kết luận

Bây giờ bạn đã học được một vài Thủ thuật JavaScript Hữu ích mà hầu hết được sử dụng để giảm thiểu mã và một số thủ thuật được sử dụng trong các khuôn khổ JS phổ biến như Lodash, Underscore.js, Strings.js và nhiều người khác.

✤ Top 20 bài viết Tổng Hợp mới nhất :

Xem thêm nhiều Tổng Hợp mới hay

Leave A Reply

Your email address will not be published.