💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 31 tháng 5 năm 2026

Bộ lọc dữ liệu (Filter) | filter | lọc mảng

📌

Kết luận

Dùng filter để lọc danh sách theo điều kiện mong muốn

📝 Mã thực tế tại đây
const filtered = [1, 2, 3, 4, 5].filter(n => n >= 3);
console.log(filtered); // Kết quả: [3, 4, 5]

Đặc điểm của filter

- Chỉ giữ lại các phần tử mà hàm trả về giá trị true - Không làm thay đổi mảng gốc - Cực kỳ hữu ích khi làm các tính năng tìm kiếm hoặc lọc sản phẩm

Tổng kết

- filter tạo ra mảng mới chỉ gồm các phần tử thỏa mãn điều kiện - Mảng gốc vẫn được bảo toàn

Hãy thử trong phần bài tập

Hãy lọc lấy các số từ 3 trở lên trong mảng nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Lọc lấy các số lớn hơn hoặc bằng 3 từ mảng [1,2,3,4,5] và xuất ra.

Gợi ý khi gặp khó khăn

Sử dụng hàm .filter().

20pt

Bộ lọc dữ liệu (Filter)

Lọc lấy các số lớn hơn hoặc bằng 3 từ mảng [1,2,3,4,5] và xuất ra.

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Bộ lọc dữ liệu (Filter)" là bài JavaScript mức 上級. Lọc lấy các số lớn hơn hoặc bằng 3 từ mảng [1,2,3,4,5] và xuất ra. Chạy ngay trên trình duyệt với kiểm tra tự động.

Hàm filter giúp bạn lọc ra các phần tử thỏa mãn một điều kiện nhất định. Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình project. Bài #73 củng cố kỹ năng project.

Quy trình từng bước

  1. Đọc bài giải thích và nắm mục tiêu "Bộ lọc dữ liệu (Filter)"
  2. Kiểm tra cột JavaScript và bắt đầu từ mã mẫu
  3. Mở gợi ý nếu bí, so sánh với lời giải
  4. Bấm Chạy để xem preview/console
  5. Hệ thống kiểm tra có chứa: 3, 4, 5.
  6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

JavaScript dùng: console.log, .filter(. Kiểm tra typo và await. Giải thích: Hàm filter giúp bạn lọc ra các phần tử thỏa mãn một điều kiện nhất định. Gợi ý: Sử dụng hàm .filter().

Ứng dụng thực tế & nghề nghiệp

Todo, counter, timer là bài live-coding và portfolio mạnh.

Lỗi thường gặp

  • Bỏ qua gợi ý: Sử dụng hàm .filter().
  • Chỉ giữ state trên DOM
  • Đăng ký listener hai lần
  • Lưu dữ liệu nhạy cảm vào localStorage

Xử lý sự cố

Preview không đổi sau khi chạy
Kiểm tra bạn sửa đúng cột JavaScript và đã bấm Chạy.
Đúng nhưng không pass
Hệ thống kiểm tra có chứa: 3, 4, 5. Kiểm tra typo và thẻ đóng.
Lỗi trên console
Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại
Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

  • Giải thích kỹ thuật trong "Bộ lọc dữ liệu (Filter)" bằng lời của bạn trong 30 giây
  • Luyện mô tả từng dòng mã giải trên bảng trắng
  • Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

localStorage
Lưu key-value lâu dài trên trình duyệt.
setTimeout
Chạy hàm sau khoảng thời gian.
State
Dữ liệu app như bộ đếm.

Từ khóa trên trang này

Trang này là bài tập miễn phí về Bộ lọc dữ liệu (Filter) cho từ khóa: Bộ lọc dữ liệu (Filter), project, 上級, console.log, .filter(, project filter.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Bộ lọc dữ liệu (Filter) có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Bộ lọc dữ liệu (Filter)" ở mức "上級". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Bộ lọc dữ liệu (Filter)"?

Hàm filter giúp bạn lọc ra các phần tử thỏa mãn một điều kiện nhất định. Gợi ý: Sử dụng hàm .filter().

Vị trí danh mục project?

Todo, counter, timer là bài live-coding và portfolio mạnh.

Các bước cụ thể cho "Bộ lọc dữ liệu (Filter)"?

1. Đọc bài giải thích và nắm mục tiêu "Bộ lọc dữ liệu (Filter)"
2. Kiểm tra cột JavaScript và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa: 3, 4, 5.
6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

JavaScript dùng: console.log, .filter(. Kiểm tra typo và await.

Giải thích: Hàm filter giúp bạn lọc ra các phần tử thỏa mãn một điều kiện nhất định.

Gợi ý: Sử dụng hàm .filter().

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột JavaScript và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa: 3, 4, 5. Kiểm tra typo và thẻ đóng.
Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Bộ lọc dữ liệu (Filter)" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại