为何用map调用Image构造函数返回全为空对象的数组？

核心原因 #

Array(5)创建的是稀疏数组——它的长度被设为5，但数组里的5个位置都是未初始化的「空位」（不是undefined，是根本不存在元素）。而map方法的规则是：只遍历数组中已存在的、有实际值的元素，会直接跳过这些空位，所以你的回调函数() => new Image()根本没被执行过，最终得到的还是原来的稀疏数组，控制台会把空位显示为空对象，造成“全是空对象”的错觉。

验证与解决办法 #

先确认空位的存在 #

可以用Object.keys()查看数组的实际元素键：

console.log(Object.keys(Array(5))); // 输出 []，说明数组里没有任何实际元素

正确生成目标数组的方式 #

如果要创建包含5个Image实例的数组，有几种靠谱的写法：

• 用Array.from，它会遍历所有索引（包括空位对应的索引）：

  const foo = Array.from({length: 5}, () => new Image());
  

• 先用fill填充初始值，再调用map：

  const foo = Array(5).fill(null).map(() => new Image());
  

• 用展开运算符把稀疏数组转成非稀疏数组：

  const foo = [...Array(5)].map(() => new Image());
  

额外说明 #

稀疏数组的空位和undefined不是一回事：比如[undefined, undefined]是包含两个元素的数组，map会正常遍历；但Array(2)是长度为2但没有元素的数组，map会直接跳过这些位置。控制台把空位显示为空对象，容易和undefined混淆，但本质是数组里根本没有这些元素。

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