如何防止对象数组中的重复？如果存在具有相同属性的对象，则应将其值相加答案

【问题标题】：How would I prevent duplicates in array of objects? And if there is a object with same property, it should sume its value如何防止对象数组中的重复？如果存在具有相同属性的对象，则应将其值相加
【发布时间】：2021-02-12 06:11:06
【问题描述】：

所以基本上我想要实现的是..我有一个包含对象的数组，在我的例子中是库存物品数组。当我将项目添加到购物车数组时，它应该检查是否已经存在具有相同属性（名称）的对象。如果它存在，它应该只是对它们的计数求和。这样我就没有重复了……但它总结了计数。

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',
  }
   
]

【问题讨论】：

由于您没有显示任何试图满足您所提供要求的代码，我们无法为您提供帮助。
我尝试过这样的事情，它按名称检查，并且对象已经存在，它应该获取它的值并将其求和......然后覆盖数组中的对象。但后来我看到了一些 reduce 方法，我删除了所有内容。
@IanKemp 我的解决方案几乎就像下面提供的 sabbir.alam 一样。

标签： javascript arrays reactjs reduce

【解决方案1】：

这样的事情应该可以工作：

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

在这里，您使用 Array.find() 来检查数组中是否存在具有匹配名称的对象。如果没有，则将对象添加到数组中。

【讨论】：

【解决方案2】：

您可以使用数组 reduce 方法来做到这一点。只需遍历数组并对 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);

【讨论】：

【解决方案3】：

您可以检查 objectToBeAdded 是否已经存在于 shoppingCart 中。然后相应地更新 shoppingCart。

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

【讨论】：

哈，我知道我很接近了...谢谢。但你更喜欢这个还是 reduce 方法？
老实说，我个人并不经常使用 reduce 方法。所以不能多说。它是个人选择。我见过很多开发人员使用 reduce 方法。在我看来，我的方法更具可读性和易于理解。
来自 mdn The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value. 在您的情况下，您不需要数组的单个输出。所以使用 reduce 可能不是一个好主意。你知道我们可以使用 map 来遍历一个数组，但你不应该这样做，除非你想改变数组的项。仅用于迭代，您应该使用 forEach。每种方法都有自己的目的。 medium.com/@JeffLombardJr/…
是的，我知道 map()。我现在正在尝试实施，会告诉你它是否有效。