`Array(100).map(() =＞ 1)` 为什么全为空？
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
问题场景
群里有位同学在刷 LeetCode，想初始化一个长度为 100 的全 1 数组：
const arr=Array(100).map(()=>1)console.log(arr.length)//100console.log(arr[0])//undefined ❓ console.log(arr.every(v=>v===1))//false❓100 个元素一个都没映射成功。 更诡异的是，arr.length 确实是 100，但 for…of 遍历却循环了 0 次。这是 JavaScript 最具迷惑性的坑之一。
原因分析
关键概念：稀疏数组（Sparse Array）
Array(100) 创建的是一个稀疏数组——它只有 length 属性被设置为 100，内部没有任何实际元素，即"空槽位"（empty slots）。
打开浏览器控制台验证：
const a=Array(3)console.log(a)//[empty ×3]console.log(0ina)//false— 索引0根本就不存在！ console.log(Object.keys(a))//[]— 没有 keymap、forEach、filter、reduce、every、some 等所有迭代方法都会跳过空槽位，这就是映射不起作用的根本原因。
对比一下：
// 真实元素 vs 空槽位 const real=[undefined, undefined, undefined]console.log(0inreal)//true— 索引存在 real.map(x=>1)//[1,1,1]const sparse=Array(3)console.log(0insparse)//false— 索引不存在 sparse.map(x=>1)//[empty ×3]解决方案
生成填充数组的最佳实践：
方案一：Array.from（推荐 ✅）
const arr=Array.from({length:100},()=>1)// 或简写 const arr=Array.from({length:100},()=>1)Array.from 会主动遍历 length 并在每个索引上调用回调，不会跳过。
方案二：.fill().map() 组合
const arr=Array(100).fill().map((_, i)=>i)// 先生成密集数组再 map.fill() 会用实际值填充所有空槽，之后再 map 就不会跳过了。
方案三：扩展运算符（ES6+）
const arr=[...Array(100)].map(()=>1)展开运算符会遍历迭代器，而 Array(100) 的迭代器会生成 undefined 填充空槽，结果变成一个密集数组。
方案四：Array.apply 黑科技
const arr=Array.apply(null, Array(100)).map(()=>1)原理相同——apply 会将稀疏数组展平为密集数组。
实用场景：生产中常踩的雷
场景 1：假分页渲染
// ❌ 踩坑写法 const skeleton=Array(loading ?10:0).map(()=><Skeleton />)// 不会渲染任何骨架屏！ // ✅ 正确写法 const skeleton=Array.from({length: loading ?10:0},()=><Skeleton />)场景 2：稀疏 JSON 反序列化
const json='[1, , 3]'// JSON 中的空元素 const arr=JSON.parse(json)console.log(arr)//[1, empty,3]arr.map(x=>x *2)//[2, empty,6]— 你丢了一个元素！场景 3：删除元素不缩容
const arr=[1,2,3,4,5]delete arr[2]// 慎用！这会制造空槽！ console.log(arr.map(x=>x))//[1,2, empty,4,5]始终用 splice 代替 delete 删除数组元素。
要点总结
一句话记忆法：
Array(n) 造的是"鬼屋"——有门牌号但里面没人住；迭代方法只会给"活人"敲门。
实战中，初始化数组始终用 Array.from({ length }) 或 […Array(n)]，别被 Array(n).map() 坑了面试分。
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。