每隔n条插入一次广告，取余判断应使用 index % n === 0 或 (index + 1) % n === 0。具体取决于你的列表索引是从0开始还是从1开始计数，以及你希望广告出现在第n条之后还是第n+1条位置。通常推荐在渲染循环中维护一个计数器，当计数器达到n时重置并插入广告元素，这样比单纯依赖索引取余更直观且易于处理边界情况。
基于索引的取余判断逻辑
如果直接使用数组索引进行判断，关键在于理解模运算的特性。假设我们有一个从0开始的索引 i，想要每3条数据插入一次广告，即在第3、6、9...条数据后插入。此时条件应为 (i + 1) % 3 === 0。这是因为索引0对应第1条数据，索引2对应第3条数据。若使用 i % 3 === 0，则会在索引0（第1条）前插入，这通常不符合“每隔N条”的语义。这种方法简单直接，但需要确保索引与视觉顺序严格一致。
const data = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
const N = 3;
const result = [];
for (let i = 0; i < data.length; i++) {
result.push(data[i]);
// 当前是第几条数据？(i + 1)
// 如果是第N条，且不是最后一条，则插入广告
if ((i + 1) % N === 0 && i !== data.length - 1) {
result.push({ type: 'AD' });
}
}
console.log(result);上述代码中，data 包含7个元素。当 i=2 时，(2+1)%3===0 成立，插入广告；i=5 时同样成立。由于 i=6 是最后一个元素，条件 i !== data.length - 1 阻止了末尾插入。输出结果将是一个混合了数据和广告对象的数组，结构清晰，便于后续渲染。
基于计数器的状态管理方法
除了取余，使用独立的计数器变量也是一种常见且稳健的做法。这种方法不依赖索引，而是通过累加计数器并在达到阈值时重置来实现。这种方式在处理动态加载或分页场景时更具优势，因为你可以精确控制何时触发广告插入，而不受总长度限制的影响。例如，在无限滚动列表中，每次加载新批次数据时，只需检查当前批次的计数即可。
function insertAdsByCounter(items, N) {
const result = [];
let count = 0;
for (const item of items) {
result.push(item);
count++;
if (count === N) {
result.push({ type: 'AD' });
count = 0; // 重置计数器
}
}
return result;
}
const data = ['X', 'Y', 'Z', 'W', 'V'];
console.log(insertAdsByCounter(data, 2));在上面的示例中，N=2。处理 'X' 后 count=1；处理 'Y' 后 count=2，插入广告并重置为0。接着处理 'Z' count=1，'W' count=2 插入广告，'V' count=1。最终结果为 ['X', 'Y', AD, 'Z', 'W', AD, 'V']。这种方法逻辑清晰，避免了索引偏移带来的混淆，特别适合需要频繁调整插入频率的场景。
如何处理列表末尾的边界情况
在实际开发中，列表末尾是否插入广告是一个常见的争议点。如果列表长度恰好是N的倍数，使用简单的取余或计数器可能会在末尾插入一个广告，导致页面底部出现不必要的空白或广告位。为了避免这种情况，需要在插入前判断当前元素是否为列表的最后一个元素。如第一个代码片段所示，通过 i !== data.length - 1 可以排除末尾插入。而在计数器方法中，可以在循环结束后检查 count 的值，如果 count > 0 说明未满一个周期，无需插入；如果 count === 0 且刚插入了广告，则需移除最后一个广告对象。这种边界处理确保了用户体验的一致性，避免在页面底部出现突兀的广告。
