Array(n)和[...Array(n)]之间的区别

Question

为什么下面代码中map()的输出结果会有差异？

var y = [1,2,2,1];

var t = y.map(ind => [...Array(ind)].map((_,i) => ind+""+i));
// This makes [ [ '10' ], [ '20', '21' ], [ '20', '21' ], [ '10' ] ]

var t1 = y.map(ind => Array(ind).map((_,i) => ind+""+i));
//[ [ <1 empty item> ], [ <2 empty items> ], [ <2 empty items> ], [ <1 empty item> ] ]

- Veeshoo

---

請添加所需結果請把下面的程式相關內容從英文翻譯成中文。只返回翻譯後的文字內容： - Nina Scholz

.map不会循环遍历离散的索引。 - Rajesh

@Rajesh 这可能是 OP 寻找的答案。您应该将其作为答案发布，包括链接和所有内容。 - kdojeteri

@Peping 谢谢！我已经看到了这篇帖子。正是我在寻找的。 - Rajesh

作为一种替代方案，您可以使用Array.from({length: n}, (_, i) => ...)。 - Rajesh

Answer 1

这就是为什么应该避免使用Array构造函数创建数组的基本原因。

当传递单个数字n作为参数时，Array构造函数将返回一个具有长度n但没有元素的数组，也称为稀疏数组。（将任何其他内容传递给Array构造函数，例如字符串、对象、两个数字等，都会创建一个带有传递参数作为元素按顺序的普通数组）。

尝试在这个数组上执行.map()操作将不起作用，因为其中没有任何项，这就是为什么你会得到相同的稀疏数组。你的.map()是空操作。

对其使用[...（顺便说一下，Array.from()也是如此）将使数组“实现”，将[ <1 empty item> ]变为[undefined]，将[ <2 empty items> ]变为[undefined, undefined]，这是一个具有实际元素的数组，其值为undefined。.map()可以在其上正常工作，因此您会得到预期的结果。

总之，避免使用Array构造函数。

- Madara's Ghost

---

数组构造函数是中世纪 JavaScript 的遗留物。稀疏数组背后的原因仍然模糊不清。 - Madara's Ghost

@Veeshoo 如果您想将问题标记为“已解决”，请点击答案分数下面的绿色勾号（这将标记该答案为“被接受的”）。我注意到您之前提出的问题还没有这样做，如果您能回头接受帮助解决您问题的答案，那会很好（它可以使网站更加有序，奖励答题者，同时也会给您带来一些额外的声誉！）。不客气，祝您在网站上愉快！ :) - Madara's Ghost