为什么具有排列和映射的数组会生成具有未定义值的数组

Question

有人能解释一下为什么这个语句生成一个新的null值数组，而不是一个1的数组吗？

let a = [...Array(3).map(_ => 1)];
console.log(a);

结果[null, null, null]而不是[1,1,1]

但是，下面的代码。。。

let b = [...Array(3)].map(_ => 1)
console.log(b);

结果[1,1,1]

Answer 1

有些人可能会认为这是我在评论中提到的帖子的重复。要点是，数组构造函数创建一个未定义引用的数组，而spread运算符创建一个对未定义引用的数组。

map跳过未定义的引用，但愉快地通过引用映射到未定义的。看到它有console.log()的副作用。

new Array(3).map(el => console.log('this code is never reached'))

将其与进行比较

[...new Array(3)].map(el => console.log(el))

Answer 2

当创建有长度的空数组时，所有插槽都未分配，它们甚至没有undefined值。地图位于另一方面，只能通过指定的值进行迭代。

developer.mozilla.org 上有很好的解释

MDN阵列((->参数->阵列长度

(…(注意：这意味着arrayLength空槽的数组，而不是具有实际未定义值的槽(…(

MDN映射((->描述

(…(回调仅针对已分配值(…(的数组索引调用

这就是为什么在Array(3).map(_=>1)上，map()回调没有效果。

第二部分是传播是如何运作的。当你用3个空插槽扩展数组时，你正在创建新的数组填充槽。现在您有了所有未定义值的插槽。从现在起，地图将按预期运行。

示例：

Welcome to Node.js v12.20.1.
Type ".help" for more information.
> Array(3)
[ <3 empty items> ]
> [...Array(3)]
[ undefined, undefined, undefined ]
> const a = []
> a.length = 2
> a
[ <2 empty items> ]
> [...a]
[ undefined, undefined ]