Một trong hai phương pháp có thể làm việc. Array.prototype.filter[] mạnh hơn rất nhiều so với Array.prototype.includes[], trong khi phương pháp .includes[] dễ đọc hơn và mang lại hiệu suất tốt hơn nhiều
Ảnh của Athena Lam trên Bapt
Nếu bạn cần biết liệu một mảng JavaScript có chứa một mục hay không, thì bạn có một vài tùy chọn ngoài việc chỉ viết một vòng lặp for.
Giải pháp thay thế rõ ràng nhất là Array.prototype.includes[], nhưng sử dụng Array.prototype.filter[] có thể giúp bạn tiết kiệm thời gian tái cấu trúc trong tương lai
“Phương thức
includes[]xác định xem một mảng có bao gồm một giá trị nhất định trong số các mục của nó hay không, trả vềtruehoặcfalsenếu phù hợp. ”
— Tài liệu MDN
Nếu bạn cần trả lại mặt hàng phù hợp đầu tiên, bạn sẽ sử dụng Array.prototype.find[] thay vì .includes[]
Phương thức Array.prototype.includes[]1 mạnh mẽ hơn cho phép bạn kiểm tra toàn bộ mảng với một tiêu chí tùy ý và nó trả về một mảng mới gồm tất cả các mục phù hợp. Nói cách khác, Array.prototype.includes[]1 cung cấp cho bạn một mảng được lọc
Nếu sau này bạn cần làm việc với các mục mà bạn đã khớp hoặc thay đổi tiêu chí đưa vào thành một điều kiện tùy ý, bạn sẽ cần sử dụng Array.prototype.includes[]1. Nó mạnh hơn nhiều so với .includes[]
“Phương thức
Array.prototype.includes[]5 tạo một mảng mới với tất cả các phần tử vượt qua bài kiểm tra được thực hiện bởi hàm được cung cấp. ”
— Tài liệu MDN
Nếu bạn kiểm tra xem mảng được trả về bởi Array.prototype.includes[]1 có Array.prototype.includes[]7 > 0 hay không, bạn sẽ biết liệu mảng đó có chứa ít nhất một trong các giá trị khớp hay không. Điều đó sẽ mô phỏng hành vi của .includes[]
Ngoài ra còn có phương thức liên quan đến Array.prototype.includes[]9, về cơ bản nằm giữa khoảng giữa .includes[] và Array.prototype.includes[]1
“Phương thức
.includes[]2 kiểm tra xem ít nhất một phần tử trong mảng có vượt qua bài kiểm tra được thực hiện bởi hàm được cung cấp hay không. Nó trả về một giá trị Boolean. ”
— Tài liệu MDN
Phương thức .includes[]3 cho phép một điều kiện tùy ý, như Array.prototype.includes[]1, nhưng không trả về mảng các phần tử phù hợp — chỉ trả về .includes[]5 hoặc .includes[]6
Vì vậy, nếu bạn cần kiểm tra xem có mục nào trong mảng khớp với một điều kiện tùy ý hay không, thì .includes[]3 sẽ thực hiện điều đó mà không cần tạo thêm một mảng. [Điều này tương tự như sự khác biệt giữa .includes[]8 và .includes[]9. ]
Bạn có thể tưởng tượng rằng Array.prototype.includes[]1 sẽ chậm hơn một chút so với .includes[]3 vì bước bổ sung đó. Sau đó, tôi kiểm tra giả thuyết đó
Hãy xem ví dụ mã JavaScript này minh họa bốn biến thể để tìm hiểu xem một mảng có giá trị nhất định hay không
Xem mã thô dưới dạng GitHub Gist
Phương thức mảng JavaScript nào nhanh nhất?
C một số chức năng ES6 nổi tiếng được coi là chậm hơn trong các tập dữ liệu lớn so với các vòng lặp for2 kiểu cũ. Cụ thể, vòng lặp for3 chậm hơn vòng lặp for4, mặc dù tôi thích phiên bản đơn giản hơn.
Tất nhiên, đối với các tập dữ liệu nhỏ, điều đó không quan trọng lắm - và lo lắng về điều đó sẽ là một trường hợp nghiêm trọng của “tối ưu hóa sớm. ”
Để dễ đọc, chúng ta có thể đồng ý rằng .includes[] là phương thức được đặt tên rõ ràng nhất cho thấy bạn muốn biết liệu một mảng có bao gồm một mục hay không. Nhưng cái nào nhanh nhất. . for6, Array.prototype.includes[]1, .includes[]3, hoặc một vòng lặp for2?
Tôi biết bạn cần tốc độ, vì vậy tôi đã chạy các JSBench này. cho tôi các trường hợp thử nghiệm để kiểm tra hiệu suất vi mô của các ví dụ mã ở trên
Xem dữ liệu thô dưới dạng GitHub GistXem biểu đồ tại Visme hoặc dữ liệu dưới dạng Google Sheet
Chúng tôi có thể thấy rõ ràng trong biểu đồ rằng .includes[] là người chiến thắng rõ ràng với 10 mục và chiếm ưu thế với 1.000 mục.
Khi chúng tôi có hơn 100.000 mặt hàng, .includes[] sẽ chậm lại. hiệu suất của nó bằng 53% so với vòng lặp for2 [chậm hơn 47%]. Kết quả gần giống nhau với 1.000.000 mục
Các bài kiểm tra đó đang kiểm tra hiệu suất trường hợp trung bình [mục giữa trong danh sách]. Tôi đã bao gồm Array.prototype.includes[]3 để đảm bảo tính đầy đủ, vì tôi đã tìm thấy một bộ dữ liệu khác sử dụng Array.prototype.includes[]3 thay vì .includes[]
Kết quả sẽ thay đổi dựa trên môi trường thử nghiệm của bạn. Tôi đang sử dụng Google Chrome mới nhất [Phiên bản 88, 64-bit] trên Windows 10. Tuy nhiên, trước khi tôi so sánh kết quả của mình với dữ liệu khác, hãy nói về thời điểm sử dụng vòng lặp for2 trong cuộc sống thực của nhà phát triển JavaScript
Là hiệu suất tồi tệ hơn nhiều?
H dữ liệu của bạn phải lớn đến mức nào thì bạn mới muốn hy sinh khả năng đọc mã để đạt được hiệu suất?
Có lẽ lớn hơn bạn nghĩ
Đây là bài học rút ra. sử dụng .includes[] để xem một mảng có bao gồm một mục hay không trừ khi mảng của bạn có hơn 100.000 mục. Trong trường hợp đó, hãy sử dụng vòng lặp for2 thay vì vòng lặp này nhanh gấp đôi so với vòng lặp .includes[]
“Về lâu dài, bạn sẽ đạt được hiệu suất tốt hơn bằng cách viết mã rõ ràng và có thể sử dụng lại. ”
- Joshua Koudys trên reddit
Với các kết quả trên, bạn sẽ cần hàng trăm nghìn mục trong một mảng để muốn chuyển sang vòng lặp for2 khó đọc hơn
Tại thời điểm đó, bạn có thể chắc chắn muốn chuyển sang for2, nhưng cho đến lúc đó thì .includes[] không chỉ dễ đọc hơn mà còn thực sự nhanh hơn nhiều. Theo mặc định, hãy sử dụng .includes[] khi bạn cần kiểm tra xem một mảng có chứa mục nào không. Đó là giải pháp đôi bên cùng có lợi cho các tập dữ liệu nhỏ
Hãy giữ cho nó thật. Bạn không cần tối ưu hóa sớm mã của mình cho đến khi bạn thực sự xử lý hàng trăm nghìn mục trong một mảng. Tại thời điểm đó, hãy cân nhắc chuyển sang vòng lặp for2
Riccardo Polacci đã thực hiện một công việc tuyệt vời khi thảo luận về sự đánh đổi giữa khả năng đọc và hiệu suất với các chức năng ES6 trong một bài báo mà anh ấy đã viết trên Đáng chú ý — The Journal Blog
Hiệu suất so với khả năng đọc
JavaScript đã và đang phát triển thành một ngôn ngữ dễ đọc hơn. Không có nghi ngờ gì về điều đó, và cũng không có hại
Blog. nhật ký sử dụng. com
Tôi đã cố gắng tìm nghiên cứu khác để sao lưu kết quả hiệu suất của mình và Deepak Gupta đã xuất bản dữ liệu thử nghiệm vòng lặp for2 mở rộng trên HackerNoon và Towards Data Science vào năm 2018 [kết quả đầy đủ có trên GitHub]
Ảnh chụp màn hình của Tiến sĩ. Derek Austin 🥳 của kho lưu trữ GitHub của Deepak Gupta, phần bổ sung cho bài viết 1 & bài viết 2
Deepak nhận thấy rằng cho đến khi bạn đạt 100.000 mục trong một mảng, các vòng lặp for2 không chậm hơn đáng kể so với các hàm JavaScript gốc như .includes[]8 hoặc Array.prototype.filter[]8. Sự khác biệt trở nên quan trọng hơn nhiều đối với các vòng lặp for2 khi bạn có 500.000 hoặc đặc biệt là 1.000.000 mục trong mảng. Anh ấy đã so sánh các vòng lặp for2 với Array.prototype.includes[]3, gần giống như .includes[]
Ảnh chụp màn hình của Tiến sĩ. Derek Austin 🥳 của kho lưu trữ GitHub của Deepak Gupta, phần bổ sung cho bài viết 1 & bài viết 2
Dữ liệu của Deepak cho thấy rằng Array.prototype.includes[]3 nhanh hơn so với vòng lặp của for2 đối với dữ liệu có kích thước trung bình và tôi đã nhận được kết quả tương tự với .includes[]. Tuy nhiên, kết quả của chúng tôi khác nhau đối với các tập dữ liệu nhỏ. anh ấy nhận thấy các vòng lặp của for2 gần như tức thời, trong khi vòng lặp của .includes[] chậm hơn một chút [0. 10 giây]
Trong thử nghiệm của mình, tôi thấy rằng .includes[] đã vượt qua các vòng lặp của for2 đối với các tập dữ liệu nhỏ — nhưng đó có thể là do sự khác biệt cơ bản giữa .includes[] và Array.prototype.includes[]3. Cái sau sử dụng chức năng gọi lại, nghĩa là bạn có thể sử dụng bất kỳ mã tùy ý nào bên trong Array.prototype.includes[]3
Nói cách khác, Array.prototype.includes[]3 giống như Array.prototype.includes[]1. cả hai đều mạnh nhưng chậm vì chúng có chức năng gọi lại. Trong khi đó, .includes[] là tính năng tìm kiếm nhanh “có-hoặc-không” trả về một giá trị boolean. [Trong lần kiểm tra cuối cùng, tôi cũng đã thử lưu vào bộ đệm hàm gọi lại bằng JSBench. tôi, nhưng làm như vậy không thay đổi kết quả của tôi. ]
Chrome V8 gần như chắc chắn sử dụng các tối ưu hóa hiệu suất như bộ nhớ đệm nội tuyến giúp cho .includes[] nhanh hơn rất nhiều trên dữ liệu nhỏ. Tôi chắc rằng có những lý do kỹ thuật khiến việc tăng hiệu suất biến mất khi bộ nhớ được quan tâm nhiều hơn
Một mảng chứa một triệu mục chiếm khoảng 10 MB trong Chrome, có khả năng lớn hơn bộ đệm L2 của CPU, thường là 256KB-8 MB. Điều đó có nghĩa là mảng thực tế nằm xa CPU hơn nhiều và dữ liệu phải được chuyển từ bộ đệm L2 sang bộ đệm L1 nhỏ trước khi có thể xử lý. Đó là dự đoán tốt nhất của tôi về kết quả
Liệu một mảng bao gồm một mục?
W kết thúc, chúng tôi nhận thấy rằng phương thức .includes[] tích hợp sẵn của JavaScript là cách nhanh nhất để kiểm tra xem một mảng JavaScript có chứa một mục hay không, trừ khi bạn có một mảng có một .
Trong hầu hết các trường hợp, .includes[] vừa dễ đọc vừa nhanh hơn for2, vì vậy hãy chắc chắn sử dụng .includes[]. Hãy kết thúc bằng cách thảo luận về các tùy chọn khác, chậm hơn mà bạn phải xem liệu một mảng có bao gồm một phần tử hay không
Bộ não của tôi thích giải quyết vấn đề xác định xem một mảng có chứa một mục hay không bằng cách tìm các mục phù hợp bằng cách sử dụng Array.prototype.includes[]1. Có điều gì đó thú vị và trực quan về việc lọc một mảng
Bằng cách kiểm tra kích thước của mảng đó, tôi biết liệu mảng đó có bao gồm mục hay không, nhưng tôi cũng có thể linh hoạt thay đổi tiêu chí bao gồm một cách dễ dàng. Tất nhiên, có rất nhiều lãng phí ở đó — về mặt sử dụng bộ nhớ và tốc độ xử lý — nếu sau này tôi không bao giờ thực sự sử dụng mảng
Công cụ “tốt nhất” cho công việc tìm kiếm ít nhất một mục [i. e. một số mục] trong một mảng phù hợp với tiêu chí tùy ý sẽ là .includes[]3. Nhưng bộ não thằn lằn của tôi thích ý tưởng rằng tôi có thể sử dụng các mục được lọc đó, vì vậy tôi có xu hướng chỉ dựa vào Array.prototype.includes[]1 thay vì .includes[]3
Tất nhiên, nếu tất cả những gì tôi cần làm là kiểm tra xem mảng có chứa một mục cụ thể hay không,. filter[] là quá mức cần thiết, như chúng ta đã thấy. Khi bạn có các tập dữ liệu nhỏ, false6 sẽ rất nhanh. Với các tập dữ liệu lớn hơn, false7 sẽ thắng, nhưng dữ liệu cần phải lớn, chẳng hạn như “Dữ liệu lớn” lớn
Tùy thuộc vào dự án của bạn, bạn có thể thấy rằng Array.prototype.includes[]1 là một công cụ tốt hơn so với .includes[]— và bạn cũng có thể cân nhắc sử dụng .includes[]3 hoặc Array.prototype.includes[]3. Mỗi cái phục vụ một mục đích hơi khác nhau, nhưng bạn nên nhớ rằng có khả năng sẽ có sự khác biệt về hiệu suất
Bạn hoàn toàn nên sử dụng .includes[]… trừ khi bạn đang làm việc với một mảng hàng trăm nghìn mục, trong trường hợp đó, bạn chắc chắn nên sử dụng vòng lặp Array.prototype.find[]3 để cải thiện hiệu suất