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 是否有一个真实的 n 成员。如果是这样，那么它一定已经遇到过，所以我们增加它。如果没有，我们为其分配初始值 1 来表示为该值找到的第一个 n。