本文介绍如何在 javascript 数组中，对每 10 个原始元素，在第 2 和第 9 个位置（即索引 1 和 8）分别插入带序号的标记元素（如 `b1`、`c1`），并确保插入逻辑不重复、不越界，适用于任意长度数组。
在实际开发中，常需对数组进行结构化增强——例如为分页数据添加分隔符、为日志数组插入时间戳标记，或为渲染列表注入占位节点。本例要求：以每 10 个原始元素为一个逻辑块，在每个块内的第 2 位（索引 1）插入 bN，第 9 位（索引 8）插入 cN，且 N 随块序号递增（第 1 块为 b1/c1，第 2 块为 b2/c2，依此类推）。
关键挑战在于：
- 使用 i % 10 判断当前元素在块内的相对位置时，插入操作会改变后续元素索引，若正向遍历且不调整循环变量，将导致漏插或错位；
- 插入必须严格对应“原始索引”而非“当前数组索引”，因此需基于原始顺序计算块号和序号。
✅ 推荐解法：反向遍历 + Array.prototype.splice()（更安全），或正向遍历 + 动态偏移修正（如原答案所示）。以下提供两种清晰、可复用的实现：
✅ 方法一：正向遍历（推荐原答案思路，稍作优化与说明）
function insertEveryN(array, insertions) {
// insertions: Map<relativeIndex, prefix>，如 new Map([[1, 'b'], [8, 'c']])
const result = [...array]; // 避免修改原数组（可选）
let offset = 0; // 累计插入偏移量，用于修正 splice 位置
for (let i = 0; i < array.length; i++) {
const relIndex = i % 10;
const prefix = insertions.get(relIndex);
if (prefix !== undefined) {
const blockNum = Math.floor(i / 10) + 1; // 块号从 1 开始
const value = `${prefix}${blockNum}`;
const insertPos = i + offset; // 当前真实插入位置 = 原始索引 + 已插入数量
result.splice(insertPos, 0, value);
offset++; // 每插入一次，后续所有原始索引对应位置后移 1
}
}
return result;
}
// 使用示例
const arr = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10',
'a11', 'a12', 'a13', 'a14', 'a15', 'a16', 'a17', 'a18', 'a19', 'a20',
'a21', 'a22', 'a23'];
const insertMap = new Map([[1, 'b'], [8, 'c']]);
console.log(insertEveryN(arr, insertMap));
// → ['a1','b1','a2','a3','a4','a5','a6','a7','c1','a8','a9','b2','a10',...]✅ 方法二：反向遍历（更直观，无需 offset 计算）
function insertEveryNReverse(array, insertions) {
const result = [...array];
// 从后往前遍历，插入不影响前面元素的原始索引
for (let i = array.length - 1; i >= 0; i--) {
const relIndex = i % 10;
const prefix = insertions.get(relIndex);
if (prefix !== undefined) {
const blockNum = Math.floor(i / 10) + 1;
result.splice(i, 0, `${prefix}${blockNum}`);
}
}
return result;
}⚠️ 注意事项
- 不要直接在原数组上 for...of 或普通 for 正向遍历时 splice 并忽略索引变化——这会导致跳过元素或无限循环；
- Math.ceil(i / 10) 在原答案中等价于 Math.floor((i-1)/10)+1，但对 i=0 会得 1，而 i=10 得 1（错误），应使用 Math.floor(i / 10) + 1 确保块号正确；
- 若需插入多个不同元素（如每块插 3 个），只需扩展 Map 键值对即可，逻辑完全一致；
- 性能提示：splice 是 O(n) 操作，对超大数组（>10 万项）建议改用构建新数组方式（如 flatMap）。
掌握此模式后，你可轻松适配任意间隔（如每 5 个插 1 个）、任意位置（索引 0/3/7）、任意内容（对象、组件 vnode 等），是前端数据预处理的实用基础技能。
立即学习“Java免费学习笔记（深入）”；
