JavaScript lọc mảng đối tượng bên trong mảng đối tượ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' } ]

Bộ lọc mảng Javascript() tạo một mảng mới gồm các phần tử từ một mảng hiện có đáp ứng một điều kiện đã chỉ định

Phương thức

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

1 một lần gọi hàm gọi lại được cung cấp cho từng phần tử mảng và xây dựng một mảng mới với tất cả các giá trị mà hàm gọi lại trả về giá trị

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

2

• Hàm gọi lại chỉ được gọi cho các chỉ mục mảng có giá trị
• Các phần tử mảng không vượt qua kiểm tra gọi lại không được đưa vào mảng mới
• Mảng. filter() không sửa đổi mảng ban đầu

Bộ lọc mảng Javascript sintaxe

• 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));

  3 là phần tử hiện đang được thực thi – bắt buộc

• 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));

  4 chỉ mục của phần tử – tùy chọn

• 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));

  5 là mảng hiện đang được xử lý – tùy chọn

• 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));

  6 là một đối số được truyền để sử dụng làm giá trị this trong hàm gọi lại – tùy chọn

const filteredArray = originalArray.filter(callbackFunction(currentValue, index, arr), thisValue);

1 – Lọc mảng số

Ví dụ đầu tiên khá đơn giản, giả sử chúng ta có một mảng có nhiều độ tuổi. Và rằng chúng ta chỉ cần tạo một mảng mới với độ tuổi trên hoặc bằng 18. Đơn giản phải không?

Cú pháp thậm chí còn rõ ràng hơn khi chúng ta sử dụng cú pháp Hàm mũi tên

2 – Lọc mảng đối tượng

Đối với trường hợp thứ hai của chúng tôi, chúng tôi có một Mảng đối tượng với một số sản phẩm mà chúng tôi cần lọc theo sở thích của người dùng. Trong trường hợp này, giá

Chúng ta cần tương tác trên mảng này để tìm tất cả những sản phẩm phù hợp với điều kiện của chúng ta. Thera có bốn sản phẩm bên trong mảng này và mỗi sản phẩm là một Đối tượng, chúng ta cũng cần tương tác với các đối tượng, nếu bạn không biết cách thực hiện, chỉ cần xem bài đăng này nói về 3 cách mạnh mẽ để truy cập thuộc tính

Bất kỳ mục nào trên 200 'tiền' sẽ được chèn vào mảng mới và sau đó bạn có thể hiển thị kết quả của bộ lọc cho người dùng

3 – Lọc sai giá trị trong Object

Giả sử rằng tại thời điểm cập nhật một số bản ghi trong cơ sở dữ liệu, các Id đã bị hỏng bởi một số đoạn mã khác. Mục tiêu ở đây là lọc ra id sai

Trong ví dụ này, tôi đã thiết lập 3 điều kiện khác nhau cho một Id hợp lệ, sử dụng bộ lọc mảng Javascript, thật dễ dàng để tạo một mảng mới với id chính xác

4 – Lọc các giá trị lặp lại từ một mảng

Một tình huống rất phổ biến khác là loại bỏ các giá trị lặp lại khỏi một mảng. Để làm được điều này, cần sử dụng tham số thứ hai của hàm lọc mảng Javascript để có thể truy cập chỉ mục của phần tử hiện tại đang được xử lý

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

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

7 được đặt thành

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

8. Đ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

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

9 luôn mong đợi một giá trị

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

8 hoặc

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

1 được trả về. Nếu trả về

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

8, 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 trả về

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

1, 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 yêu cầu 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

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

9. Bên trong hàm gọi lại của

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

9, 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

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

9 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

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

0 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?

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

Tìm hiểu cách bạn có thể sắp xếp mảng đối tượng trong JavaScript dựa trên bất kỳ thuộc tính nào theo bất kỳ thứ tự nào bằng hàm trợ giúp đơn giản