JS中`Array.apply(null,Array(3))`与`Array(3)`的区别是什么？

思考：Array.apply(null,Array(3)) , 为何不直接使用new Array(3)？

let a = new Array(3);
// 此处单纯是是一个长度为3的数组，其内在并没有被赋值
console.log(a); // [empty x 3]

let a1 = a.map(i => {
    return 'sans';
})
console.log(a1); // [empty x 3]

上述a1返回的仍然是[empty x 3],这涉及到Array.prototype.map()的特性

map方法会给原数组中的每个元素按顺序调用以此callback函数。callback每次执行后的返回值（包括undefined）组合起来一个新数组。callback函数只会在有值的索引上被调用；<mark>从来没有被赋值或者使用delete删除的索引则不会被调用</mark>

let b = Array.apply(null, Array(3));
console.log(b);  // [undefined, undefined, undefined]
let c = Array.apply(null, [undefined, undefined, undefined]);
console.log(c);  // [undefined, undefined, undefined]
let d = Array(undefined,undefined,undefined);
console.log(d);  // [undefined, undefined, undefined]

使用Array.apply(null, Array(3))实际上相当于Array.apply(null,[undefined,undefined,undefined])，也就是Array(undefined,undefined,undefined)

在Vue官方文档中有一段关于Array.apply(null, {length： 20})的{length: 20}实际上是一个可迭代的对象，是个类数组对象。

let a = Array.apply(null, {length: 20});
console.log(a); // [undefined * 20];

let b = Array({length: 20});
// 此处是在索引为0的位置传入了一个 长度为20的空数组
console.log(b); // [[empty * 20] ]

在ES6中新增了扩展操作符，对可迭代对象使用该操作符，可将其作为参数传入，将可迭代对象进行拆分，将迭代返回的每个值单独传入。

let a = Array.apply(null, Array(3));
console.log(a); //   [undefined, undefined, undefined
let b = Array(...Array(3));
console.log(b); //   [undefined, undefined, undefined