📌 JS 高效生成数字数组：for 循环是最快的吗？最慢的方法竟然是它？

📖 简介

在 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 种常见方式进行对比。

javascript 复制代码

const num = 1000000; // 100万数据量

// 方法 1：Array.from
function generateArray1(num) {
  return Array.from({ length: num }, (_, index) => index + 1);
}

// 方法 2：new Array() + map
function generateArray2(num) {
  return new Array(num).fill(0).map((_, index) => index + 1);
}

// 方法 3：for 循环（最高效）
function generateArray3(num) {
  const result = [];
  for (let i = 1; i <= num; i++) {
    result.push(i);
  }
  return result;
}

// 方法 4：fill() + map()
function generateArray4(num) {
  return Array(num)
    .fill()
    .map((_, index) => index + 1);
}

// 方法 5：展开运算符 + map
function generateArray5(num) {
  return [...new Array(num)].map((_, index) => index + 1);
}

// 性能测试
console.time('Array.from');
generateArray1(num);
console.timeEnd('Array.from');

console.time('new Array + map');
generateArray2(num);
console.timeEnd('new Array + map');

console.time('for loop');
generateArray3(num);
console.timeEnd('for loop');

console.time('fill + map');
generateArray4(num);
console.timeEnd('fill + map');

console.time('Array + map');
generateArray5(num);
console.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()，它是最慢的！

你是否有更快的方法？欢迎留言讨论！🚀