Hàm filter() trong JavaScript

• Trần Thị Vân
• 999
• 28/08/2025

Chức năng của Hàm filter() trong JavaScript

Hàm filter() trong JavaScript dùng để tìm các phần tử trong một mảng thỏa điều kiện cần tìm sau đó cho vô một mảng mới.

Code Hàm filter() trong JavaScript

Hàm filter() theo function trong JavaScript

var mang  = [50,29,35,1,20,30,10,40];
// Lọc ra mảng mới chứa các phần tử chia hết cho 2
var mangmoi = mang.filter(function(phantu){
    return (phantu% 2 == 0);
});

<script>
var mang  = [50,29,35,1,20,30,10,40];
// Lọc ra mảng mới chứa các phần tử chia hết cho 2
document.write("<b>Lọc ra mảng mới chứa các phần tử chia hết cho 2</b><br>");
var mangmoi = mang.filter(function(phantu){
    return (phantu% 2 == 0);
});
// Vòng lặp xem các phần tử trong mảng
mangmoi.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});

// Lọc ra mảng mới chứa các phần tử >30
document.write("<b>Lọc ra mảng mới chứa các phần tử >30</b><br>");
var mangmoi2 = mang.filter(function(phantu){
    return (phantu >30);
});
// Vòng lặp xem các phần tử trong mảng
mangmoi2.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});
</script>

Kết quả:

Lọc ra mảng mới chứa các phần tử chia hết cho 2
Vị trí 0: 50
Vị trí 1: 20
Vị trí 2: 30
Vị trí 3: 10
Vị trí 4: 40
Lọc ra mảng mới chứa các phần tử >30
Vị trí 0: 50
Vị trí 1: 35
Vị trí 2: 40

Chạy Thử

Hàm filter() không theo function trong JavaScript

var mang  = [50,29,35,1,20,30,10,40];
// Lọc ra mảng mới chứa các phần tử chia hết cho 2
var mangmoi = mang.filter(phantu=>{
    return (phantu% 2 == 0);
});

<script>
var mang  = [50,29,35,1,20,30,10,40];
// Lọc ra mảng mới chứa các phần tử chia hết cho 2
document.write("<b>Lọc ra mảng mới chứa các phần tử chia hết cho 2</b><br>");
var mangmoi = mang.filter(phantu=>{
    return (phantu% 2 == 0);
});
// Vòng lặp xem các phần tử trong mảng
mangmoi.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});

// Lọc ra mảng mới chứa các phần tử >30
document.write("<b>Lọc ra mảng mới chứa các phần tử >30</b><br>");
var mangmoi2 = mang.filter(phantu=>{
    return (phantu >30);
});
// Vòng lặp xem các phần tử trong mảng
mangmoi2.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});
</script>

Kết quả:

Lọc ra mảng mới chứa các phần tử chia hết cho 2
Vị trí 0: 50
Vị trí 1: 20
Vị trí 2: 30
Vị trí 3: 10
Vị trí 4: 40
Lọc ra mảng mới chứa các phần tử >30
Vị trí 0: 50
Vị trí 1: 35
Vị trí 2: 40

Chạy Thử

Cách sử dụng filter() hiệu quả trong JavaScript

filter() phát huy hiệu quả nhất khi cần lấy ra một nhóm phần tử đáp ứng điều kiện mà không làm thay đổi mảng ban đầu. Khi xử lý dữ liệu thực tế, bạn có thể kết hợp phương thức này với nhiều cách kiểm tra khác nhau để tạo ra đoạn mã rõ ràng và dễ bảo trì.

Kết hợp filter() với các phương thức mảng khác

Trong nhiều trường hợp, chỉ lọc dữ liệu là chưa đủ. Bạn có thể kết hợp filter() với map(), sort() hoặc reduce() để tạo thành một quy trình xử lý dữ liệu hoàn chỉnh.

Chẳng hạn, nếu muốn lấy các sản phẩm đang còn hàng rồi chỉ giữ lại tên sản phẩm, có thể thực hiện lần lượt việc lọc và biến đổi dữ liệu:

const products = [
  { name: "Laptop", stock: 5 },
  { name: "Chuột", stock: 0 },
  { name: "Bàn phím", stock: 8 }
];

const availableProducts = products
  .filter(product => product.stock > 0)
  .map(product => product.name);

Cách viết này giúp mỗi phương thức đảm nhận một nhiệm vụ riêng: filter() chọn dữ liệu phù hợp, còn map() lấy ra thông tin cần sử dụng. Với các thao tác phức tạp hơn, nên chia từng bước rõ ràng thay vì đưa toàn bộ logic vào một biểu thức khó đọc.

Lọc dữ liệu theo nhiều điều kiện

filter() có thể kiểm tra đồng thời nhiều điều kiện bằng các toán tử logic như && và ||. Đây là cách thường gặp khi xử lý danh sách người dùng, sản phẩm hoặc dữ liệu nhận từ API.

Ví dụ, để tìm những sản phẩm thuộc danh mục điện thoại và có giá không vượt quá 10 triệu đồng:

const products = [
  { name: "Điện thoại A", category: "phone", price: 8000000 },
  { name: "Laptop B", category: "laptop", price: 12000000 },
  { name: "Điện thoại C", category: "phone", price: 15000000 }
];

const result = products.filter(
  product => product.category === "phone" && product.price <= 10000000
);

Khi số lượng điều kiện tăng lên, nên đặt chúng thành các biến có tên dễ hiểu hoặc tách hàm kiểm tra riêng. Cách này giúp mã nguồn dễ đọc hơn và thuận tiện khi cần thay đổi yêu cầu lọc.

Tránh những lỗi thường gặp khi dùng filter()

Một lỗi phổ biến là quên trả về kết quả trong hàm callback khi sử dụng dấu ngoặc nhọn. Nếu callback không trả về giá trị đúng, filter() sẽ không giữ lại phần tử như mong muốn.

const numbers = [1, 2, 3, 4];

const result = numbers.filter(number => {
  number > 2;
});

console.log(result);

Trong trường hợp trên, biểu thức điều kiện không được return, vì vậy callback không trả về kết quả kiểm tra. Có thể sửa bằng cách thêm return:

const result = numbers.filter(number => {
  return number > 2;
});

Ngoài ra, cần phân biệt filter() với việc thay đổi trực tiếp mảng gốc. Phương thức này tạo ra một mảng mới chứa các phần tử phù hợp, vì vậy khi làm việc với dữ liệu lớn hoặc nhiều bước xử lý, nên chú ý cách lưu và sử dụng kết quả để tránh tạo ra những thao tác không cần thiết.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Hàm filter() trong JavaScript.