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

Question

我有一个对象数组，如果用户做出一些选择，我会向其中添加新对象。然后，当我刷新页面时，我确保保存这些选项，以继续显示它们，除非用户删除它们。

同时，如果用户尝试再次添加相同的选项，后面的代码将不允许他们这样做。

问题是，刷新后，如果我尝试再次添加相同的选项，数组不会将现有项目识别为与我尝试添加的项目相同的项目，并且它允许我这样做。

实际上，这是一个项目的示例以及发生这种情况时我在数组中的内容: 项目:

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

数组:filtersSelected。

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