Javascript 如何计算数组中相同元素的个数？

我正在制作购物车，我需要显示所有添加到购物车的元素，但是相同的元素应该只出现在列表中1次，但是在这种情况下，我需要显示这些元素的数量

 {shoppingCart.map((book) => (
                    <div key={book.id} className="book-element">
                        <div className="col-1">
                            <img src={book.image}/>
                        </div>
                        <div className="col-4 shp-description">
                            <p>{book.title}</p>
                            <p>Cover: {book.hardCover === false ? 'Paperback' : 'Hardcover'}</p>
                        </div>
                        <div className="col-2">{}</div> // here i need to set quantity of the same elements
                        <div className="col-2">{book.price}$</div>
                        <div className="col-1">
                            <i className="fa fa-times" aria-hidden="true"></i>
                        </div>
                    </div>
                ))}

{shoppingCart.map（（书）=>(
{书名}

封面：{book.hardCover==false？'平装本：'hardCover'}

{}//这里我需要设置相同元素的数量
{book.price}$
))}

正如@epascarello所说，在将列表映射到组件之前，您需要处理列表

processBookList(shoppingCart).map((book) => ...)

然后你就有了这样的东西

function processBookList(bookList) {
   // iterate over your list of books and build a new array
   // or maybe use array.reduce if it suits you
   return proccessedBookList;
}

---

所以书的加工，基本任务就是结合记录

getCartData() {
  // loop over the cart
  const combined = this.shoppingCart.reduce((obj, book) => {
    // reference the book we already have or create a new record
    obj[book.id] = obj[book.id] || {  ...book, qty: 0 };
    // increase the qty
    obj[book.id].qty++;
    return obj;
  });
  // return the array of books with qty
  return Object.values(combined);
}

---

听起来您需要处理阵列以删除重复。或者使用reduce来获取counts@epascarello好的，很清楚如何删除相同的元素。。但我怎样才能显示相同元素的数量呢？map的工作就是转换数据。源observable将数据传输到映射，lambda函数在映射中转换数据并发出输出。在这种情况下，我在object中有object…我也不明白为什么我们使用“return object.values（combined）；”在这种情况下。。它返回object的值，而不是object的数组…例如，我添加了5项（其中3项相同，表示数量===3），但当我使用您的示例时，它显示每个项都有数量3/4/5/6等。。所以