📖 简介

在 JavaScript 中，我们经常需要生成从 1 到 n 的数字数组。常见的方法包括 for 循环、Array.from、fill + map 以及 new Array().map()等。但在实际应用中，不同方法的性能差异如何？最传统的 for 循环真的最快吗？而最慢的方法又是哪一个？

📌 摘要

目标：对比 JavaScript 中几种生成 1 ~ n 数组的方法，找出最高效和最慢的方案。
方法：for 循环、Array.from、fill + map、new Array().map() 等。
结果：for 循环在大数据量情况下最优，而某种常见方法的性能表现却意外最差！
适用场景：不同方法适用于不同需求，本文将给出推荐方案。

📌 正文

🚀 1. 代码实现

在 JavaScript 中，生成 1 ~ n 数组的方法有很多，我们挑选其中 5 种常见方式进行对比。

 1const num = 1000000; 
 2
 3function generateArray1(num) {
 4  return Array.from({ length: num }, (_, index) => index + 1);
 5}
 6
 7function generateArray2(num) {
 8  return new Array(num).fill(0).map((_, index) => index + 1);
 9}
10
11function generateArray3(num) {
12  const result = [];
13  for (let i = 1; i <= num; i++) {
14    result.push(i);
15  }
16  return result;
17}
18
19function generateArray4(num) {
20  return Array(num)
21    .fill()
22    .map((_, index) => index + 1);
23}
24
25function generateArray5(num) {
26  return [...new Array(num)].map((_, index) => index + 1);
27}
28
29console.time('Array.from');
30generateArray1(num);
31console.timeEnd('Array.from');
32
33console.time('new Array + map');
34generateArray2(num);
35console.timeEnd('new Array + map');
36
37console.time('for loop');
38generateArray3(num);
39console.timeEnd('for loop');
40
41console.time('fill + map');
42generateArray4(num);
43console.timeEnd('fill + map');
44
45console.time('Array + map');
46generateArray5(num);
47console.timeEnd('Array + map');

📊 2. 性能测试结果

我们在 Chrome 浏览器（V8 引擎）上运行测试，得到如下结果（时间单位：ms）：

方法	代码实现	执行时间（ms）
方法 3	`for` 循环	🏆 最快
方法 1	`Array.from`	较快
方法 2	`new Array().fill().map()`	一般
方法 4	`Array(num).fill().map()`	一般
方法 5	`[...new Array()].map()`	❌ 最慢

（具体测试数据在不同环境下可能有所不同，建议自行测试验证。）

📌 3. 结果分析

✅ `for` 循环（方法 3）：最高效

原因：直接使用 push 添加元素，避免了 fill() 和 map() 额外的遍历。
适用场景：大数据量时建议使用。

✅ `Array.from`（方法 1）：较快

原因：Array.from 是优化过的底层实现，直接创建数组并填充数据。
适用场景：代码简洁，性能接近 for 循环。

⚠️ `fill + map`（方法 2、4）：性能一般

原因：fill() 需要预填充数组，再 map() 遍历一次，导致多了一次迭代。
适用场景：适用于小规模数据，避免大规模使用。

❌ `[...new Array()].map()`（方法 5）：最慢

原因：扩展运算符 ... 会创建一个新的数组，再 map() 遍历，额外的内存分配使其成为最慢的方法。
适用场景：❌ 不建议使用，性能损失严重。

📌 4. 结论与推荐

需求	推荐方法
最佳性能（大数据量）	✅ `for` 循环
代码简洁 + 高性能	✅ `Array.from`
适用于小规模数据	⚠️ `fill + map`
❌ 避免使用	❌ `[...new Array()].map()`

🔥 总结：

for 循环是最快的，适用于大规模数据处理。
Array.from 代码最简洁，适用于大部分场景。
fill + map 方法适用于小数据量，但性能稍逊。
避免使用 [...new Array()].map()，它是最慢的！