Demo code：

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

其中这个表达式Array.apply(null, { length: 20 })有点让人费解。第一感觉这个表达式就是为了创建一个长度为20的数组，但表达式Array(20)也可以实现这个功能啊，为啥非要写那么复杂呢？看来情况没那么简单。。。

来自MDN描述）:

It is not called for missing elements of the array (that is, indexes that have never been set, which have been deleted or which have never been assigned a value).

即map函数并不会遍历数组中没有初始化或者被delete的元素（有相同限制还有forEach, reduce方法）。OK，疑问到此终于真相大白了：写这么“复杂”就是为了实现：创建一个长度为20，且每个元素都被初始化的数组。这样map方法就可以循环20次了。

// 被初始化的数组
Array.apply(null, {length: 20}).map(function(val, index){
   console.log(index); // 循环20次
});
// 未被初始化的数组
Array(20).map(function(val, index){
   console.log(index); // 不会被执行
});

其实这已经是实现该功能很简洁的写法了，不得不佩服vuejs文档作者的基础功力。

如果为了少写几个字的话还可以把该表达式修改成：

Array.apply(null, Array(20)); // 第二个参数用Array(20)代替{length: 20}

还可以使用ES6 API更直观表达意图：

// 方法1：
Array.from({length: 20})

// 方法2
Array(20).fill(null)

Apply函数

Array.prototype.map方法

ITPub博客

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

最新文章