Question

我试图计算类似的array值来获取数组中有多少相似项目。我设法获得了计数但是我想用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)而不说我想要展示什么样的饮料？

我希望展示类似于 - (quantity) (drink)

的内容

2x Coke
1x Sprite
3x Water

JSfiddle sample

编辑 - 以下两个答案都有效，但我还有另外一个问题。如何在向数组添加项目时阻止呈现相同的项目，而只是在您点击添加按钮时更新数量。

我为这个后续问题创造了一个新的小提琴。

最终结果应如下所示 -

1 Coke
2 Sprite

而不是

1 Coke 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>

修改

您可以通过两种方式实现编辑问题时所提出的问题：

每次单击该按钮时，清空.cart元素并使用新统计信息重新填充。像这样：https://jsfiddle.net/z02z51pm/。

将项目添加到列表时，设置一个ID（类似count-of-Coke ...），因此当添加新项目时，我们只更新该项目的行而不影响其他行。如果列表非常大，这非常有用，因为我们只使用该ID更新项目的行，而不是清空.cart元素并从头重建它。像这样：https://jsfiddle.net/ppesc6ek/。

请注意，我更改了一些代码，隐藏了一个数组以存储项目，然后每次都计算其中的项目，这是一个很难的工作，我所做的是取消这两个数组并替换它们直接与计数器对象一起使用，所以当添加一个项目时，我们不会重新计算我们已经计算过的项目，而是只增加该项目的计数器（如果尚未添加该项目，则创建一个新项目）尚未）。

Answer 2

您可以尝试以下解决方案：

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;
   } 
}

show = function() {
  Object.keys(obj).map(function(drink){
    var info = obj[drink]+"x "+drink+"<br/>";
    $('#items').append(info)
  })
}

在javascript中获取类似数组值的计数

2 个答案: