“Array(n)”和“[...Array(n)]”有什么区别？

Question

两者有什么区别？

// Chrome console

Array(2);                   // [undefined × 2]
Array(2).map(() => 1);      // [undefined × 2]

[...Array(2)];              // [undefined, undefined]
[...Array(2)].map(() => 1); // [1, 1]

基于What are Array empty slots?，貌似和内存分配有关，但是为什么后一种情况下spread算子会突然导致内存分配呢？

Answer 1

关于数组构造函数

所有这些调用都是等价的：

• Array(2)
• new Array(2)
• var a = []; a.length = 2

它们在某种意义上是相等的，它们为分配分配内存，但不创建索引。

Object.keys(Array(2)) // [].

这就是为什么当你这样做时

Array(2).map(() => 1); // [undefined × 2]

你基本上什么都没改变，因为没有迭代发生在数组上，因为缺少 map 在迭代数组时使用的迭代索引键。

关于扩展运算符

... 运算符调用数组的 [Symbol.iterator]，该数组是内置的 values() 迭代器，即使没有键索引也会迭代值。

这就是为什么在结果中我们有一个新数组，其中包含不同的未定义值和键索引。

Object.keys([...Array(2)]) // ["0", "1"].

之后map 按预期迭代键和相应的值。