为什么 Array.map 返回不同的结果？

Question

根据我目前对 JS 的理解，下面的所有 3 行都应该 return 相同的结果，有人可以解释一下我遗漏了什么吗？

1- 意外

[...Array(6).map((x) => 1)]
(6) [undefined, undefined, undefined, undefined, undefined, undefined]

2- 预计

[...Array(6)].map((x) => 1)
(6) [1, 1, 1, 1, 1, 1]

3- 意外

Array(6).map((x) => 1)
(6) [empty × 6]

Answer 1

Array(n) 创建一个长度为 n 的数组，但该数组中没有任何值，因此没有可映射的内容。

基本上，这个：

const a = Array(n);

等同于：

const a = [];
a.length = n;

这就是创建的数组中没有元素的原因。尝试映射它不会执行任何操作，因为没有要映射的值。

但是，您可以将该空数组转换为 undefined 值的数组。这可以通过两种方式完成：

一个像你一样使用传播运算符：

[...Array(n)] // creates new array [undefined, undefined, undefined ...] n times

另一个更常用的是.fill()，它将其参数设置为数组所有索引的值。要填充 undefined，请执行：

Array(n).fill() // fills array with [undefined, undefined, undefined ...] n times

undefined 的数组与空数组不同，它具有元素，因此可以映射：

[undefined, undefined, undefined].map(x => 1) // [1, 1, 1]

所以你可以先把你的空数组转换成undefined的数组，然后像这样映射它：

Array(n).fill().map(x => 1)

如果你想像本例一样在每个位置用相同的元素填充数组，你可以简单地传递它来填充而不需要映射数组：

Array(n).fill(1)

Why is Array.map returning different results?