第一段引用上面的摘要：
本文旨在解决购物车中只显示最后一个商品的问题。通过分析问题代码，我们将探讨如何正确地将所有商品信息添加到购物车HTML中。文章提供了两种解决方案：一种是累加HTML字符串，另一种是先构建完整的HTML字符串，然后一次性更新购物车内容，后者性能更优。我们将详细讲解代码实现，并强调性能优化的重要性。
在开发购物车功能时，一个常见的问题是循环遍历购物车数据，并将每个商品的信息添加到HTML中。然而，如果实现不当，可能会导致购物车只显示最后一个商品，而之前的商品信息被覆盖。本文将详细介绍如何避免这个问题，并提供两种有效的解决方案。
问题分析
原始代码的问题在于，在循环中，每次都使用 cartItems.innerHTML = cartHTML 覆盖了 cartItems 的内容。因此，循环结束后，cartItems 中只保留了最后一个商品的信息。
立即学习“Java免费学习笔记（深入）”；
解决方案一：累加 HTML 字符串
最直接的解决方案是，在每次循环迭代时，将新的 HTML 代码追加到 cartItems 的现有内容中。这可以通过使用 += 运算符来实现。
for (var i = 0; i < cartData.length; i++) {
this["cartData" + i] = cartData[i];
let cartHTML = `
<tr class="cart-row">
<td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
<td><img src="${cartData[i][2]}" alt=""></td>
<td>${cartData[i][0]}</td>
<td class="cart-price">DZD ${cartData[i][1]}</td>
<td><input class="cart-quantity-input" type="number" value="1"></td>
<td class="cart-sub-total">DZD ${cartData[i][1]}</td>
</tr>`;
cartItems.innerHTML += cartHTML;
}这段代码会将每个商品的 HTML 代码追加到 cartItems 中，从而确保所有商品都显示在购物车中。
解决方案二：构建完整的 HTML 字符串
虽然上述解决方案能够解决问题，但效率并不高。每次修改 innerHTML 都会触发浏览器的重新渲染，这在循环中会产生大量的性能开销。一个更优的方案是，先构建包含所有商品信息的完整 HTML 字符串，然后一次性更新 cartItems 的 innerHTML。
let cartRows = "";
for (var i = 0; i < cartData.length; i++) {
this["cartData" + i] = cartData[i];
const cartRow = `
<tr class="cart-row">
<td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
<td><img src="${cartData[i][2]}" alt=""></td>
<td>${cartData[i][0]}</td>
<td class="cart-price">DZD ${cartData[i][1]}</td>
<td><input class="cart-quantity-input" type="number" value="1"></td>
<td class="cart-sub-total">DZD ${cartData[i][1]}</td>
</tr>`;
cartRows += cartRow;
}
cartItems.innerHTML = cartRows;这段代码首先创建一个空字符串 cartRows，然后在循环中将每个商品的 HTML 代码追加到 cartRows 中。循环结束后，cartRows 包含了所有商品信息的完整 HTML 代码。最后，使用 cartItems.innerHTML = cartRows 一次性更新 cartItems 的内容。
性能优化
正如前面提到的，频繁地修改 innerHTML 会导致性能问题。因此，在处理大量数据时，建议使用第二种解决方案，即先构建完整的 HTML 字符串，然后一次性更新 innerHTML。 这种方法减少了浏览器重新渲染的次数，从而提高了性能。
总结
本文介绍了两种解决购物车只显示最后一个商品问题的方法。第一种方法是累加 HTML 字符串，简单易懂，但效率较低。第二种方法是构建完整的 HTML 字符串，然后一次性更新 innerHTML，效率更高，更适合处理大量数据。在实际开发中，应根据具体情况选择合适的解决方案，并注意性能优化。
