如何生成含多种指定重复次数值的数组？求最优实现方案

嘿，这个需求我经常碰到！确实，多次调用fill并手动计算起始/结束索引不仅麻烦还容易出错，下面给你分享几个直观又简洁的实现方式：

1. 扩展运算符 + 单次fill（固定值场景首选） #

这种写法一眼就能看懂每个值重复了多少次，完全不用算索引：

const targetArray = [...Array(4).fill(3), ...Array(2).fill(4), ...Array(3).fill(5)];
console.log(targetArray); // [3, 3, 3, 3, 4, 4, 5, 5, 5]

原理很简单：用Array(n).fill(val)生成单个值的重复数组，再通过扩展运算符把这些小数组合并成最终数组。

2. flatMap（动态数据场景最优） #

如果你的值和重复次数是动态生成的（比如存在一个配置数组），用flatMap会更优雅，扩展性拉满：

// 配置项：[值, 重复次数]
const valueCountPairs = [[3, 4], [4, 2], [5, 3]];
const targetArray = valueCountPairs.flatMap(([val, count]) => Array(count).fill(val));
console.log(targetArray); // [3, 3, 3, 3, 4, 4, 5, 5, 5]

哪怕后续要加更多值和重复次数，只需要往配置数组里加元素就行，完全不用修改核心逻辑。

3. 字符串重复技巧（数字场景极简写法） #

如果你的目标元素都是数字，还可以用字符串重复的骚操作，一行搞定：

const targetArray = [...'3'.repeat(4) + '4'.repeat(2) + '5'.repeat(3)].map(Number);
console.log(targetArray); // [3, 3, 3, 3, 4, 4, 5, 5, 5]

先把每个数字转成重复对应次数的字符串，拼接后拆分成字符数组，最后转成数字即可。这种写法代码量最少，但只适合数字场景。

总结 #

• 固定值且数量少：选方法1，可读性最高
• 动态生成的配置：选方法2，扩展性最强
• 纯数字场景：选方法3，代码最简洁

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