Trong hướng dẫn này, bạn sẽ được học về hàm filter trong JS, sử dụng hàm filter để lọc các phần tử trong một mảng.
Giới thiệu filter trong JS
Một trong những tác vụ phổ biến nhất khi làm việc với mảng là tạo một mảng mới chứa một tập hợp con các phần tử của mảng ban đầu.
Giả sử bạn có một mảng các đối tượng sinh viên trong đó mỗi đối tượng chứa hai thuộc tính: ten và tuoi
// Tạo mảng đối tượng
let sinhViens = [
{ ten: "Ngọc Anh", tuoi: 18 },
{ ten: "Tiểu Bảo", tuoi: 20 },
{ ten: "Hàn Lập", tuoi: 27 },
{ ten: "Thu Hương", tuoi: 18 },
{ ten: "Vũ Hà", tuoi: 22 }
];
Để tìm kiếm sinh viên có tuổi lớn hơn 18, bạn thường sử dụng vòng lặp for lặp qua các phần tử và kiểm tra thuộc tính tuoi.
Nếu đúng là tuổi lớn hơn 18 thì nhét phần tử đó vào mảng mới, như sau:
let sinhVienCungs = [];
for (let i = 0; i < sinhViens.length; i++) {
if (sinhViens[i].tuoi > 18) {
// Thêm phần tử vào cuối mảng mới
sinhVienCungs.push(sinhViens[i]);
}
}
console.log(sinhVienCungs);
Kết quả ta được:
[
{ ten: "Tiểu Bảo", tuoi: 20 },
{ ten: "Hàn Lập", tuoi: 27 },
{ ten: "Vũ Hà", tuoi: 22 }
]
Tuy nhiên, sử dụng vòng lặp for đôi khi hơi lằng nhằng, JavaScript cung cấp phương thức filter() cho phép bạn thực hiện tác vụ này một cách ngắn gọn và rõ ràng hơn.
Ví dụ sau trả về kết quả tương tự như ví dụ trên:
// Lọc phần tử sử dụng filter()
let sinhVienCungs = sinhViens.filter(function(e) {
return e.tuoi > 18;
});
console.log(sinhVienCungs);
Trong ví dụ này, chúng tôi đã gọi phương thức filter() của đối tượng Array trên mảng sinhViens và truyền vào một hàm kiểm tra từng phần tử.
Bên trong hàm, chúng ta đã kiểm tra xem tuổi của sinh viên có lớn hơn 18 hay không.
Nếu đúng như vậy, hàm trả về true. Nếu không, nó trả về false.
Lúc này, Phương thức filter() chỉ lọc ra các phần tử mà thỏa màn hàm kiểm tra của chúng ta truyền vào.
Ngoài ra, bạn có thể sử dụng Arrow function (trong ES6) và cách viết "Clean code" như thế này để lọc sinh viên có tuổi lớn hơn 18.
// Tạo hàm kiểm tra tuổi > 18
let lonHon18Tuoi = e => e.tuoi > 18;
// Lọc tuổi lớn hơn 18 với hàm filter()
let sinhVienCungs = sinhViens.filter(lonHon18Tuoi);
// In ra kết quả
console.log(sinhVienCungs);
Hoặc viết ngắn hơn như thế này:
// Lọc sinh viên lớn hơn 18 tuổi
let sinhVienCungs = sinhViens.filter(e => e.tuoi > 18);
// In ra kết quả
console.log(sinhVienCungs);
Cách này thì không dễ đọc cho lắm. Nhưng nó ngắn.
Chi tiết hàm filter trong JavaScript
Cú pháp của hàm filter() trong Javascript như sau:
arrayObject.filter(callback, contextObject);
Phương thức filter() tạo một mảng mới bao gồm tất cả các phần tử vượt qua phép kiểm tra được thực hiện bởi hàm callback().
> Tìm hiểu thêm về Call Back trong JavaScript
Bên trong, phương thức filter() lặp qua từng phần tử của mảng và truyền từng phần tử vào hàm callback để kiểm tra.
-
Nếu hàm callback trả về true, nó bao gồm phần tử trong mảng trả về.
Phương thức filter() chấp nhận hai đối số được đặt tên:
-
Và một đối tượng tùy chọn.
Giống như các phương thức lặp khác của đối tượng Array như every(), some(), map() và forEach(), hàm callback có dạng sau:
function callback(currentElement, index, array) {
// ...
}
Hàm callback nhận ba đối số:
-
currentElement: là phần tử hiện tại trong mảng đang được xử lý bởi hàm callback.
-
index: Tùy chọn. Là chỉ mục của currentElement đang được xử lý bởi hàm callback.
-
array: Tùy chọn. Là đối tượng mảng đang được duyệt qua.
Đối số contexObject của phương thức filter() cũng là tùy chọn.
Nếu bạn truyền giá trị này, bạn có thể tham chiếu nó bằng cách sử dụng từ khóa this bên trong hàm callback.
Điều quan trọng cần lưu ý là phương thức filter() không thay đổi mảng ban đầu.
Ví dụ sử dụng hàm filter JavaScript
Vì phương thức filter() trả về một mảng mới, bạn có thể xâu chuỗi kết quả với các phương thức lặp khác như sort() và map().
Ví dụ: Phần sau minh họa cách liên kết ba phương thức: filter(), sort() và map()
// Tạo mảng đối tượng
let sinhViens = [
{ ten: "Ngọc Anh", tuoi: 18 },
{ ten: "Tiểu Bảo", tuoi: 20 },
{ ten: "Hàn Lập", tuoi: 27 },
{ ten: "Thu Hương", tuoi: 18 },
{ ten: "Vũ Hà", tuoi: 22 }
];
// Kết hợp filter(), sort() và map()
sinhViens
.filter(sv => sv.tuoi < 25)
.sort((sv1, sv2) => sv1.tuoi - sv2.tuoi)
.map(sv => console.log(sv.ten + ':' + sv.tuoi));
Kết quả ta được:
Ngọc Anh: 18
Thu Hương: 18
Tiểu Bảo: 20
Vũ Hà: 22
Nó hoạt động như thế nào?
-
Đầu tiên, phương thức filter() trả về các sinh viên có tuổi nhỏ hơn 20
-
Thứ hai, phương thức sort() sắp xếp sinh viên theo tuổi tăng dần
-
Thứ ba, phương thức map() hiển thị từng phần tử trong mảng kết quả trong console.
Ví dụ sau minh họa việc sử dụng đối số contextObject chỉ định một đối tượng có thể được tham chiếu trong hàm callback() thông qua từ khóa this.
// Tạo hàm kiểm tra giá trị phù hợp
// nằm trong khoảng nhất định
function giaTriPhuHop(giaTri) {
if (typeof giaTri !== 'number') {
return false;
}
return giaTri >= this.canDuoi && giaTri <= this.canTren;
}
// Dữ liệu cần phải lọc
let duLieu = [10, 20, "30", 1, 5, "Filter JS", undefined, "ABC"];
// Tạo khoảng giá trị
let khoang = {
canDuoi: 1,
canTren: 10
};
// Lọc giá trị bằng hàm filter()
let giaTriNamTrongKhoang = duLieu.filter(giaTriPhuHop, khoang);
console.log(giaTriNamTrongKhoang); // [10, 1, 5]
Chương trình trên hoạt động như sau:
-
Đầu tiên, chúng ta tạo hàm
giaTriPhuHop() để kiểm tra xem đối số của nó có phải là một số hay không và lớn hơn hoặc bằng cận dưới, nhỏ hơn hoặc bằng cận trên.
-
Tiếp theo, tạo ra một mảng chứa dữ liệu hỗn hợp để lát sử dụng để lọc.
-
Sau đó, xác định đối tượng
khoang với cận trên và cận dưới.
-
Sau đó, gọi các phương thức
filter() trên mảng duLieu và truyền vào hàm giaTriPhuHop() và đối tượng khoang. Bởi vì chúng ta truyền vào đối tượng khoang, thế nên bên trong hàm giaTriPhuHop, từ khóa this tham chiếu đến đối tượng khoang.
-
Cuối cùng, hiển thị mảng đã lọc trong console
Tổng kết về hàm filter JS
Như vậy, trong hướng dẫn này, bạn đã học cách sử dụng phương thức filter() của JS để lọc các phần tử trong một mảng theo điều kiện kiểm tra được cung cấp bởi một hàm callback.
Nếu có phần nào chưa hiểu rõ, vui lòng để lại bình luận bên dưới để được giải đáp thêm.
> Và nếu muốn học lập trình web nhanh hơn thì có thể đăng ký khóa học offline HỌC LẬP TRÌNH JAVA WEB hoặc HỌC LẬP TRÌNH PHP với chuyên gia ngay!
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0968051561
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python