JS中new Array(n).map无法初始化数组原因及二维数组初始化坑点

调用new Array(n)时，JS会创建一个长度为n的数组，但这个数组里的n个位置都是空槽（empty slot）——注意，这不是说这些位置存的值是undefined，只是你主动访问空槽位置时，引擎会默认返回undefined而已，本质上这些索引位置根本没有分配实际的存储空间，是数组里的“空洞”。
包括map在内的绝大多数JS数组原生迭代方法（forEach/filter/reduce等），遍历的时候都会直接跳过这些空槽，根本不会执行你传入的回调函数，所以map逻辑完全不生效，最后返回的还是带n个空槽的原数组，自然拿不到0到n-1的序列。

两者核心差异在于数组是稀疏还是稠密：

• new Array(n)生成的是稀疏数组：长度属性为n，但所有索引位都没有绑定实际值，存在空洞，迭代方法会跳过空槽
• new Array(n).fill(0)生成的是稠密数组：每个索引位都真实存储了基础类型值0，不存在空洞，迭代方法会逐位遍历、正常执行回调，这也是为什么new Array(n).fill(0).map((_, index) => index)可以正常生成目标序列数组。

补充说明：如果是手动给每个位置赋值undefined生成的数组（比如Array.from({length:n}, ()=>undefined)），哪怕每个位置的值都是undefined，它也是稠密数组，map可以正常遍历——因为这时候每个位置是真的存储了undefined值，和new Array(n)生成的空洞完全不是一个概念。

日常写代码初始化二维数组时，很容易踩以下几个坑：

• 错误写法1：new Array(n).fill(new Array(m).fill(0))
  这个写法的问题在于fill方法的传参特性：如果传入的是引用类型值（比如这里的子数组），fill不会为每个位置生成新的拷贝，只会把同一个内存引用填充到所有n个位置。最终生成的二维数组里，所有n个子数组都指向内存里的同一个数组，修改任意一个子数组的元素，所有子数组都会同步变更，完全不符合预期。
• 错误写法2：new Array(n).map(v => new Array(m).fill(0))
  这个写法踩的就是前面提到的“幽灵空槽”问题：new Array(n)生成的是全空槽的稀疏数组，map遍历的时候会直接跳过所有空槽，根本不会执行创建子数组的回调，最后返回的还是长度为n、全是空槽的数组，根本不是目标二维数组。
• 正确写法1：new Array(n).fill(0).map(v => new Array(m).fill(0))
  这个写法先用fill(0)把长度为n的稀疏数组转成了无空洞的稠密数组，后续map遍历时会逐位执行回调，给每个位置生成独立的全新子数组，既规避了空槽被跳过的问题，也不会出现多子数组共用同个引用的bug。除此之外，用Array.from({length:n}, () => new Array(m).fill(0))也能实现同样效果，写法更简洁。

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