Chúng ta cũng xem xét cú pháp và mã để giúp hiểu rõ hơn về khái niệm này.
Hướng dẫn này là một phần trong ý tưởng nhằm viết các hướng dẫn ngắn được sắp xếp về các khái niệm thường được sử dụng hoặc các khái niệm thú vị. Tuy nhiên, trong trường hợp bạn đến đây chỉ để tìm giải pháp, hãy nhấp vào đây.
Hàm bộ lọc JavaScript làm gì?
Hàm filter mảng JavaScript lọc một mảng dựa trên tiêu chí và tạo một mảng mới với các giá trị thỏa mãn. Hàm bộ lọc JavaScript lặp lại các giá trị trong mảng và trả về các giá trị thỏa mãn tức là trả về true. Các tiêu chí tìm kiếm trong hàm bộ lọc JavaScript được chuyển bằng cách sử dụng một callbackfn có các tham số khác nhau, chúng ta sẽ thảo luận chi tiết về chúng bên dưới. Các hàm mũi tên (Arrow functions) cũng có thể được sử dụng để làm cho mã mảng bộ lọc JavaScript dễ đọc hơn.
Cú pháp của bộ lọc JavaScript filter():
array ở đây đề cập đến mảng ban đầu mà bạn đang tìm kiếm để lọc
Thông số:
- function- Cần thiết. Một hàm hoặc tiêu chí tìm kiếm sẽ được sử dụng để lọc từng giá trị trong mảng
- value - Bắt buộc, giá trị nếu phần tử hiện tại trong lần lặp
- index - Tùy chọn, trong trường hợp bạn muốn bắt đầu lặp lại từ một chỉ mục cụ thể
- arr - Đối tượng mảng đang được gọi
- thisValue - Tùy chọn và như tên cho thấy, giá trị hiện tại sẽ được chuyển trong trường hợp tham số trống.
Sử dụng thực tế của chức năng bộ lọc JavaScript
Tất cả chúng ta đều bắt gặp các bộ lọc trên các trang web và chúng giúp chúng ta tìm thấy mọi thứ dễ dàng, chức năng mảng bộ lọc JavaScript là thứ cho phép điều này xảy ra. Ví dụ: chúng ta đang tìm kiếm một freelancer có bộ kỹ năng JavaScript kỹ năng. Chúng ta sử dụng chức năng mảng bộ lọc JavaScript để trả về các freelancer có chứa bộ kỹ năng cụ thể. Điều này có thể thực hiện được vì bộ lọc JavaScript không làm thay đổi chuỗi mà tạo ra một chuỗi mới do đó chuỗi gốc không bị ảnh hưởng.
Tương tự, các trang web có bộ lọc đều sử dụng chức năng mảng bộ lọc JavaScript.
Mã & Giải thích:
Chúng ta hãy bắt đầu với một mảng đơn giản và sau đó chuyển sang mảng chứa các đối tượng. Vì vậy, trước tiên, chúng ta hãy lấy một mảng chứa các giá trị số và loại bỏ các giá trị âm bằng cách sử dụng hàm mảng bộ lọc JavaScript.
Ví dụ
let numbers = [-23,-20,-17, -12, -5, 0, 1, 5, 12, 19, 20];
let positive_array = numbers.filter(function(value) {
return value >= 0; });
console.log(positive_array);
//Output = [0, 1, 5, 12, 19, 20]Như bạn có thể thấy, chúng ta đã định nghĩa một hàm trả về các giá trị lớn hơn hoặc bằng 0. Trong trường hợp bạn cảm thấy thoải mái với các hàm mũi tên, bạn có thể sử dụng chúng để làm cho mã của bạn dễ đọc hơn.
Ví dụ
let numbers = [-23,-20,-17, -12, -5, 0, 1, 5, 12, 19, 20];
let positive_array = numbers.filter(value => value >= 0);
console.log(positive_array);
//Output = [0, 1, 5, 12, 19, 20]Bây giờ, chúng ta hãy xem một đoạn mã mà chúng ta sử dụng hàm mảng bộ lọc JavaScript trên một mảng đối tượng. Hãy tiếp tục với ví dụ trước đó về việc lọc những freelancer với kỹ năng JavaScript.
Ví dụ
let freelancers = [{name: "Tuan", skill: "JavaScript"},{name: "Nguyen", skill: "Python"},{name: "Hoang", skill:"JavaScript"}];
let javascript_freelancers = freelancers.filter(function(freelancer) {
return freelancer.skill == "JavaScript"; });
console.log(javascript_freelancers);
//Output = [{ name: "Tuan", skill: "JavaScript" }, { name: "Hoang", skill: "JavaScript" }]Như bạn có thể thấy, mã mảng bộ lọc JavaScript cho các đối tượng cũng khá đơn giản khi bạn đã hiểu khái niệm. Hãy thoải mái sử dụng chức năng mũi tên để tăng khả năng đọc.
Giới hạn & cảnh báo khi sử dụng bộ lọc Javascript
- Mảng bộ lọc JavaScript không làm thay đổi mảng và do đó, hãy nhớ lưu mảng đã lọc trong trường hợp bạn định sử dụng nó sau này.
- Bộ lọc JavaScript sẽ không thực thi hàm trong trường hợp mảng trống