javascript - 在 JavaScript 中获取相似数组值的计数

Question

我正在尝试计算相似的数组值，以获取数组中相似项目的数量。我设法获得了计数，但我想在 HTML 中显示数组中的每个数量

var arr = ['Coke','Coke Diet','Pepsi','Sprite','Coke','Water'];
var obj = [];
for (var i = 0, j = arr.length; i < j; i++) {
   if (obj[arr[i]]) {
      obj[arr[i]]++;
   }
   else {
      obj[arr[i]] = 1;
   } 
}

我在以 HTML 形式呈现它们而不指定饮料类型时遇到问题。

$('#items').append(obj.Coke)

如何.append(obj)而不说明我想展示哪种饮料？

我想显示类似 - (数量)(饮料)

2x Coke
1x Sprite
3x Water

JSfiddle sample

编辑 - 下面的两个答案都有效，但我对此还有另一个问题。在将项目添加到数组时，如何防止渲染相同的项目，而不是只想在点击添加按钮时更新数量。

我为这个后续问题创建了一个新的 fiddle 。

最终结果应该是这样的——

1 Coke
2 Sprite

而不是

1 可乐 1 个 Sprite 2 Sprite

JsFiddle 2 sample

Answer 1

首先 obj 应该是一个对象 {} 而不是数组 []。

其次，要循环访问对象的键，请使用 Object.keys，如下所示:

Object.keys(obj).forEach(function(key) {
    var str = obj[key] + "x " + key;
    $('#items').append(str);
}

注意:

如果您不想使用 forEach，您可以使用 for-in 迭代对象键，如下所示:

for(var key in obj) {
    var str = obj[key] + "x " + key;
    $('#items').append(str);
}

示例:

在此示例中，我使用了 reduce和 forEach因为他们更好。

var arr = ['Coke','Coke Diet','Pepsi','Sprite','Coke','Water'];

var obj = arr.reduce(function(o, e) {
  if(o[e]) o[e]++;
  else o[e] = 1;
  return o;
}, {});

Object.keys(obj).forEach(function(key) {
  var str = obj[key] + "x " + key;
  $("<li></li>").text(str)
                .appendTo("#items");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="items"></ul>

编辑:

您可以通过两种方式实现您在编辑问题时提出的要求:

1. 每次单击该按钮时，都会清空 .cart 元素并用新的统计信息重新填充它。像这样:https://jsfiddle.net/z02z51pm/ .
2. 将项目添加到列表时，设置一个 ID(类似于 count-of-Coke ...)，因此当添加新项目时，我们仅更新该行项目而不影响其他行。如果列表非常大，这非常有用，因为我们只使用该 ID 更新项目的行，而不是清空 .cart 元素并从头开始重建它。像这样:https://jsfiddle.net/ppesc6ek/ .

请注意，我更改了一些代码，用一个数组来存储项目，然后每次都计算其中的项目，这是一项艰巨的工作，我所做的是摆脱这两个数组并替换它们直接与计数器对象一起使用，因此当添加一个项目时，我们不会重新计算已经计数的项目，而是只会增加该项目的计数器(或者如果尚未添加该项目，则创建一个新的计数器)还)。