为什么带有扩展和映射的数组会生成一个具有未定义值的数组

如何解决为什么带有扩展和映射的数组会生成一个具有未定义值的数组

有人能解释一下为什么这个语句生成一个新的空值数组而不是一个 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]

解决方法

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

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

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

对比一下

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

,

当您创建具有长度的空数组时，所有插槽都未分配，它们甚至没有 undefined 值。地图上 另一方面，只能遍历指定的值。

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

MDN Array()->Parameters->arrayLength

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

MDN map()->description

(...) 回调仅对已分配值 (...) 的数组索引调用

这就是为什么在 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 ]