Question

我正在创建一个网上商店购物车，我的购物车中有一系列产品。

let cars = ["Saab", "Volvo", "BMW", "Volvo"];

for (var i = 0; i < cars.length; i++) {
  document.body.innerHTML += '<div >' + cars[i] + '</div>';
}

我得到以下信息：

萨博
  沃尔沃
  宝马
  沃尔沃

我需要的是

萨博
  沃尔沃x2
  宝马

最好的方法是什么？

Answer 1

这是一个相当基本的编程问题。我不会给您答案，但是我可以为您提供解决方案的大致结构。

您的输入是一个包含多个无序项目的数组，而您想要的第一件事是创建一个将相同名称的项目分组的新结构。

为此，我将创建一个单独的对象，其中包含项目及其出现的频率。您应该使用Map。

遍历cars数组，然后为每辆车在Map中添加一个条目。您可以将汽车类型用作键，并且值应该是您见过汽车的频率。

因此，对于每个循环，您：

检查汽车是否存在于地图中
如果是，则加1
如果否，请创建一个新条目并将其值设置为1。

最后，您将获得一个包含项及其计数的键->值图。

现在，您可以遍历地图并简单地逐一输出汽车类型，如果数量超过1，则附加2x。

Answer 2

您可以使用Map进行计数，并对该地图进行迭代以获取渲染。

let cars = ["Saab", "Volvo", "BMW", "Volvo"],
    count = cars.reduce((m, v) => m.set(v, (m.get(v) || 0) + 1), new Map);
    
count.forEach((v, k) => document.body.innerHTML += '<div>' + k + (v > 1 ? ' x' + v : '') + '</div>');

Answer 3

将初始数组转换为地图。地图中每个元素的键是汽车的名称，值是初始列表中汽车的出现次数。

迭代汽车地图并生成您的HTML字符串。

设置整个文档的HTML有点奇怪，但是下面的代码片段应该可以为您提供所需的信息。

// initial car array
let carArr = ["Saab", "Volvo", "BMW", "Volvo"];
console.log(carArr);

// convert to a map with counts
let carObj = {};
for (let car of carArr) {
  carObj[car] = 1 + (carObj[car] || 0);
}
console.log(carObj);

// concatenate the HTML string
var s = "";
for (let car in carObj) {
  s += '<div >' + car + (carObj[car] > 1 ? ' x' + carObj[car] : '') + '</div>';
}
// set the body HTML
document.body.innerHTML += s;

Answer 4

您将需要对列表进行预处理，如下所示：

let cars = ["Saab", "Volvo", "BMW", "Volvo"];

const map = new Map();
for (const car of cars) {
  const count = map.get(car) || 0;
  map.set(car, count + 1);
}

for (const [name, count] of map) {
   const suffix = count > 1 ? ' x' + count : '';
   document.body.innerHTML += '<div >' + name + suffix + '</div>';
}

数组值重复

4 个答案: