Những gì chúng ta có thể sử dụng thay vì bộ lọc trong JavaScript?

filter() là một phương thức mảng cho phép chúng ta tạo một mảng mới từ một mảng khác với tất cả các phần tử đáp ứng một điều kiện mà chúng ta cung cấp

Syk Houdeib, Nhà phát triển giao diện người dùng

const products = ['beans', 'pizza', 'chicken', 'salmon'] // Filter all products called pizza const filteredProducts = products.filter(product=> product === 'pizza') console.log(filteredProducts) // ['pizza']

Trong loạt bài viết "Lặp JavaScript trong thế giới thực" này, tôi muốn chia sẻ với bạn một số phương pháp lặp JavaScript phổ biến nhất bằng cách sử dụng các ví dụ giống nhất có thể với cách sử dụng của chúng trong thế giới thực. Tôi sẽ cố gắng tránh các ví dụ có foo và bar hoặc các ví dụ quá phức tạp. Tôi e rằng sẽ không có nhiều đề cập đến thú cưng và bạn bè của bạn. Thay vào đó, chúng ta sẽ tìm hiểu sâu về cách thức hoạt động của phương thức này, tại sao chúng ta cần nó và nó trông như thế nào trong một cơ sở mã front-end hiện đại điển hình

Bộ lọc mảng()

Trong bài viết này, chúng tôi đang khám phá phương pháp Array.filter(); . Nó nhận vào một mảng các phần tử và trả về một mảng mới chỉ với những phần tử đáp ứng bất kỳ điều kiện nào mà chúng tôi cung cấp cho nó.  

Vì vậy, trong ví dụ, ở trên, chúng tôi có một mảng sản phẩm và chúng tôi đã sử dụng bộ lọc() để lọc ra mọi thứ không phải là bánh pizza và chỉ giữ lại bánh pizza. Hãy xem xét kỹ hơn về nó. Dòng này có nghĩa là gì?

constfilteredProducts = products.filter(product => product === 'pizza')

Nói một cách dễ hiểu, dòng mã này có nghĩa là. đưa ra một mảng có tên là sản phẩm, hãy lấy từng phần tử trong mảng và kiểm tra xem nó có khớp chính xác với chuỗi “pizza” không. Nếu nó không loại bỏ nó và nếu nó thêm nó vào một mảng mới. Khi hoàn thành, lưu trữ mảng mới trong một biến có tên là filteredProducts. Đó là nó, đó là những gì điều này có nghĩa là trong thuật ngữ đơn giản

Nhưng đây không phải là một ví dụ rất thực tế ở đây, và tất cả chúng ta đều nói về sự rung cảm của “thế giới thực”. Vì vậy, hãy cố gắng làm điều đó

Trong thế giới thực

Hãy tạo một bối cảnh thực tế để làm cơ sở cho các ví dụ của chúng tôi. Hãy tưởng tượng nếu bạn đang làm việc trên cơ sở mã cho một cửa hàng trực tuyến. Cửa hàng bán sản phẩm từ một số thị trường

Vì vậy, thay vì lọc một sản phẩm cụ thể gọi là pizza, trong ví dụ này, các sản phẩm của chúng tôi đến từ các thị trường khác nhau và chúng tôi chỉ muốn lọc các sản phẩm từ “Great Mall”

Tôi đã thiết lập một ứng dụng đơn giản để cho bạn thấy điều này đang hoạt động. Bạn có thể kiểm tra ứng dụng web và xem hoạt động của bộ lọc và bạn có thể xem mã trong repo GitHub của nó. Nhưng chúng ta sẽ đi qua mọi thứ ở đây đầu tiên

Hãy nghĩ về sản phẩm của chúng tôi trong một phút. Trong ví dụ đầu tiên, mảng chỉ có một chuỗi đơn giản với tên của sản phẩm. Nhưng một sản phẩm vật lý thực sự có nhiều thuộc tính hơn mà chúng ta cần lập mô hình trong dữ liệu của mình. Đó là lý do tại sao mỗi sản phẩm là một đối tượng chứa tất cả các thuộc tính mà sản phẩm này có, chẳng hạn như tên, giá và thị trường của sản phẩm đó

{    name: "Hearty beans",    price: "1.99€",    market: "Local Market",  }

