JavaScript：這可能嗎？ 使用數組值顯示數量

Question

鑒於此JavaScript數組：

var list = [1,1,1,2,2,2,2]

我想知道如何生成下面的HTML列表，該列表具有數組中的每個唯一項以及它們在數組中出現的次數。 我只想知道JavaScript來生成數據，我可以生成HTML。

• 1是x3
• 2是x4

我對如何實現這一目標感到困惑。 基本上類似於購物車數量功能，但使用數組。

http://jsfiddle.net/37ab3k00/

Answer 1

使用.reduce可以將數組縮小為數量對象。

 var list = [1, 1, 1, 2, 2, 2, 2]; var quantities = list.reduce(function(obj, n) { if (obj[n]) obj[n]++; else obj[n] = 1; return obj; }, {}); var ul = document.querySelector("ul"); for (var n in quantities) { ul.appendChild(document.createElement("li")).textContent = n + " has a quantity x" + quantities[n]; } 

 <ul></ul> 

.reduce()的第一個參數是為數組中的每個成員調用的函數。

第二個參數是一個對象，我們將傳遞給每個迭代。 它作為我們提供的函數的第一個參數傳遞，並且我們始終返回它，以便始終將其作為該參數傳遞。 這稱為累加器。

我們提供的函數的n參數是列表中當前成員的值。 因此，我們要做的是首先查看obj是否具有true n成員。 如果是這樣，則必須已經遇到過，因此我們將其遞增。 如果不是，我們給它賦初始值1以代表該值的第一個n 。

Answer 2

var list = [1,1,1,2,2,2,2]

var counts = {};
for (var i = 0; i < list.length; i++) {
    counts[list[i]] = 1 + (counts[list[i]] || 0);
}

演示： http ： //jsfiddle.net/famn4zcL/2/

新增至HTML

var li = '';

for (var el in counts) {
    li += '<li>' + el + ' is x' + counts[el] + '</li>';  
} 

document.getElementById('list').innerHTML = li;

演示： http ： //jsfiddle.net/famn4zcL/3/

Answer 3

另一種方法是使用對象數組（可以使用您可能需要構建產品的其他數據輕松升級對象），如下所示：

HTML：

<span id="display"></span>

JS（純語言，無框架）：

var objects = [
    {prod:0,quant:00},
    {prod:1,quant:11},
    {prod:2,quant:22},
    {prod:3,quant:33},
    {prod:4,quant:44},
    {prod:5,quant:55}
];

var list_of_objects = "", display_id = document.getElementById("display");

for (var key in objects) {
  if (objects.hasOwnProperty(key)) {
    console.log(key);
    list_of_objects += '<li>'+objects[key].prod + ' has a qtty x ' + objects[key].quant+'</li>';
  }
}
console.log(list_of_objects);
display_id.innerHTML = list_of_objects;

因此，您可以輕松地使用新信息升級產品數據，例如：

var objects = [
    {prod:0,quant:00,url:"http://url00"},
    {prod:1,quant:11,url:"http://url11"},
    {prod:2,quant:22,url:"http://url22"},
    {prod:3,quant:33,url:"http://url33"},
    {prod:4,quant:44,url:"http://url44"},
    {prod:5,quant:55,url:"http://url55"}
];

JSfiddle可以玩： http : //jsfiddle.net/7hokfmdu/