
本文介绍如何在 javascript 数组中,每 10 个原始元素为一组,在每组的第 2 位(索引 1)和第 9 位(索引 8)分别插入带序号的标记元素(如 `b1`、`c1`),并确保插入逻辑不因数组动态增长而错位。
在实际开发中,我们常需对数组进行结构化增强——例如为分页数据添加分隔符、为日志序列插入时间锚点,或像本例一样,按固定周期注入标记元素。关键挑战在于:插入操作会改变原数组长度和后续元素索引,若遍历方式不当,极易导致重复插入或位置偏移。
核心思路是:
✅ 使用 for 循环配合手动控制索引(而非 forEach 或 map);
✅ 利用 i % 10 精确识别“当前元素在所属 10 元素块中的相对位置”;
✅ 通过 Math.ceil(i / 10) 动态计算当前属于第几组(即 b1/c1 中的数字);
✅ 每次成功插入后,执行 ++i 跳过新插入的元素,避免其被重复处理。
以下是完整、健壮的实现代码:
const array = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6','a7', 'a8', 'a9', 'a10',
'a11', 'a12', 'a13', 'a14', 'a15', 'a16', 'a17', 'a18', 'a19', 'a20',
'a21', 'a22', 'a23'];
// 定义插入规则:key 为「相对于每组起始的索引」,value 为前缀字符
const insertionRules = new Map([
[1, 'b'], // 在每组第 2 个位置(索引 1)插入 bX
[8, 'c'] // 在每组第 9 个位置(索引 8)插入 cX
]);
for (let i = 0; i < array.length; i++) {
const prefix = insertionRules.get(i % 10);
if (prefix !== undefined) {
const groupNumber = Math.ceil((i + 1) / 10); // 更直观:第 i+1 个原始元素属于第几组
array.splice(i, 0, `${prefix}${groupNumber}`);
i++; // 关键!跳过刚插入的元素,防止下次循环再次命中同一位置
}
}
console.log(array);
// → ['a1', 'b1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'c1', 'a8', 'a9',
// 'b2', 'a10', 'a11', 'a12', 'a13', 'a14', 'a15', 'c2', 'a16', 'a17',
// 'b3', 'a18', 'a19', 'a20', 'a21', 'a22', 'a23']⚠️ 注意事项:
- i % 10 基于原始数组索引计算分组位置,因此必须在插入前判断;
- Math.ceil((i + 1) / 10) 比 Math.ceil(i / 10) 更准确(例如 i=0 对应第 1 个元素,应属第 1 组);
- splice(i, 0, ...) 是原地修改,若需保留原数组,请先 const result = [...array] 再操作;
- 若插入规则复杂(如多级嵌套、条件跳过),建议封装为可复用函数,接受 arr, rules, groupSize 为参数。
该方案时间复杂度为 O(n²)(因 splice 在中间插入为线性操作),适用于中等规模数组(≤ 10k 元素)。如需极致性能,可改用“构建新数组”策略(一次遍历生成结果),但本例的可读性与维护性已足够优秀。
立即学习“Java免费学习笔记(深入)”;










