如何循环数组元素生成指定长度新数组？解决循环超限重启问题

核心思路是用**取余运算符（%）**处理索引，当循环次数超出原数组长度时，取余运算会让索引自动回到数组开头，实现元素的循环复用。

方法一：for循环实现 #

const list = ['a', 'b', 'c'];
const targetLength = 5;
const result = [];

for (let i = 0; i < targetLength; i++) {
  // 计算当前索引：i对数组长度取余，超出时自动从头开始
  const currentIndex = i % list.length;
  result.push(list[currentIndex]);
}

console.log(result); // 输出: ['a', 'b', 'c', 'a', 'b']

方法二：while循环实现 #

const list = ['a', 'b', 'c'];
const targetLength = 5;
const result = [];
let counter = 0;

while (result.length < targetLength) {
  const currentIndex = counter % list.length;
  result.push(list[currentIndex]);
  counter++;
}

console.log(result); // 输出: ['a', 'b', 'c', 'a', 'b']

简洁写法（Array.from） #

如果不想用传统循环，也可以用Array.from快速生成：

const list = ['a', 'b', 'c'];
const targetLength = 5;

const result = Array.from({ length: targetLength }, (_, index) => list[index % list.length]);

console.log(result); // 输出: ['a', 'b', 'c', 'a', 'b']

取余运算的逻辑很直观：原数组长度为3时，counter = 3时3 % 3 = 0，对应数组第一个元素；counter = 4时4 % 3 = 1，对应第二个元素，以此类推，完美实现循环复用。

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