在JavaScript中，如果想生成一个大长度的数组，比如10000，或者100000。大致可以用以下几种不同的模式
- LOOP方式
通过循环代码生成大数组里面的每一个元素是最简单的方法。常用的有for，while，do-while。基本的操作大同小异，先生成一个空数组或者指定长度的数组。然后采用push往空数组中添加元素或者通过下标修改指定长度的数组中的元素。大致代码如下
// 空数组模式
var start = new Date().getTime()
var array = []
for (let i=0; i<10000000; i++) {
array.push(i)
}
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 139
// 指定长度数组模式
var start = new Date().getTime()
var array = Array(10000000)
for (let i=0; i<10000000; i++) {
array[i] = i
}
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 45
- 从一个数组再生成另一个数组模式
这种方式本质还是一种loop方式，只是通过对一个已经存在的数组进行遍历/迭代，生成一个新的数组而已。此时使用的方法，有map或者from。代码如下
// map 方法1
var start = new Date().getTime()
var array = new Array(10000000).fill().map((item,index) => {return index})
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 1829
// map 方法2
var start = new Date().getTime()
var array = new Array(10000000).toString().split(',').map((item,index) => {return index})
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 2071
// map 方法3
var start = new Date().getTime()
var array = Array.apply(null, Array(10000000)).map((item,index) => {return index})
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 32 * 100
// from 方法1
var start = new Date().getTime()
var array = Array.from({length: 10000000}, (v,index) => {return index})
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 1687
// from 方法2
var start = new Date().getTime()
var array = Array.from(Array(10000000), (v,index) => {return index})
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 1436
// from 方法3
var start = new Date().getTime()
var array = Array.from(Array(10000000).keys())
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 1366
var start = new Date().getTime()
var array = [...Array(100000).keys()]
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 32
其中的主要在于如何找到符合长度的已经存在的数组，一般是新建Array()，需要注意的是。单纯的Array(100000)并不能使用map函数，但可以使用from函数。在MDN的map的解释如下:
map方法会给原数组中的每个元素都按顺序调用一次callback函数。callback每次执行后的返回值（包括undefined）组合起来形成一个新数组。callback函数只会在有值的索引上被调用；那些从来没被赋过值或者使用delete删除的索引则不会被调用
在MDN中from的解释如下：
Array.from()可以通过以下方式来创建数组对象：
- 伪数组对象（拥有一个
length属性和若干索引属性的任意对象）- 可迭代对象（可以获取对象中的元素,如 Map和 Set 等）
而Array(100000)创建的恰恰是一个稀疏数组，本质上只是一个proto为Array(0)，并拥有一个length属性为100000的对象。也就是为什么Array(100000)可以在from中使用，但在map中不适用。
- 递归方法
递归自调用方法，指的是在函数代码中，调用自身。递归方法需要在代码中设置跳出条件，一般在执行代码后，进行判断，再决定是继续递归调用自身，还是跳出。
var start = new Date().getTime()
var a = []
function arr (length) {
if (a.length < length) {
a.push(a.length)
arr(length)
}
}
arr(10000000)
var end = new Date().getTime()
var cost = end - start
console.log('cost:', cost) // cost: 3 * 1000
性能比较
当需要生成和下标一样的元素时，循环使用下标赋值最快。ES6的[...]展开符的时间也相差无几。当需要生成同一元素时，fill和下标赋值最快。
1：push vs [i]
在使用push的时候，每次JS需要先找到当前索引的最大值，再在此基础上生成新的索引值，然后对新的索引值进行赋值。而[i]则是直接对相应的索引赋值。
2：map和from
两者的性能相差不大。都要比[i]下标方法，因为在每一个元素的生成过程中，都存在，先根据索引取元素，再根据callback进行执行，最后将结果赋值到对应新数组的索引中去。
3：[...Array(10000).keys()] 和 Array(10000).fill(1)
这两种方法一个用于生成下标元素，一个用于生成同一元素，性能和[i]差不多。keys()返回一个迭代器，只需要每次执行迭代，然后将数据赋值到新的元素上。执行过程和[i]类似，fill()的执行同理。结论
对于数组来讲，它本身是一个Object。其中的索引等同于Object的key，且以字符的形式表示。所以a[100] == a['100']。Array的length只一个表征当前Array中最大可用索引(数字)的子项。代码如下
var a = []
a['t'] = 1
console.log(a.length) // 0
a[10] = 2
console.log(a.length) // 11
a['20'] = 3
console.log(a.length) // 21
因此，对与JS的数组来讲，当操作大批量的元素的时候，直接根据下标操作，反而要比经过各种常见的迭代方法要快。
