Helpex - Trao đổi & giúp đỡ Đăng nhập

Hiểu JavaScript / Ghi nhớ TypeScript

Ghi nhớ là một kỹ thuật lập trình cho phép người dùng giảm chi phí thời gian của một hàm đối với chi phí không gian. Đó là, các chức năng được ghi nhớ tốc độ đạt được để sử dụng không gian bộ nhớ cao hơn .

Trong hoạt ảnh sau, bạn có thể thấy kết quả cuối cùng của việc áp dụng ghi nhớ trong mã của chúng tôi.

Hiểu JavaScript / Ghi nhớ TypeScript

Chức năng thuần túy là gì?

Ghi nhớ chỉ có thể được thực hiện trong các chức năng thuần túy. Một hàm thuần túy phải đáp ứng các tiêu chí sau:

  • Nó là một hàm luôn trả về cùng một kết quả khi các đối số giống nhau. Ví dụ, các hàm sau đây là không tinh khiết:
    • Các hàm sử dụng số ngẫu nhiên.
    • Các hàm sử dụng DateTime để tạo kết quả.
  • Đây là một chức năng không tạo ra tác dụng phụ trong ứng dụng:
    • Đột biến dữ liệu hoặc thay đổi trạng thái ứng dụng.
    • Yêu cầu mạng.
    • Cơ sở dữ liệu hoặc yêu cầu tệp.
    • Lấy thông tin đầu vào của người dùng.
    • Truy vấn DOM.

Những lợi ích

Các chức năng thuần túy được sử dụng trong phát triển web vì một số lý do:

  • Mã mang tính khai báo nhiều hơn. Ngoài ra, các chức năng thuần túy tập trung vào việc các đầu vào khác nhau có liên quan như thế nào với đầu ra.
  • Mã được kiểm tra dễ dàng hơn và việc tìm ra lỗi cũng dễ dàng hơn khi so sánh với các hàm không tinh khiết.

Ví dụ về hàm thuần túy

Các hàm đệ quy thường xuyên sử dụng các hàm thuần túy; bài toán đệ quy cổ điển nhất là giai thừa.

Hiểu JavaScript / Ghi nhớ TypeScript

Phiên bản mệnh lệnh của giai thừa hàm cũng thuần túy. Trong cả hai trường hợp, khi đầu vào giống nhau, đầu ra sẽ giống nhau.

Hiểu JavaScript / Ghi nhớ TypeScript

Một ví dụ thú vị khác về các hàm thuần túy như sau:

Hiểu JavaScript / Ghi nhớ TypeScript

Ghi nhớ trong các hàm đệ quy

Memoization là một kỹ thuật lập trình cho phép lưu trữ đầu ra của một hàm thuần túy trong bộ đệm, do đó, lệnh gọi hàm tương tự không cần phải tính toán lại. Ví dụ: nếu bạn tính toán giá trị của factorial(1), bạn có thể lưu trữ giá trị trả về 1và hành động tương tự có thể được thực hiện trong mỗi lần thực thi. Vì vậy, khi bạn chạy giai thừa (100), việc thực thi có thể mất một lúc trong lần đầu tiên, nhưng ở lần thứ hai, thời gian chạy sẽ giảm xuống.

Ví dụ về ghi nhớ

Trong phần này, tôi sẽ chỉ cho bạn cách triển khai ghi nhớ bằng cách sử dụng các mẫu closuredecoratortrong JavaScript.

Mẫu trang trí cho phép bạn thêm các tính năng mới vào bất kỳ đối tượng nào trong thời gian chạy bằng cách sử dụng thành phần thay vì phân cấp. Mục đích là để tránh tạo ra một hệ thống phân cấp lớp của các tính năng của chúng tôi.

Vì vậy, một cách triển khai cơ bản của việc ghi nhớ một trình trang trí trong JavaScript được hiển thị bên dưới:

Hiểu JavaScript / Ghi nhớ TypeScript
  1. Chúng tôi xác định bộ đệm ẩn trong đó kết quả của quá trình thực thi sẽ được lưu trữ. Chúng tôi sử dụng a mapđể lưu trữ các kết quả này.
  2. Trình trang trí trả về một chức năng mới có cùng hành vi với chức năng ban đầu, nhưng ghi nhớ được thực hiện.
  3. Khóa của bản đồ khóa-giá trị được tạo bằng cách sử dụng stringifyvà cung cấp từ hàm gốc.
  4. Việc thực thi hàm gốc ( fn(...args)) quyết định xem có lưu trữ trong bộ nhớ đệm hay không.
  5. Giá trị được lưu trong bộ nhớ cache (cho dù đã được tính toán trước trước đó hay không).
  6. Các resultđược trả về.

Cách sử dụng Trình trang trí ghi nhớ

Cách sử dụng trình trang trí này bằng JavaScript rất dễ dàng:

Hiểu JavaScript / Ghi nhớ TypeScript

Trong trường hợp này, addhàm là hàm gốc không có ghi nhớ và addMemoizedhàm là một hàm mới thực hiện ghi nhớ bằng cách sử dụng mẫu trang trí.

Demo Sử dụng Ghi nhớ

Bây giờ, tôi sẽ cho bạn xem một bản demo thực sự bằng cách sử dụng ghi nhớ. Hãy tưởng tượng một thuật toán được lập trình khủng khiếp cho biết liệu một arraycó một giá trị duy nhất (là Array.prototype.some) hay không.

Hiểu JavaScript / Ghi nhớ TypeScript

Bước sau đây chạy mã gốc và mã đã ghi nhớ để so sánh thời gian được sử dụng trong mỗi chức năng. Điều rất quan trọng cần nhớ là mã gốc không được sửa đổi, ngoại trừ việc bổ sung ghi nhớ.

Hàm sau được sử dụng để đo thời gian được sử dụng trong mỗi lần thực hiện.

Hiểu JavaScript / Ghi nhớ TypeScript

Các mảng được tạo ở đầu tập lệnh:

Hiểu JavaScript / Ghi nhớ TypeScript

Cuối cùng, khi người dùng nhấp vào một nút, các chức năng sẽ được thực thi.

1. Không có ghi nhớ

Hiểu JavaScript / Ghi nhớ TypeScript

2. Ghi nhớ

Hiểu JavaScript / Ghi nhớ TypeScript

Kết quả được hiển thị trong hình ảnh động sau:

Hiểu JavaScript / Ghi nhớ TypeScript

Dự án GitHub có sẵn tại đây .

15 hữu ích 0 bình luận 9.5k xem chia sẻ

Có thể bạn quan tâm

loading