JavaScript：在数组每10个元素的指定位置插入新元素

你遇到的重复插入问题，本质是正向遍历修改数组时，插入操作会导致后续元素索引偏移，取模运算的判断逻辑被打乱。下面提供两种可靠的实现方式：

方案一：基于原数组元素计数构建新数组 #

这种方式完全避开索引偏移问题，通过跟踪原元素在组内的位置，决定何时插入目标元素：

const originalArray = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6','a7', 'a8', 'a9', 'a10','a11', 'a12', 'a13', 'a14', 'a15', 'a16', 'a17', 'a18', 'a19', 'a20', 'a21', 'a22', 'a23'];
const result = [];
let groupNumber = 1;
let posInGroup = 0;

for (const item of originalArray) {
  // 添加原数组元素
  result.push(item);
  posInGroup++;

  // 组内第1个元素后插入bN
  if (posInGroup === 1) {
    result.push(`<strong>b${groupNumber}</strong>`);
  }
  // 组内第7个元素后插入cN
  if (posInGroup === 7) {
    result.push(`<strong>c${groupNumber}</strong>`);
  }
  // 完成一组10个元素，重置位置并切换组号
  if (posInGroup === 10) {
    posInGroup = 0;
    groupNumber++;
  }
}

console.log(result);

逻辑说明 #

• 用posInGroup记录当前元素在组内的位置（从1开始计数），只基于原数组元素递增，不受插入操作影响
• 每添加1个原元素后，判断是否到达插入点（组内第1/7个元素）
• 满10个元素则切换组，确保组号正确

方案二：反向遍历原数组插入元素 #

反向处理时，插入操作不会影响未处理的元素索引，避免了正向插入的偏移问题：

const originalArray = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6','a7', 'a8', 'a9', 'a10','a11', 'a12', 'a13', 'a14', 'a15', 'a16', 'a17', 'a18', 'a19', 'a20', 'a21', 'a22', 'a23'];
const array = [...originalArray]; // 复制原数组，避免修改原数据
const totalGroups = Math.ceil(array.length / 10);

// 从最后一组往前处理
for (let group = totalGroups; group >= 1; group--) {
  const groupStartIndex = (group - 1) * 10;
  
  // 先插入cN：组内第7个元素之后（原索引+7的位置）
  if (groupStartIndex + 6 < array.length) {
    array.splice(groupStartIndex + 7, 0, `<strong>c${group}</strong>`);
  }
  // 再插入bN：组内第1个元素之后（原索引+1的位置）
  if (groupStartIndex < array.length) {
    array.splice(groupStartIndex + 1, 0, `<strong>b${group}</strong>`);
  }
}

console.log(array);

逻辑说明 #

• 先计算总组数，从最后一组开始遍历
• 先插入位置更靠后的cN，再插入bN，确保插入操作不会互相干扰索引
• 通过判断groupStartIndex + 6 < array.length，确保组内有足够元素时才插入cN

为什么取模会导致重复插入？ #

如果是正向遍历修改后的数组，用新数组的索引做取模运算，插入元素后后续元素的索引会+1或+2，导致原本属于下一组的元素被错误归到当前组，触发多次插入逻辑。上面两种方案都避开了这个问题：方案一完全不依赖新数组索引，方案二用反向遍历抵消索引偏移的影响。

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