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
上一篇下一篇

猜你喜欢

热点阅读