`Array(100).map(() =＞ 1)` 为什么全为空？

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