【数组问题】Array(20) 和 Array.apply(null, {length: 20})不同之处 数组中 empty 和 undefined

Array(20) 和 Array.apply(null,  {length: 20}) 区别

1、Array(20)

其结果是： 创建了一个长度为20，但元素均为 empty 的数组。

2、Array.apply(null, { length: 20 })

其结果是： 创建了一个长度为20，但元素均为 undefined 的数组。

3、异同

可以看出来，两者主要的不同就是生产元素的不同。empty 和 undefined 有什么异同？

相同： 

empty === undefined 

// 创建一个元素均为 empty 长度为20的数组
let arr1 = Array(20);

// 创建一个元素均为 undefined 长度为20的数组
let arr2 = Array.apply(null, { length: 10 });

// 结果
// arr1: [empty x 20];
// arr2: [undefined x 20];

console.log(arr1[0] == arr2[0]) // true
console.log(arr1[0] === arr2[0]) // true

单单从结果上看， empty 和 undefined 好像是一回事。但是，涉及到数组方法，那就大不相同了。

不同：

可以找一个迭代数组的方法，比如 map， forEach试验一下，这里选择 forEach

forEach 方法 

// 使用forEach 方法


arr1.forEach(item => {
    console.log(`arr1 -> 元素是 ${item}`)
}) // ->  没有任何输出

arr2.forEach(item => {
    console.log(`arr2 -> 元素是 ${item}`)
}) // -> 输出 undefined

结论：empty组成的数组没有遍历，而undefined遍历了。如果只是比较每个元素，没什么区别。但是涉及到数组遍历方法的时候，却大不一样。

可以这么理解： empty 就是数组的一个占位符，只是撑撑场面，充个数。所以，不能完成遍历。而undefined 代表了数组每一项已经初始化，只是没有赋一个明确的值，所以，遍历的时候还是会get到。

在 vue 文档中，介绍到渲染函数的时候，就有这么一段：

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

这也是为什么不直接 new Array（20） 一个数组的原因。