JS 高效生成数字数组

#📖 简介

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

复制const num = 1000000; 

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

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

function generateArray3(num) {
  const result = [];
  for (let i = 1; i <= num; i++) {
    result.push(i);
  }
  return result;
}

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

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）：

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

#📌 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()，它是最慢的！