Javascript: 如何比较两个对象数组并去除相等的值？

Question

我有两个数组：
这是主数组（我在 html 中打印它，但用户可以删除对象）：

checkboxes = [
{name: "boxes", color: "red"},
{name: "boxes", color: "orange"},
{name: "tree", color: "green"}
{name: "tree", color: "red"}
{name: "tree", color: "yellow"}
]

这是包含要在复选框中删除的项目的数组[]:

finalArray = [
{name: "tree", color: "green"}
{name: "tree", color: "red"}
{name: "tree", color: "yellow"}
]

从这些数组中删除相等对象后的结果必须是：

checkboxes = [
{name: "boxes", color: "red"},
{name: "boxes", color: "orange"}
]

所以我收到一个数组 (finalArray[])，其中包含要在复选框[]中删除的对象。
必须删除所有相等的对象。
我试过了：
.filter 和 .map 但我没有取得进展。

谢谢。

Answer 1

尝试在里面使用 filter and check if that element exist in finalArray using find。

var checkboxes = [
  { name: "boxes", color: "red" },
  { name: "boxes", color: "orange" },
  { name: "tree", color: "green" },
  { name: "tree", color: "red" },
  { name: "tree", color: "yellow" },
];

var finalArray = [
  { name: "tree", color: "green" },
  { name: "tree", color: "red" },
  { name: "tree", color: "yellow" },
];

checkboxes = checkboxes.filter(element => !finalArray.find(e => e.name === element.name && e.color === element.color));

Answer 2

let checkboxes = [
  {name: "boxes", color: "red"},
  {name: "boxes", color: "orange"},
  {name: "tree", color: "green"},
  {name: "tree", color: "red"},
  {name: "tree", color: "yellow"}
]
let finalArray = [
  {name: "tree", color: "green"},
  {name: "tree", color: "red"},
  {name: "tree", color: "yellow"}
]
checkboxes = checkboxes.filter(ele => !finalArray.some(finalEle => JSON.stringify(finalEle) === JSON.stringify(ele)))
console.log(checkboxes)

Javascript: 如何比较两个对象数组并去除相等的值？

Javascript: how to compare two arrays of objects and remove equal values?

javascript

arrays

sorting

object

filter