完全解析Array.apply(null, { length: 1000 })
Array.apply(null, { length: 1000 })
在阅读VueJS教程时有这么段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)也可以实现这个功能啊,为啥非要写那么复杂呢?于是乎就想,如果是这样子,那么我把这一段代码换成 Array(20) ,变成下面这样:
render: function (createElement) {
return createElement('div',
Array(20).map(function () {
return createElement('p', 'hi')
})
)
}
对比代码:
let apply = Array.apply(null, { length: 20 }).map(function (item, index) {
return {
index: index,
};
});
console.log("Array.apply", apply);
let data = Array(20).map(function (item, index) {
return {
index: index,
};
});
console.log("Array()", data);
效果图:
那么按照刚刚的理解,把代码换成这个样子应该是没有问题的。然后运行代码,发现浏览器什么都没有出来,连个错都没有报,这样子就很明显地说明了,刚刚那样子地理解应该是不对的, Array.apply(null, { length: 20 })和Array(20) 这两句代码还是有区别的,那么区别是什么?
基础1: Array构造函数
直接调用Array函数跟new方式调用是等价的,即:
let a = Array(2); // 等价于let a = new Array(2);
表示:创建一个长度为2的数组,注意该数组的元素并没有被初始化,即:
console.log(0 in a); // false
console.log(1 in a); // false, 因为数组下标0,1还未初始化
console.log(a[0]); // undefined, 因为数组下标0还未初始化,访问不存在的属性返回undefined
基础2: apply函数
ES5开始apply函数的第二个参数除了可以是数组外,还可以是类数组对象(即包含length属性,且length属性值是个数字的对象)。对象{length: 2}就是一个类数组对象,因为没有初始化下标0,1的值,所以获取0,1下标的值得到的都是undefined。
console.log(a[0]); // undefined
console.log(a[1]); // undefined
// 可以转成真正的数组
var a = Array.prototype.slice.call({length: 2});
console.log(Array.isArray(a)) // true
再看表达式Array.apply(null, { length: 2})的值
温故了基础后再看表达式Array.apply(null, { length: 2 })他就等价于:
// 1 熟悉一点: {length: 2}作为Array.apply第二个参数等同于[undefined, undefined]作为Array.apply第二个参数
Array.apply(null, [undefined, undefined]);
// 2 再熟悉一点:apply方法的执行结果
Array(undefined, undefined);
// 3 再再熟悉一点:Array方法直接调用和new方式调用等价
new Array(undefined, undefined);
这样就很容易知道该表达式的值是一个长度为2,且每个元素值都被初赋值为undefined的数组(注意此时不是数组元素没有初始化,而是初始化成undefined,这就是跟Array(2)的区别)。
为啥非要写那么复杂呢?
即map函数并不会遍历数组中没有初始化或者被delete的元素(有相同限制还有forEach, reduce方法)。OK,疑问到此终于真相大白了:写这么“复杂”就是为了实现:创建一个长度为20,且每个元素都被初始化的数组。这样map方法就可以循环20次了。
// 被初始化的数组
let apply = Array.apply(null, { length: 20 }).map(function (item, index) {
return {
index: index, // 循环20次
};
});
// 未被初始化的数组
let data = Array(20).map(function (item, index) {
return {
index: index, // 不会被执行
};
});
如果为了少写几个字的话还可以把该表达式修改成:
Array.apply(null, Array(20)); // 第二个参数用Array(20)代替{length: 20}
还可以使用ES6 API创建初始化数组:
// 方法1:
Array.from({length: 20})
// 方法2
Array(20).fill(null)
完全解析Array.apply(null, { length: 1000 })的更多相关文章
- Array.apply(null,{length:20})与new Array(20)的区别
Array.apply(null,{length:20}) 这句代码的实际意义:创建长度为20的一个数组,但并非空数组. 跟new Array(20)的区别在于,前一种创建方式,得到的数组中的每一个元 ...
- 分析Array.apply(null, { length: 5 })
Array.apply(null, { length: 5 }) 和 Array(5)有什么不同 注意:ES5,apply函数的第二个参数除了可以是数组外,还可以是类数组对象 // 类转成真正的数组 ...
- JavaScript中如何理解如何理解Array.apply(null, {length:5})
先来看一个问题: 如何理解Array.apply(null, {length:5})的{length:5}? 我测试过Array.apply(null, {length:5}) //返回[undefi ...
- Array.apply(null,{length:6}).map()
map定义和方法 map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值. map()方法按照原始数组元素顺序依次处理元素. 注意: map不会对空数组进行检测 map不会改变原始 ...
- Array.apply(null, {length: 20})和Array(20)的理解
话说今晚在学习Vue.js教程里:Render函数,这一章节是发现了一个问题,就是利用下面的这个render函数可以渲染20个重复的段落: render: function (createElemen ...
- Array.apply(null, {length: 2}) 的理解
// apply 的第二参数通常是数组 但是也可以传递类数组对象{length: 2}console.log(Array.apply(null, {length: 2})) // [undefined ...
- Array.apply 方法的使用
Array.apply(null, {length: 5}) length为特殊字段,意思是生成一个长度为5的数组,由于没赋值,所以都是undefined; 如果要赋值,可以这样 console.lo ...
- iOS 后台返回json解析出现的null的解决办法
在后台返回值为Null为空时,我们代码没有判断时,程序就会崩溃.当时一直很疑惑是为啥,后来发现是数据问题,由于服务器的数据库中有些字段为空,然后以Json形式返回给客户端时就会出现这样的数据.当我们通 ...
- Math.max.apply(null,arr)求最大值
1.首先了解一下call和apply call 和 apply 的第一个参数是null/undefined时函数内的this指向window 或global call/apply 用来改变函数的执行上 ...
随机推荐
- 实现领域驱动设计 - 使用ABP框架 - 创建实体
用例演示 - 创建实体 本节将演示一些示例用例并讨论可选场景. 创建实体 从实体/聚合根类创建对象是实体生命周期的第一步.聚合/聚合根规则和最佳实践部分建议为Entity类创建一个主构造函数,以保证创 ...
- cmd命令与bat编程
命令解压缩文件 winrar 命令行解压文件 winrar x 要解压的文件 要解压到的路径 (保存压缩文件内的目录结果) 直接覆盖 -o+ 覆盖已存在文件 在不提示 ...
- Python selenium 实现大麦网自动购票过程
一些无关紧要的哔哔: 大麦网是中国综合类现场娱乐票务营销平台,业务覆盖演唱会. 话剧.音乐剧.体育赛事等领域今天,我们要用代码来实现他的购票过程 开搞! 先来看看完成后的效果是怎么样的 开发环境 版 ...
- linux查询文件或者文件夹
查找目录:find /(查找范围) -name '查找关键字' -type d // 查找fastdfs_storage_data文件夹 find / -name fastdfs_storage_da ...
- appium实现简单的功能测试
实现思路 思路: 1.获取capabilities信息 2.启动app(包含安装过程) 3.检查是否安装成功 4.卸载app 5.检查是否卸载成功 6.执行×3 from time import sl ...
- Tapdata 实时数据融合平台解决方案(四):技术选型
作者介绍:TJ,唐建法,Tapdata 钛铂数据CTO,MongoDB中文社区主席,原MongoDB大中华区首席架构师,极客时间MongoDB视频课程讲师. 常见搭建数据中台的技术产品 数据中台包括: ...
- Ros的通信第一课
//////////////////////////Ros创建发布者talker//////////////////////////////////////////////////////////// ...
- word count的reduce过程以及项目打包部署
map过程已经写完了,上面那个流程我们涉及到了泛型以及序列化,我们要知道每个参数代表的含义,这样有助于我们理解整个流程. 下面我们开始reduce,这个过程我们要把map输出的键值对把key值相同的放 ...
- PHP goto
if (true){ echo "run if\n"; goto fly; } else{ fly: echo "run else"; }
- Win10系统下使用Django2.0.4+Celery4.4.2+Redis来实现异步任务队列以及定时(周期)任务(2020年最新攻略)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_153 首先明确一点,celery4.1+的官方文档已经详细说明,该版本之后不需要引入依赖 django-celery 这个库了,直 ...