我將如何防止對象數組中的重復項？ 如果有一個具有相同屬性的對象，它應該求和它的值

Question

所以基本上我想要實現的是..我有一個包含對象的數組，在我的例子中是庫存物品數組。 當我將項目添加到購物車數組時，它應該檢查是否已經存在具有相同屬性（名稱）的對象。 如果它存在，它應該只是總結它們的數量。 所以我沒有重復......但它總結了計數。

const stock = [
  {
    id: 0,
    name: 'Leaf Blower',
    price: 250,
    stock: 24,
    count: 0,
    logoURL: process.env.PUBLIC_URL + '/images/1.png',
  },
  {
    id: 1,
    name: 'Generator',
    price: 1299,
    stock: 12,
    count: 0,
    logoURL: process.env.PUBLIC_URL + '/images/2.png',
  },
  {
    id: 2,
    name: 'Log Splitter',
    price: 2133,
    stock: 5,
    count: 0,
    logoURL: process.env.PUBLIC_URL + '/images/3.png',
  },
  {
    id: 3,
    name: 'Lawn Mower',
    price: 250,
    stock: 24,
    count: 0,
    logoURL: process.env.PUBLIC_URL + '/images/4.png',
  },
  {
    id: 4,
    name: 'Chainsaw',
    price: 344,
    stock: 16,
    count: 0,
    logoURL: process.env.PUBLIC_URL + '/images/5.png',
  },
];

這個：

const shoppingCart = [
  {
    id: 0,
    name: 'Leaf Blower',
    price: 250,
    stock: 24,
    count: 5,
    logoURL: process.env.PUBLIC_URL + '/images/1.png',
  }, 
    id: 0,
    name: 'Leaf Blower',
    price: 250,
    stock: 24,
    count: 3,
    logoURL: process.env.PUBLIC_URL + '/images/1.png',
}
]

應該：

const shoppingCart = [
  {
    id: 0,
    name: 'Leaf Blower',
    price: 250,
    stock: 24,
    count: 8,
    logoURL: process.env.PUBLIC_URL + '/images/1.png',
  }
   
]

Answer 1

您可以檢查 objectToBeAdded 是否已經存在於購物車中。 然后相應地更新shoppingCart。

const indexOfObject = shoppingCart.findIndex(item => item.name === objectToBeAdded.name);
if(indexOfObject > -1) { 
   shoppingCart[indexOfObject].count += objectToBeAdded.count; 
} else {
   shoppingCart = [...shoppingCart, objectToBeAdded];
}

Answer 2

您可以通過使用數組減少方法來做到這一點。 只需遍歷數組並對 count 屬性求和即可。

 const shoppingCart = [ { id: 0, name: 'Leaf Blower', price: 250, stock: 24, count: 5, logoURL: `process.env.PUBLIC_URL + '/images/1.png`, }, { id: 0, name: 'Leaf Blower', price: 250, stock: 24, count: 3, logoURL: `process.env.PUBLIC_URL + '/images/1.png`, }, ]; let ret = shoppingCart.reduce((prev, c) => { const p = prev; if (!p[c.id]) p[c.id] = { ...c }; else p[c.id] = { ...c, count: c.count + p[c.id].count }; return p; }, {}); ret = Object.values(ret); console.log(ret);

Answer 3

這樣的事情應該工作：

    if (!shoppingCart.find(element => element.name == objectToBeAdded.name)) {shoppingCart.push(objectToBeAdded)}

在這里，您使用 Array.find() 來檢查數組中是否存在具有匹配名稱的對象。 如果沒有，則將對象添加到數組。