JS Array.apply()、new Array()、Array.form()的区别

本文内容有参考 Array.apply(),new Array(),arr =[] 三者的区别 文章

看 vue 渲染函数的时候，发现了数组的一种新的写法，之前知道 new Array(20) 可以建一个长度为20的数组，还知道 Array.form({length: 20}) 也可以建一个长度为20的数组，可是不知道这三个的区别，所以有时间我就对这三种写法写了一个总结

1. Array.apply()

先看下 MDN 对 apply() 的定义

---

apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

func.apply(thisArg, [argsArray])

参数
thisArg
必选的。在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
argsArray
可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性 请参阅本文底部内容。

---

Array.apply(null, { length: 20 }) 这里的 { length: 20 } 就是一个长度为20的类数组对象，好处是数组的每个参数都是 undefined，数组可以遍历

Array.apply(null, { length: 20 })
// [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

2. new Array()

new Array(20)和Array(20)只是创建了一个长度为20,元素是空的数组，不可以遍历

new Array(20)
// [empty × 20]

new Array(20).fill() 这样就和 Array.apply(null, { length: 20 }) 效果一样了

new Array(20).fill()
// [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

我们平时常用的

var arr = []
arr.length = 20

和

var arr = new Array(20)

是一样的

3. Array.form()

先看下 MDN 对 Array.form() 的定义

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

Array.from(arrayLike[, mapFn[, thisArg]])

参数
arrayLike
想要转换成数组的伪数组对象或可迭代对象。
mapFn 可选
如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg 可选
可选参数，执行回调函数 mapFn 时 this 对象。

Array.from({length:20})
// [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]