JS中如何生成大长度数组

在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的数组来讲，当操作大批量的元素的时候，直接根据下标操作，反而要比经过各种常见的迭代方法要快。