Filter trong javascript

[tieudoan_208]

Trong JavaScript , filter() là một phương thức của mảng (Array) dùng để tạo ra một mảng mới chứa các phần tử thỏa mãn một điều kiện cụ thể mà bạn đặt ra.

Hãy tưởng tượng bạn có một rổ trái cây và bạn chỉ muốn lấy ra những quả táo. Phương thức filter() chính là cái “sàng” giúp bạn làm việc đó.

1. Cú pháp cơ bản

Cú pháp của filter() khá đơn giản:

const newArray = array.filter(callback(element, index, array));

callback : Hàm thực thi cho mỗi phần tử.

element : Phần tử hiện tại đang được xử lý.

index (tùy chọn): Vị trí của phần tử đó.

array (tùy chọn): Mảng gốc ban đầu.

2. Cách hoạt động (Ví dụ thực tế)

Giả sử bạn có một danh sách các con số và bạn chỉ muốn giữ lại các số lớn hơn 10

const numbers = [5, 12, 8, 130, 44];

const filtered = numbers.filter(function(num) {
  return num > 10;
});

console.log(filtered); // Kết quả: [12, 130, 44]

Sử dụng Arrow Function (Viết ngắn gọn):

const filtered = numbers.filter(num => num > 10);

3. Các đặc điểm quan trọng cần nhớ

Để sử dụng filter() hiệu quả và tránh lỗi logic, bạn cần nắm vững các quy tắc sau:

Đặc điểm	Chi tiết
Không thay đổi mảng gốc	filter() trả về mảng mới, mảng ban đầu vẫn giữ nguyên.
Giá trị trả về	Phải trả về true (để giữ lại phần tử) hoặc false (để loại bỏ).
Mảng rỗng	Nếu không có phần tử nào thỏa mãn, nó sẽ trả về một mảng rỗng [].
Phần tử trống	filter() sẽ không chạy trên các phần tử không có giá trị (undefined/empty).

4. Ứng dụng phổ biến: Lọc mảng đối tượng

Trong thực tế, bạn thường dùng filter() để xử lý dữ liệu từ API (ví dụ: lọc danh sách sản phẩm, tìm người dùng).

const users = [
  { name: 'An', age: 17 },
  { name: 'Bình', age: 25 },
  { name: 'Chi', age: 15 },
  { name: 'Dũng', age: 30 }
];

// Lọc những người đã đủ tuổi trưởng thành (>= 18)
const adults = users.filter(user => user.age >= 18);

console.log(adults);
// Kết quả: [{ name: 'Bình', age: 25 }, { name: 'Dũng', age: 30 }]

5. So sánh nhanh với find()

Rất nhiều người mới bắt đầu hay nhầm lẫn giữa hai phương thức này:

filter() : Tìm tất cả các phần tử thỏa mãn và trả về một mảng .

find() : Chỉ tìm phần tử đầu tiên thỏa mãn và trả về giá trị của phần tử đó.

Mẹo nhỏ: Nếu bạn muốn xóa một phần tử khỏi mảng, hãy dùng filter() để lấy tất cả các phần tử ngoại trừ phần tử đó. Ví dụ: arr.filter(item => item.id !== idToDelete).

Các bạn tham khảo bài viết đây nhé