为何JS中map返回意外结果？new Array(5).map执行异常疑问

问题解析：为什么new Array(5).map((_, index) => index)返回空元素数组？ #

这绝对是JS新手容易踩的经典坑！我当初刚学的时候也懵了好久😂

核心原因在于**new Array(5)创建的是一个「稀疏数组」——它只是分配了长度为5的数组空间，但里面的5个位置都是未初始化的空槽**，并不是值为undefined的元素。

而map()方法的规则是：只会遍历数组中「已被初始化/赋值过」的元素，对于这些空槽，它会直接跳过，完全不会执行你传入的回调函数。所以最终你得到的还是一个有5个空槽的数组，而不是预期的[0,1,2,3,4]。

验证与解决方案 #

可以做个小对比来理解：

• 错误写法（稀疏数组，map跳过空槽）：

  new Array(5).map((_, index) => index)
  // 结果：[ <5 empty items> ]
  

• 正确写法1：用fill()先填充空槽为undefined，让数组变成正常数组

  new Array(5).fill().map((_, index) => index)
  // 结果：[0, 1, 2, 3, 4]
  

• 正确写法2：用Array.from()创建数组，它会自动把空槽转为undefined

  Array.from({ length: 5 }).map((_, index) => index)
  // 结果：[0, 1, 2, 3, 4]
  

再补充个小细节：你可以在控制台打印new Array(5)，会看到它显示为[ <5 empty items> ]，这和直接写[undefined, undefined, undefined, undefined, undefined]是不一样的——后者的每个位置都有明确的undefined值，map会正常遍历每个元素。

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