`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() 坑了面试分。如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。

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

相关推荐

3分钟终极指南：让Navicat Premium在macOS上永久免费试用

留学赛道怎么做抖音？8人团队单月获客100+的秘密！

Parsec VDD虚拟显示器：如何实现Windows 10+系统的高性能游戏串流解决方案

更多资讯

OmniPact Dapp空投交互全流程与智能合约解析

生产级智能体平台设计：任务编排、工具管理与运行监控实践

RCM算法C++实现：稀疏矩阵带宽缩减与工程实践

上下文感知代码补全：提升开发效率的智能编程辅助

基于生成式AI的隐蔽C2通信技术解析

深入解析容器技术：从Linux命名空间到Docker架构

今日更新

AI辅助技术栈评估：提升研发决策效率60%

从生成Token到直接决策：Jev如何重塑AI Agent工程实践

32G统一内存跑大模型：内存账、TPS实测与端云分流

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？