从数组提取值并添加到新DOM元素的技术实现问题

1. 确认类别统计逻辑正确性 #

先确保numberOfCats的生成逻辑没问题，示例代码如下：

const products = [
  { category: '电子' },
  { category: '服装' },
  { category: '电子' },
  { category: '家居' },
  { category: '服装' }
];

const numberOfCats = {};
products.forEach(product => {
  const cat = product.category;
  numberOfCats[cat] = (numberOfCats[cat] || 0) + 1;
});
// 输出：{电子: 2, 服装: 2, 家居: 1}

2. 正确遍历对象生成DOM #

对象无法直接使用forEach遍历，可通过以下两种方式处理：

方式一：使用Object.entries()转键值对数组 #

const container = document.getElementById('category-container');
// 清空容器，避免重复元素
container.innerHTML = '';

// 遍历[类别名, 次数]形式的数组
Object.entries(numberOfCats).forEach(([category, count]) => {
  const item = document.createElement('div');
  item.textContent = `${category}: ${count} 件`;
  container.appendChild(item);
});

方式二：使用Object.keys()获取类别名数组 #

const container = document.getElementById('category-container');
container.innerHTML = '';

Object.keys(numberOfCats).forEach(category => {
  const count = numberOfCats[category];
  const item = document.createElement('div');
  item.textContent = `${category}: ${count} 件`;
  container.appendChild(item);
});

3. 解决常见问题 #

• 遍历失败原因：直接用forEach遍历对象会报错，因为对象不是可迭代的数组类型，必须先转成数组形式；若用for...in，需加hasOwnProperty过滤原型链属性：

for (const category in numberOfCats) {
  if (numberOfCats.hasOwnProperty(category)) {
    // 生成DOM逻辑
  }
}

• 重复添加问题：不要在产品数组的遍历循环里生成DOM（会每个产品对应生成一次），应在统计完numberOfCats后，一次性生成所有类别元素，且生成前清空目标容器。

内容的提问来源于stack exchange，提问作者Chobbit