Vì vậy, nếu thay vì điều kiện chúng tôi cung cấp là phần tử là “pizza” nhưng thay vào đó chúng tôi muốn tạo một phương thức lọc chỉ hiển thị các sản phẩm từ “Great Mall” thì nó sẽ như thế này

constfilteredProducts = products.filter( (product) => product.market === 'Great Mall')

Ở đây chúng tôi tìm hiểu sâu hơn về sản phẩm và xem xét một trong các thuộc tính của sản phẩm rồi so sánh với chuỗi mà chúng tôi cung cấp. Nếu chúng tôi áp dụng bộ lọc này trong cửa hàng trực tuyến hư cấu của mình, nó sẽ trông như thế này

Làm thế nào nó hoạt động?

Vì vậy, làm thế nào để làm việc này? . Tất cả các mảng JS đều có một tập hợp các phương thức tích hợp mà chúng ta có thể sử dụng. filter() là một trong số đó và chúng tôi truy cập nó bằng cú pháp Array.filter() của chúng tôi

Bộ lọc là một chức năng bậc cao hơn, đó là một cách thú vị để nói rằng đó là một chức năng mà chúng ta có thể chuyển một chức năng khác để nó thực hiện điều gì đó với. Bây giờ chúng ta không cần biết nó hoạt động như thế nào ở hậu trường. Điều duy nhất chúng tôi quan tâm là trong dấu ngoặc đơn của nó, chúng tôi chuyển cho nó hàm sẽ kiểm tra từng phần tử trong mảng để quyết định xem chúng được giữ hay loại bỏ.  

Sau đó, bộ lọc sẽ chọn từng phần tử riêng lẻ của mảng và kiểm tra nó dựa trên bài kiểm tra mà chúng tôi đã cung cấp. Phần tử hiện tại mà bộ lọc đang xem được cung cấp cho chúng tôi làm đối số đầu tiên. Đó là “sản phẩm” đầu tiên chúng ta thấy. Nó là một biến mà chúng ta có thể đặt tên bất cứ thứ gì chúng ta muốn. Nhưng điều hợp lý là đối với một mảng sản phẩm, một phần tử duy nhất là một “sản phẩm”, giống như đối với một mảng các bài hát, chúng ta sẽ gọi biến là “bài hát”

products.filter( (product) => product.market === 'Great Mall') songs.filter( (song) => song.title === 'What’s Up?')

Sau mũi tên của hàm arrow, chúng ta sử dụng biến “product” để thực hiện test mà chúng ta muốn. Và bộ lọc làm phần còn lại. Nó sẽ lặp qua toàn bộ mảng và trả về một mảng gồm mọi thứ phù hợp với bài kiểm tra của chúng ta

Bây giờ có lẽ đã rõ tại sao filter() là một phương thức được sử dụng rất phổ biến. Có rất nhiều lần chúng tôi muốn hiển thị một tập hợp con dữ liệu có sẵn trong ứng dụng giao diện người dùng của mình, cho dù đó là do hành động của người dùng hay một số logic nghiệp vụ.  

Còn gì nữa

Chúng ta đã thấy cách bộ lọc cung cấp cho chúng ta một đối số. phần tử được chọn hiện tại từ mảng, phần tử mà chúng tôi gọi là “sản phẩm” trong ví dụ của chúng tôi. Nó cũng cung cấp cho chúng ta thêm hai đối số được xác định trước hữu ích. Đối số thứ hai là chỉ số. Trong khi thứ ba là mảng

Array.filter()0

“Phần tử” là “sản phẩm” trong ví dụ của chúng tôi, chỉ mục là vị trí của phần tử hiện được chọn này trong mảng và đối số cuối cùng thực sự là toàn bộ mảng mà chúng tôi đang lặp lại trên đó.  

Ví dụ: đây là những gì chúng ta sẽ nhận được nếu ghi nhật ký từng sản phẩm và chỉ mục của nó trên mỗi lần lặp lại filter()

constArray.filter()2

Hai điều cần ghi nhớ. Nếu chúng ta chỉ làm việc với một đối số duy nhất thì dấu ngoặc đơn là tùy chọn, vì vậy nếu bạn thấy “sản phẩm” không có dấu ngoặc đơn thì nó cũng giống như vậy, nó chỉ trông gọn gàng hơn

Array.filter()3

