Array(1)和[...Array(1)]有什么区别？为何二者map执行结果不同

1. Array(1)生成的是带空槽的稀疏数组 #

当Array构造函数仅传入一个正整数参数时，它只会把数组的length属性设为对应值，不会为每个索引位置赋值，这些未赋值的位置就是空槽，不属于数组自身的有效属性，也不等于undefined。
验证代码：

console.log(Array(1).hasOwnProperty(0)) // false
console.log(Object.keys(Array(1))) // []

2. [...Array(1)]会把空槽转为实际的undefined #

展开运算符...遍历数组时，会把遇到的空槽显式填充为undefined值，生成的是没有空槽的密集数组，每个索引位置都是数组的有效属性。
验证代码：

console.log([...Array(1)].hasOwnProperty(0)) // true
console.log(Object.keys([...Array(1)])) // ['0']

3. map方法会直接跳过空槽 #

Array.prototype.map的原生逻辑只会处理数组自身实际存在的索引，空槽会被直接忽略，不会执行传入的回调函数。
所以你的示例代码运行结果为：

// 空槽被跳过，回调从未执行，返回的还是长度为1的稀疏数组
console.log(Array(1).map(() => 1)); 
// 索引0是有效属性，回调执行返回1，得到 [1]
console.log([...Array(1)].map(() => 1));

4. 为什么打印看起来一致 #

绝大多数浏览器的开发者控制台会做显示优化，把空槽渲染为undefined，所以肉眼看两个数组的打印结果没有区别，但实际内部结构完全不同。

内容的提问来源于stack exchange，提问作者user15388024