new Array 无法使用 Array.map 的原因与解决方法|小册免费学

1.背景

前端：接口帮忙先定义一下
后端：好的好的
...
后端：好了好了
前端：数据尽快提供，我先手动mock一下（当然可以使用mock工具，这里主要是为了体现题目描述的问题）
后端：好的好的

2.主题

首先大家尝试写出以下题目的输出结果：

const array = new Array(3).map((item) => {
  return item = {
    name: '6'
  }
});
console.log(array);   // 写出打印结果

没错！！！我理想中的答案是：

[{ name : '6' }, { name : '6' }, { name : '6' }]

但是真实的答案却是：[empty × 3]

这是为什么呢？

• new Array(3) 生成的数组是 从来没有被赋过值的。
• new Array() 创建的是一个稀疏数组，对于稀疏数组 map、filter、foreach 等方法并不会调用传入的第一个参数

3.解决的方式

• fill

const array = new Array(3).fill().map((item) => {
  return item = {
    name: '6'
  }
});
console.log(array);

• join + split

Array(3).join(',').split(',').map((item)=>{return {name: '6'}})

• apply

Array.apply(null,Array(3)).map((item) => {return  {name: '6'}})

• from

Array.from({length:3}, (item) => {return  {name: '6'}})

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情