Nhưng chúng ta chỉ có thể bỏ dấu ngoặc nếu chúng ta có một đối số. Chúng ta cần có chúng cho nhiều hơn một

Thứ hai, chúng tôi gọi đối số thứ hai là "chỉ mục" ở đây và đối số thứ ba là "mảng". Nhưng giống như “sản phẩm”, đây cũng là những tên biến. Bạn có thể đặt tên cho chúng những gì bạn muốn. Bạn có thể gọi chúng là “nomi” và “amanita” và sẽ không có gì thay đổi. Hãy nhớ rằng cái tên không quan trọng ở đây, mà là vị trí của lập luận. Cái đầu tiên luôn là phần tử, cái thứ hai luôn là chỉ mục và cái thứ ba là mảng mà chúng ta đã bắt đầu. Tuy nhiên, mặc dù tài liệu tham khảo văn hóa đại chúng khó hiểu của bạn, chúng tôi có xu hướng đặt tên cho mọi thứ theo cách dễ đọc hơn. Vì vậy, đối số thứ hai hầu như luôn được gọi là "chỉ mục" hoặc "i" theo quy ước và đối số thứ ba thường là "mảng" hoặc "mảng".  

Cho đến nay chúng ta chỉ thấy các chức năng lọc là một lớp lót. Điều gì xảy ra nếu chúng ta cần viết vài dòng để so sánh? . Trong ví dụ một dòng, hàm mũi tên hoàn toàn trả về bất cứ thứ gì xuất hiện sau. Điều này không xảy ra khi chúng ta có dấu ngoặc nhọn sau mũi tên, vì vậy chúng ta cần sử dụng “return”

Array.filter()4

Một cách khác mà bạn sẽ thấy filter() được viết là lưu trữ riêng hàm chúng ta đang sử dụng cho bài kiểm tra và sau đó chuyển trực tiếp nó dưới dạng hàm gọi lại. Điều này sẽ trông như thế này

Array.filter()5

Nó trông như thế nào trước ES6

Trước phiên bản JavaScript ES6, chúng tôi không có các chức năng mũi tên và viết cùng một chức năng bộ lọc có vẻ khác nhau về mặt cú pháp. Điều này rất quan trọng vì bạn sẽ bắt gặp cách viết này trong rất nhiều cơ sở mã cũ vẫn đang được sử dụng và bạn sẽ bắt gặp nó trong các ví dụ cũ hơn trên Stack Overflow và những thứ tương tự

Array.filter()6

Như bạn có thể thấy, trước khi có hàm mũi tên, chúng ta cần từ khóa “function”, mũi tên biến mất và chúng ta cần dấu ngoặc nhọn và từ khóa “return”

Nó trông như thế nào trong vòng lặp for

Tại trung tâm của tất cả các mảng tuyệt vời, các phương thức rất khiêm tốn để vòng lặp thực hiện tất cả công việc thực tế. Không thường xuyên chúng ta cần viết một vòng lặp for cho những thứ như thế này bởi vì bộ lọc () thực hiện công việc. Nhưng việc xem điều này trông như thế nào trong một vòng lặp for giúp chúng ta loại bỏ bí ẩn và có cái nhìn thoáng qua về những gì đang thực sự xảy ra đằng sau hậu trường

Array.filter()7

Tóm lược

Được trang bị một sự hiểu biết sâu sắc hơn về filter() là gì và tại sao chúng ta cần nó và với ngữ cảnh của một ví dụ từ thế giới thực, tôi hy vọng bạn hiểu rõ hơn về nó sau khi hiểu rõ hơn về nó. Đó là một phương pháp mạnh mẽ và khi được kết hợp với các phương pháp khác, nó sẽ cho phép bạn thực hiện nhiều việc với dữ liệu của mình, tạo thành một phần của nhiệm vụ giao diện người dùng điển hình

Cách tốt nhất để sử dụng thành thạo là luyện tập thật nhiều. Mở bảng điều khiển và thử một số ví dụ này hoặc thậm chí rẽ nhánh dự án GitHub của ví dụ và thử thay đổi mọi thứ và lọc các thuộc tính khác

Cái gì có thể được sử dụng thay cho bộ lọc trong JavaScript?

Bộ lọc có tốt hơn forEach không?

Sự khác biệt giữa bộ lọc và tìm là gì?

Bộ lọc có nhanh hơn forEach JavaScript không?