JavaScript Filter: Hướng dẫn từng bước lọc mảng

Phương thức JavaScript filter() tạo mảng mới chứa các phần tử từ mảng hiện có. filter() chấp nhận một hàm callback làm đối số. Hàm này đánh giá xem phần tử có nên thêm vào mảng mới từ mảng cũ hay không.

Nếu bạn mới học JavaScript, có thể chưa nghe đến hàm filter() và reduce(). Các hàm này hữu ích khi làm việc với danh sách đối tượng, còn gọi là mảng (array).

Nếu từng muốn lấy chỉ những giá trị thỏa mãn điều kiện từ mảng, bạn có thể dùng hàm filter() của JavaScript. Trong tutorial này, ta sẽ thảo luận cách dùng filter() với các ví dụ minh họa.

Ôn tập mảng (Array)

Mảng JavaScript lưu trữ không hoặc nhiều mục. Mục có thể là số, mảng khác, chuỗi, hoặc kiểu dữ liệu khác. Chúng dùng chỉ mục số bắt đầu từ "0" để truy cập mục cụ thể.

Mảng cho phép lưu nhiều giá trị trong cùng một biến. Giúp code gọn gàng, sạch hơn vì không cần khai báo nhiều biến để lưu giá trị.

Ví dụ mảng trong JavaScript:

let names = ["Alex", "Bill", "Connor", "Daniel", "Edna"];

JavaScript Filter Array

Phương thức filter() của mảng JavaScript tạo mảng mới dựa trên nội dung mảng hiện có. filter() đánh giá hàm callback trên từng mục trong mảng hiện có. Mục nào thỏa điều kiện trong callback sẽ được thêm vào mảng mới.

Dùng filter method, ta có thể truy xuất giá trị thỏa mãn tiêu chí nhất định và thêm vào mảng mới.

Cú pháp Filter Array JavaScript

var newArr = oldArr.filter(function(item) {
  return yourCondition;
});

Code định nghĩa mảng "newArr" dựa trên nội dung mảng "oldArr". Hàm callback trả về giá trị cho mảng mới nếu điều kiện thỏa mãn. Ví dụ điều kiện:

• item > 5
• item == "Jessie"
• item < 3

Có thể dùng toán tử so sánh JavaScript xây dựng điều kiện. Hoặc dùng câu lệnh if. Dùng if cho phép kiểm soát giá trị nào trong nhiều giá trị được thêm vào danh sách mới.

Ví dụ Filter JavaScript

Lọc danh sách số

Ví dụ đơn giản: có danh sách mua hàng tại quán cà phê. Muốn tạo danh sách mới hiển thị các đơn hàng trên $10.

Danh sách mua hàng:

var purchases = [2.50, 2.70, 10.50, 12.30, 9.60, 2.30, 3.40];

Dùng filter() lấy các đơn hàng > $10:

var big_purchases = purchases.filter(function(purchase) {
  return purchase > 10;
});

Chương trình kiểm tra xem đơn hàng có giá trị > $10. Đơn hàng thỏa mãn được thêm vào big_purchases. Ngược lại bị loại.

[10.5, 12.3]

var students = [
  { id: 1, name: "Alex", class: "First Grade", age: 5 },
  { id: 2, name: "Bill", class: "First Grade", age: 5 },
  { id: 3, name: "Connor", class: "Second Grade", age: 6 }
];

var firstGradeStudents = students.filter(function (student) {
  return student.class === "First Grade";
});