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/