原来new Array(1) 和 [undefined]不一样

561 阅读1分钟

先看一段代码

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

以为的结果:[{name: 'stone'}, {name: 'stone'}, {name: 'stone'}, {name: 'stone'}, {name: 'stone'}]

实际的结果:[undefined × 5]

what the fuck??? 黑人问号

我以为原因是:因为我们数组里面的值是undefined,所以我们不能给undefined赋值。好的,接下来验证我的猜想。
const array = [undefined, undefined, undefined, undefined, undefined];
const newArr = array.map((item) => {
  return item = {
     name: 'stone'
   }  
});
console.log(newArr);
输出的结果:

what the fuck??? 黑人问号

什么原因导致出现这样的结果了

原来如此:developer.mozilla.org/en-US/docs/…

实际上new Array(x)这个操作不是创建一个x项都是undefined的数组,它创建的是一个只有长度的数组,里面的每项都是没有被赋过值的(可以想象new Array(5)实际上是创建了一个[ , , , , , ]的数组。

const array = [ , , , , , ];
const newArr = array.map((item) => {
  return item = {
     name: 'stone'
   }  
});
console.log(newArr);

输出的结果:[undefined × 5]

所以总结一下:map函数的回调函数只会被赋过值的项调用。new Array(1) 和 [undefined]不一样。new Array(1)没有为数组中的项赋过值,而[undefined]为数组中的项赋了一个undefined值。

解决办法

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