话说今晚在学习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  的结果一模一样了。

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

  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 的数组的话,那用这种方法听不错的。

原文地址:http://www.cnblogs.com/afeihome/p/6750539.html

Array.apply(null, {length: 20})和Array(20)的理解的更多相关文章

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

    Array.apply(null, { length: 5 }) 和 Array(5)有什么不同 注意:ES5,apply函数的第二个参数除了可以是数组外,还可以是类数组对象 // 类转成真正的数组 ...

  2. Array.apply(null,{length:6}).map()

    map定义和方法 map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值. map()方法按照原始数组元素顺序依次处理元素. 注意: map不会对空数组进行检测 map不会改变原始 ...

  3. JavaScript中如何理解如何理解Array.apply(null, {length:5})

    先来看一个问题: 如何理解Array.apply(null, {length:5})的{length:5}? 我测试过Array.apply(null, {length:5}) //返回[undefi ...

  4. Array.apply(null,{length:20})与new Array(20)的区别

    Array.apply(null,{length:20}) 这句代码的实际意义:创建长度为20的一个数组,但并非空数组. 跟new Array(20)的区别在于,前一种创建方式,得到的数组中的每一个元 ...

  5. 完全解析Array.apply(null, { length: 1000 })

    Array.apply(null, { length: 1000 }) 点击打开视频讲解更加详细 在阅读VueJS教程时有这么段demo code: render: function (createE ...

  6. Array.apply(null, {length: 2}) 的理解

    // apply 的第二参数通常是数组 但是也可以传递类数组对象{length: 2}console.log(Array.apply(null, {length: 2})) // [undefined ...

  7. Array.apply 方法的使用

    Array.apply(null, {length: 5}) length为特殊字段,意思是生成一个长度为5的数组,由于没赋值,所以都是undefined; 如果要赋值,可以这样 console.lo ...

  8. 33. Search in Rotated Sorted Array & 81. Search in Rotated Sorted Array II

    33. Search in Rotated Sorted Array Suppose an array sorted in ascending order is rotated at some piv ...

  9. PAT 1039 到底买不买(20)(20 分)

    1039 到底买不买(20)(20 分) 小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要 ...

随机推荐

  1. lanmp环境中php版本的升级为7.1

    查看php版本的信息 vim  ./lib/phps.sh 设置权限   chmod 755 ./lib/phps.sh 下载版本  ./lib/phps.sh  7.1.4 查看版本 php -v ...

  2. CSS之transform-origin属性

    设置旋转元素的基点位置 语法 transform-orign:0 100% 0 transform-origin: x-axis y-axis z-axis; x-axis 定义视图被置于 X 轴的何 ...

  3. unitest 测试集 实例

    -->baidy.py #coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.by import B ...

  4. Linux命令详解-file

    file命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 1.命令格式: file [ -bchikL ...

  5. 先天性肾上腺增生症(ACH)

    先天性肾上腺增生症 类型 症状 并发症 治疗 情感支持 产前筛查 预防 什么是先天性肾上腺皮质增生症? 先天性肾上腺增生症(CAH)是一组影响肾上腺的遗传性疾病.肾上腺产生激素皮质醇和醛固酮.CAH是 ...

  6. React Router页面传值的三种方法

    文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831

  7. python-day73--django-用户验证

    一.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1 .authenticate()  ...

  8. Java语言中的值传递与引用传递

    Java应用程序中永远不会传递对象,而只会传递对象应用,因此,按对象引用传递. (1)      Int作为参数传递时,对形参值得修改不会影响到实参: (2)      StringBuffer作为参 ...

  9. List Available DBCC Commands

    DBCC Commands or Database Consistency Checker commands have been with SQL Server from its early ages ...

  10. 【转】给DataTable和DataRow扩展方法,直接转换为对象集合或对象

    /// <summary> /// 类 说 明:给DataTable和DataRow扩展方法,直接转换为对象集合或对象 /// 补充说明:此扩展类可以极大的简化操作,但是性能低下,大数据以 ...