JavaScript循环问题：按固定间隔提取数组元素结果不符合预期

我有一个包含1到20数字的数组，需要按如下规则提取元素并拼接成新数组：

• 先从第1个元素（索引0）开始，每5个取一个：1,6,11,16
• 接着从第2个元素（索引1）开始，每5个取一个：2,7,12,17
• 以此类推，直到从第5个元素（索引4）开始提取：5,10,15,20

尝试了如下代码，但实际输出与预期不符：

const row = 5;

const cellArray = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
];

const newArray = [];

for (let i = 0; i <= row; i++) {
  cellArray.forEach((item, k) => {
    if (k === i) {
      newArray.push(item);
    }

    console.log(i);

    if (k % (row + i) == 0 && k !== 0) {
      newArray.push(item);
    }
  });
}

实际输出：
[1, 6, 11, 16, 2, 7, 13, 19, 3, 8, 15, 4, 9, 17, 5, 10, 19, 6, 11]

期望输出：
[1, 6, 11, 16, 2, 7, 12, 17, 3, 8, 13, 18, 4, 9, 14, 19, 5, 10, 15, 20]

原代码问题分析 #

1. 循环范围错误：i <= row会让i遍历到5，而我们只需要起始索引0到4（对应5组），多余的i=5会导致错误提取元素。
2. 间隔判断逻辑错误：k % (row + i) == 0的条件完全不符合需求，我们需要的是从起始索引i出发，每次步长为row（5），正确的判断应该是(k - i) % row === 0。

正确实现方式 #

核心逻辑：外层循环控制起始索引（0到row-1），内层循环从该起始索引出发，每次增加row的步长，遍历数组并收集元素。

const row = 5;

const cellArray = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
];

const newArray = [];

// 外层循环：控制起始索引，共5组（0到4）
for (let start = 0; start < row; start++) {
  // 内层循环：从start开始，每次步长为row，直到超出数组长度
  for (let k = start; k < cellArray.length; k += row) {
    newArray.push(cellArray[k]);
  }
}

console.log(newArray);
// 输出：[1,6,11,16,2,7,12,17,3,8,13,18,4,9,14,19,5,10,15,20]

另一种简洁写法（函数式风格） #

如果偏好更简洁的写法，可以用Array.from结合filter实现：

const row = 5;

const cellArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];

const newArray = Array.from({ length: row }, (_, start) => {
  return cellArray.filter((_, idx) => (idx - start) % row === 0);
}).flat();

console.log(newArray);
// 输出与上面一致

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