JavaScript中的1…N数组：速度与性能的秘密

JavaScript中的1…N数组：从简单到高性能

你好，开发者同行！如果你曾经遇到过“创建一个从1到N的数字数组”的任务——你并不孤单。这是Stack Overflow上一个非常热门的问题，积累了数千次浏览和几十种答案。看起来，这能有多难？但魔鬼，一如既往，藏在细节中：代码的性能、可读性和通用性。

今天，我们将分析在JavaScript中创建数组 [1, 2, 3, ..., N] 的所有主要方法，并根据速度、优雅性和适用范围进行比较。你将了解在普通项目中应该选择哪种方法，以及在每毫秒都至关重要的场景中又该选择哪种。开始吧！

为什么这很重要？任务背景

想象一下：你在编写排序算法、生成测试数据、为游戏创建网格，或者只是想快速获得一个数字序列。所有这些情况都需要一个从1到N的数组。看起来——一个for循环就能搞定。但现代JavaScript提供了如此多的语法糖，很容易让人困惑。

我们将探讨5种主要方法，从经典方法到现代的单行代码，并在真实条件下对它们进行严格测试。准备好你的浏览器控制台和最喜欢的编辑器——好戏即将上演！

方法1：经典for循环

基础但可靠的方法，每个新手都知道：

function createArrayLoop(n) {\n  const arr = [];\n  for (let i = 1; i <= n; i++) {\n    arr.push(i);\n  }\n  return arr;\n}\n\nconsole.log(createArrayLoop(5)); // [1, 2, 3, 4, 5]

优点：

\n
• 最大可读性——即使是刚开始学习JS的人也能理解。
\n
• 没有隐藏的调用或魔法。
\n
• 在所有环境中都能工作，包括非常旧的浏览器。
\n

缺点：

\n
• 比某些替代方法慢（但对于较小的N来说并不关键）。
\n
• 对于简单的任务来说代码较多。
\n

方法2：Array.from() 配合 map 函数

优雅的现代方法，自ES6起出现：

const createArrayFrom = n => Array.from({ length: n }, (_, i) => i + 1);\n\nconsole.log(createArrayFrom(5)); // [1, 2, 3, 4, 5]

这里我们创建一个具有指定长度的数组，并通过map函数立即填充它。Array.from的第二个参数正是这个映射函数，它接收当前索引i并返回i + 1。

优点：

\n
• 非常简洁且富有表现力。
\n
• 不需要预先创建空数组。
\n
• 性能良好。
\n

缺点：

\n
• 对于新手来说可能不太明显。
\n
• 创建了一个中间对象{ length: n }。
\n

方法3：Spread操作符 + keys()

Stack Overflow上最流行的单行代码之一：

const createArraySpread = n => [...Array(n).keys()].map(i => i + 1);\n\nconsole.log(createArraySpread(5)); // [1, 2, 3, 4, 5]

它是如何工作的？Array(n)创建一个包含n个空元素的稀疏数组。.keys()返回索引的迭代器（0, 1, 2...）。Spread操作符将其展开成一个普通数组，然后map将值偏移+1。

优点：

\n
• 非常简洁（单次调用）。
\n
• 看起来“神奇”——在代码审查时会让同事感到惊喜。
\n

缺点：

\n
• 对于大的N来说，是所有方法中最慢的（由于双重遍历和创建中间数组）。
\n
• 对于初学者来说更难理解。
\n
• 消耗更多内存。
\n

方法4：Array.fill() + map()

另一个流行的选项：

const createArrayFill = n => Array(n).fill().ma