JavaScript：能否为fill方法传入模式或函数？快速按指定模式填充数组

嘿，好问题！我来给你拆解清楚：

首先直接回应你的核心疑问：原生的Array.fill()方法确实只能接受单一固定值，没办法直接传入模式或者函数来生成动态的填充值。不过咱们有更灵活的替代方案，而且很多都是一行就能搞定的，完全满足你的需求。

一、快速填充数组的最优方法 #

得分情况看：

• 如果是填充单一固定值，那fill()绝对是最优解，简单又高效，比如：

  // 生成长度为5、全是0的数组
  const arr = new Array(5).fill(0);
  

• 如果要填充动态/模式化的值，那Array.from()才是更好的选择——它支持第二个参数作为映射函数，能根据元素的索引生成对应的值，而且性能比其他间接方法更优。

二、一行创建指定大小并按模式填充的数组 #

直接上你提到的几种场景的代码示例，一目了然：

场景1：生成1、2、3...连续递增序列（步长1） #

// 创建长度为10的数组，值从1到10
const sequentialArr = Array.from({ length: 10 }, (_, index) => index + 1);

解释下：Array.from()的第一个参数是个类数组对象（这里用{length:10}直接指定数组长度），第二个参数是回调函数，index就是当前元素的索引，我们给它加1，就得到了从1开始的连续序列。

场景2：生成2、4、6...偶数序列（步长2） #

// 长度为10，值为2、4、6...直到20
const evenArr = Array.from({ length: 10 }, (_, index) => (index + 1) * 2);

或者换个更直观的写法：

const evenArr = Array.from({ length: 10 }, (_, i) => i * 2 + 2);

场景3：自定义任意模式 #

不管你想生成3、6、9...还是1、3、5这种奇数序列，只需要调整映射函数里的逻辑就行。比如要生成步长为3的序列：

const step3Arr = Array.from({ length: 10 }, (_, i) => i * 3 + 3);

备选方案：扩展运算符+map #

如果你觉得Array.from()的写法有点绕，也可以用扩展运算符先创建一个带空槽的数组，再用map()生成对应值：

const sequentialArr = [...new Array(10)].map((_, index) => index + 1);

不过要注意，new Array(10)创建的是有10个空槽的数组，扩展运算符会把这些空槽转为undefined，然后map()遍历每个undefined生成值。效果和Array.from()差不多，但性能上Array.from()会略胜一筹，尤其是处理大数组的时候。

三、能不能用fill()实现动态填充？ #

虽然fill()本身不支持动态值，但可以结合map()间接实现：

const filledArr = new Array(10).fill().map((_, index) => index * 3);

这里fill()不带参数会填充undefined，然后map()遍历每个元素生成对应值。不过这其实多了一步fill()操作，不如直接用Array.from()来得简洁高效。

总结一下 #

• 单一值填充：用Array.fill()，简单直接。
• 模式化/动态值填充：优先用Array.from()，一行代码就能搞定指定大小和模式，性能也靠谱。
• 其他方案比如扩展运算符+map也能用，但Array.from()是更推荐的最优解。

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