mock数据的几种方式，及踩坑

场景

我有一个object信息

let info = {
  name:'张三',
  age:18,
  sex:'男'
}

想mock1000条数据,并且name做一个标识，变为张三0，张三1，张三2 ...张三999

方案

方法一

Array.fill

let info = {
  name:'张三',
  age:18,
  sex:'男'
}
let infoList = Array(10).fill(info)
let newList = infoList.map((item,index)=>{
 return {
    ...item,
    name:item.name + index
 }
})
console.log(newList);

提问：map可以换成forEach吗？

小试一下

let info = {
  name:'张三',
  age:18,
  sex:'男'
}
let infoList = Array(10).fill(info)
infoList.forEach((item,index)=>{
  item.name = item.name + index;
})
console.log(infoList);

打印出来发现：

这是为什么呢？

info 是一个对象，Array(10).fill(info) 会创建一个长度为10的数组，并且每个元素都指向同一个 info 对象。这意味着任何对其中一个元素的修改都会反映到所有元素上，因为它们实际上是同一个对象。 使用 forEach 遍历 infoList 数组，并将每个对象的 name 属性拼接上当前索引值。由于所有元素都是同一个对象的引用，每次迭代时对 name 的修改都会累积起来。

方法二

let info = {
  name:'张三',
  age:18,
  sex:'男'
}
let infoList = Array.from({ length: 20 }, (_, index) => ({
  ...info,
  name: `张三${index + 1}`
}));

console.log(infoList);