使用JavaScript数组时出现异常输出：数组为何生成7份重复数据？

这种情况我碰到过好多次，大概率和循环次数不匹配或者引用类型的浅拷贝问题有关，结合你提到的7这个数字，十有八九是和页面上的DOM元素数量挂钩的——比如你正好有7个和处方相关的DOM节点，代码在遍历这些节点时重复添加了数据。

下面是几个最常见的原因和对应的修复方案：

1. 遍历DOM元素时重复推入同一个引用对象 #

如果你在循环里把同一个对象多次推入数组，看起来数组里有7条数据，但其实都是指向同一个内存地址的引用，本质上是同一个数据的7份“镜像”。

举个错误的例子：

// 页面上有7个.prescription元素
const prescElements = document.querySelectorAll('.prescription');
const prescData = [];
// 只创建了一个对象
const singlePresc = { drug: 'Paracetamol', dosage: '500mg' };

prescElements.forEach(() => {
  // 每次循环都推入同一个对象引用
  prescData.push(singlePresc);
});

console.log('Data in Prescription:', prescData);

修复方案：每次循环时创建新的对象实例，确保每个数组项都是独立的：

prescElements.forEach(() => {
  // 每次循环生成新对象
  const newPresc = { drug: 'Paracetamol', dosage: '500mg' };
  prescData.push(newPresc);
});

2. 循环逻辑错误：每次遍历都重复添加全部数据 #

另一种可能是你在遍历DOM时，错误地把所有数据都重新推入了一遍，而不是只添加当前元素对应的数据。比如：

const prescElements = document.querySelectorAll('.prescription');
const prescData = [];
// 假设这是你的原始数据列表
const allDrugs = [{ drug: 'A' }];

prescElements.forEach(el => {
  // 错误：每次遍历都把allDrugs的所有数据推一遍
  allDrugs.forEach(drug => prescData.push(drug));
});

如果有7个DOM元素，最终数组里就会出现7条重复数据。修复方案：只推入当前DOM元素对应的数据：

prescElements.forEach(el => {
  // 从当前元素提取数据，生成单条记录
  const drugData = {
    drug: el.getAttribute('data-drug'),
    dosage: el.getAttribute('data-dosage')
  };
  prescData.push(drugData);
});

3. 重复绑定事件导致多次触发数据添加 #

如果你的数据添加逻辑是绑定在事件上的（比如点击按钮），而你不小心给7个元素都绑定了同一个事件，那么每次触发事件时，就会执行7次数据添加操作，导致数组里多了7份重复数据。

检查方法：在数据添加的代码里加一个 console.log('添加了一次数据')，看看触发事件时控制台打印了几次——如果是7次，就说明事件绑定多了。

修复方案：确保事件只绑定一次，或者用事件委托代替给每个元素单独绑定事件：

// 事件委托：只给父元素绑定一次事件
document.querySelector('.prescriptions-container').addEventListener('click', (e) => {
  if (e.target.matches('.add-prescription-btn')) {
    // 只执行一次数据添加
    const newPresc = { drug: 'Paracetamol', dosage: '500mg' };
    prescData.push(newPresc);
  }
});

最后建议你先在代码里加一行 console.log('循环次数:', prescElements.length)，确认是不是正好循环了7次——这能快速定位问题出在循环次数上还是数据引用上。

内容的提问来源于stack exchange，提问作者Joel G Mathew