分析Array.apply(null, {length: 20})

vue文档中介绍渲染20个重复段落的实现方式

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

这段代码中有Array.apply(null, { length: 20 })这段代码，看起来挺有意思，这不就是创建20个空数组吗，为什么要这样写呢？

换成new Array(20)的方式来实现

(new Array(20)).map((v, i) => {
    console.log('index:', i);
})

运行发现控制台什么也没有输出，打印new Array(20)，输出结果为[ <20 empty items> ]。同时再打印Array.apply(null, {length: 20})创建的数组，输出为[undefined,undefined,undefined....]，是一个包含20个undefined的数组。

原来，使用new Array(20)方式只是初始化创建了一个长度为20的数组，但是数组中的内容并没有被初始化。

为什么包含长度为20的未初始化数组使用map却没有执行遍历呢？关于这个问题，可以参考MDN上关于map的介绍

MDN原文内容（Array.prototype.map）

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

apply的第二个参数为一个数组，当然也可以为一个类数组。所谓类数组，即包含length属性，所以{length: 20}就是一个类数组，传递给apply，就相当于一个长度为20的数组，并且每个数组的值都被初始化为undefined，所以Array.apply(null, {length: 20})就初始化为了一个包括20个值为undefined的数组。

既然值被初始化了，那么map当然能够正常遍历了，下面的语句也就能够正常打印出0-19的信息。

Array.apply(null, {length: 20}).map((v, i) => {
    console.log('index:', i);
})

这是es5的写法，在es6还可以使用Array.from()函数转换一个类数组为真正数组，所以，Array.from({length: 20})和Array.apply(null, {length: 20})是等效的。