Chúng tôi được yêu cầu viết một hàm JavaScript nhận hai mảng như vậy. Hàm của chúng ta sẽ trả về một phiên bản đã lọc mới của mảng đầu tiên (trong trường hợp này là mảng 1) chỉ chứa các đối tượng có thuộc tính tên không có trong mảng thứ hai (trong trường hợp này là mảng 2) có cùng thuộc tính tên
Do đó, đầu ra, trong trường hợp này, sẽ giống như -
const output = [{id:'2',name:'B'},{id:'4',name:'D'}];Thí dụ
Mã cho điều này sẽ là -
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = (arr1, arr2) => { let res = []; res = arr1.filter(el => { return !arr2.find(element => { return element.id === el.id; }); }); return res; } console.log(filterByReference(arr1, arr2));đầu ra
Và đầu ra trong bảng điều khiển sẽ là -
[ { id: '2', name: 'B' }, { id: '4', name: 'D' } ]Để lọc một mảng các đối tượng trong JavaScript theo bất kỳ thuộc tính nào, chúng ta có thể sử dụng phương thức Array.filter theo cách sau
const users = [ { id: 1, name: 'John', isAdmin: false }, { id: 2, name: 'Jane', isAdmin: true }, { id: 3, name: 'Joel', isAdmin: false } ] users.filter(user => user.isAdmin) // Returns -> [{ id: 2, name: 'Jane', isAdmin: true }] Sử dụng bộ lọc để lọc mảng đối tượng dựa trên thuộc tính
Đã sao chép vào khay nhớ tạm. Sao chép
Chúng ta có thể gọi phương thức này trên các mảng và nó mong đợi một hàm gọi lại. Phương thức filter chạy thử nghiệm trong chức năng gọi lại. Các phần tử vượt qua bài kiểm tra được thêm vào một mảng mới. Điều này có nghĩa là phương thức lọc sẽ luôn trả về một mảng mới và không sửa đổi mảng ban đầu
Trong ví dụ mã trên, chúng tôi cố gắng lọc những người dùng có thuộc tính isAdmin được đặt thành true. Điều này tương đương với việc trả về một giá trị từ hàm gọi lại
users.filter(user => { return user.isAdmin }) Điều này tương đương với ví dụ mã trên
Đã sao chép vào khay nhớ tạm. Sao chép
Phương thức filter luôn mong đợi một giá trị true hoặc users.filter(user => { return user.isAdmin })1 được trả về. Nếu true được trả về, bài kiểm tra được thông qua và mục được thêm vào một mảng mới. Nếu users.filter(user => { return user.isAdmin })1 được trả về, nó sẽ không được thêm vào mảng mới
Tất nhiên, chúng ta không chỉ có thể làm điều này với các giá trị boolean mà còn với bất kỳ giá trị nào khác. Hãy tưởng tượng bạn có một danh sách các tệp với kích thước của chúng và bạn muốn lọc ra các tệp lớn. Bạn có thể làm như sau, trong đó bạn so sánh thuộc tính users.filter(user => { return user.isAdmin })4 với một giá trị cố định
const files = [ { id: 1, name: 'html.md', size: 499 }, { id: 2, name: 'css.md', size: 612 }, { id: 3, name: 'javascript.md', size: 1236 } ] const largeFiles = files.filter(file => file.size > 1000) Lưu ý rằng tên của mục trong hàm gọi lại có thể là bất kỳ thứ gì
Đã sao chép vào khay nhớ tạm. Sao chép
Chúng ta cũng có thể trừu tượng hóa phương thức bộ lọc thành một hàm mà chúng ta có thể sử dụng lại để lọc theo bất kỳ thuộc tính boolean nào. Chúng ta có thể đạt được điều này với một dòng mã
const filter = (array, property) => array.filter(item => item[property]) // Then call it later like so: filter(users, 'isAdmin') // Returns -> [{ id: 2, name: 'Jane', isAdmin: true }]
Đã sao chép vào khay nhớ tạm. Sao chép
Hàm này mong muốn một mảng được lọc và thuộc tính mà chúng ta đang tìm kiếm, sau đó ngay lập tức trả về một mảng mới bằng cách sử dụng filter. Bên trong hàm gọi lại của filter, chúng ta có thể truyền thuộc tính đã truyền bằng cách sử dụng ký hiệu ngoặc. Lưu ý rằng chức năng trên sẽ chỉ hoạt động với các thuộc tính boolean. Đối với các bộ lọc phức tạp hơn, bạn có thể viết hàm gọi lại
Một điều khác cần lưu ý về phương thức filter là nó cũng chấp nhận nhiều tham số hơn, cụ thể là chỉ mục và chính mảng nếu cần. Đây là các tham số tùy chọn, vì vậy bạn không cần xác định chúng nếu bạn không sử dụng chúng
users.filter((user, index, array) => { console.log(user) // Logs out the current element in the loop console.log(index) // Logs out the current index in the loop, starting from 0 console.log(array) // Logs out the array itself return user.isAdmin }) Sử dụng chỉ mục và mảng làm tham số tùy chọn trong bộ lọc
Đã sao chép vào khay nhớ tạm. Sao chép
Bạn cũng muốn biết cách sắp xếp mảng?