javascript - 无法识别数组中的项目。 - JS

Question

我有一个对象数组，如果用户做出一些选择，我会向其中添加新对象。然后，当我刷新页面时，我确保保存这些选项，以继续显示它们，除非用户删除它们。
同时，如果用户再次尝试添加相同的选项，背后的代码不会让他们这样做。
问题是，刷新后，如果我再次尝试添加相同的选项，数组不会将现有项目识别为与我尝试添加的项目相同，它允许我这样做。
实际上，这是一个项目示例以及发生这种情况时我在数组中的内容:
物品:

{name: "Vinos", type_products: "Vinos", active: true}
active: true
name: "Vinos"
type_products: "Vinos"
[[Prototype]]: Object

数组:过滤器选择。

this.filtersSelected[0]
{name: "Vinos", type_products: "Vinos", active: true}
active: true
name: "Vinos"
type_products: "Vinos"
[[Prototype]]: Object

所以，如您所见，这是同一件事，但是，当我进行任何这些验证时，我总是收到错误的值:

const index = this.filtersSelected.indexOf(item);    //the value is always -1
this.filtersSelected.filter(el => el == item)   //the value is always [] (an empty array)
this.filtersSelected.includes(item)   //the value is always false

我如何检查/比较数组中的值和我的项目之间的值，以做一些事情，只有当项目不在数组中时？
(喜欢

if(index <= -1){array.push(item);}

)
非常感谢!

Answer 1

您必须确定这些对象的哪些属性是使它们唯一的“键”，并迭代数组以查找该键。当没有找到key时，则将其添加到数组中，否则，什么都不做。
例如，如果 name + type_products代表你可以做的关键:

const myArrayOfProducts = [];

const addItemToMyProducts = (item) => {
  const { name, type_products } = item;
  const found = myArrayOfProducts.some(p => p.name === name && p.type_products === type_products);
  if (!found) {
    myArrayOfProducts.push(item);
  }
};

const item1 = {name: "Vinos", type_products: "Vinos", active: true};
const item2 = {name: "foo", type_products: "bar", active: true};
const item3 = {name: "Vinos", type_products: "Vinos", active: false};

addItemToMyProducts(item1); // Adds
addItemToMyProducts(item1); // Skips
addItemToMyProducts(item2); // Adds
addItemToMyProducts(item3); // Skips (key matches)

console.log(myArrayOfProducts);
// Returns 
// [
//   { name: 'Vinos', type_products: 'Vinos', active: true },
//   { name: 'foo', type_products: 'bar', active: true }
// ]