本文介绍如何在 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 <p>⚠️ <strong>注意事项</strong>： </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12496" title="Java 开发专家"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Java 开发专家" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill12496" title="Java 开发专家" class="overflowclass">Java 开发专家</a>
<p class="overflowclass">精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo</p>
</div>
<a rel="nofollow" href="/xiazai/skill12496" title="Java 开发专家" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 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免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
