JS中`Array.apply(null,Array(3))`与
2021-04-19 本文已影响0人
Blank_8c8e
思考: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