Lọc mảng đối tượng bằng JavaScript mảng

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 }]

Đã 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
})

Đã 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
})

users.filter(user => {
    return user.isAdmin
})

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
})

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)

Đã 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
})

Đã 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?

Cách sắp xếp mảng đối tượng trong JavaScript

Làm cách nào để lọc mảng đối tượng bằng mảng trong JavaScript?

Làm cách nào để lọc hai mảng đối tượng trong JavaScript?

Làm cách nào để lọc mảng đối tượng trong JavaScript ES6?

Làm cách nào để lọc mảng đối tượng trong JavaScript theo id?