Array.apply(null, {length: 20})和Array(20)的理解

哎呀,由于学业繁忙(装个B先),学校资源有限(上网限流量),都好久没写博客了,今晚貌似搞懂了一个问题,所以就来和大家分享分享。

话说今晚在学习Vue.js教程里:Render函数,这一章节是发现了一个问题,就是利用下面的这个render函数可以渲染20个重复的段落:

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)  ,变成下面这样:

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

那么按照刚刚的理解,把代码换成这个样子应该是没有问题的。然后博主运行代码,发现浏览器什么都没有出来,连个错都没有报,太不给面子了。

这样子就很明显地说明了,刚刚那样子地理解应该是不对的, Array.apply(null, { length: 20 })Array(20)  这两句代码还是有区别的,那么区别是什么?接下来就是博主的理解:

博主在浏览器的Console 做了实验:

博主在控制台定义了两个数组对象,一个用Array构造函数创建的 arr1,一个是用上面所讨论的方法创建的 arr2 ,它们的 length 都为 5 ,然后博主分别输出  arr1  和  arr2 ,如下图:

 

咦,看到这里,可能有些小伙伴已经发现了区别了。其实博主也是开始有点想法了:貌似  arr2  这个数组里面的值被初始化了,并且每一项被赋的值都是  undefined  ,而  arr1  这个数组里面的每一项都只是创建了而已,并没有赋值。

了解JavaScript变量的定义的同学都知道,当我们在JavaScript里面 var 一个变量时(例如:var i;),虽然我们并没有赋值给 i  ,当时JavaScript默认把 i 的值设为  undefined 了,所以我们可以直接输出 i 而不报错。

博主为了验证自己的思路是对的做了一下实验:

博主为数组 arr1 的每一项都赋了个值:undefined  ,然后再次输出 arr1 :

到这里聪明的你发现区别了吧。是不是和我们一开始输出的  arr2  的结果一模一样了。

为了更进一步证实博主的想法,博主还做了以下实验:

render: function (createElement) {
  var arr = [undefined,undefined,undefined,undefined,undefined];
  return createElement('div',
    arr.map(function () {
      return createElement('p', 'hi')
    })
  )
}

博主把一开始的代码修改成这样子(20个undefined太长了,所以博主就创建一个长度为5 每一项的值为 undefined 的数组 arr),然后运行。什么的事情发生了。运行结果和一开始的

 

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

这个代码是一样的(请大家忽略数量的不一样哈,20个undefined太长了),运行成功了。

下面总结一下对Array.apply(null, {length: 20})和Array(20)的理解吧:

Array(20):很简单,就是创建一个 length 为 20  的数组,并且JavaScript会自动为数组的每一项赋值 undefined ,而这个 undefined 和 我们自己手动赋值的undefined 有点不一样。可以理解为JavaScript自动赋上的 undefined  相当于为数组的每个值霸个位置,日后方便我们的使用(博主自己是这么理解的,有什么不对的地方,大家记得指出)。

 Array.apply(null, {length: 20}):已这种方式创建出来的数组呢,数组中的每一项一创建出来就被我们赋上了确确实实的值 undefined ,而不仅仅是霸个位置那简单。如果大家以后想创建一个数组每一项一开始就是 undefined 的数组的话,那用这种方法听不错的。

以上就是博主对这个两个家伙的理解了。要是有哪里不对的地方,望各位看官指出,博主在此谢过了。

《转载需标明出处》

posted @ 2017-04-23 01:10  阿飞22  阅读(6149)  评论(7编辑  收藏  举报