美文网首页
JS中`Array.apply(null,Array(3))`与

JS中`Array.apply(null,Array(3))`与

作者: Blank_8c8e | 来源:发表于2021-04-19 22:40 被阅读0次

    思考: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
    

    相关文章

      网友评论

          本文标题:JS中`Array.apply(null,Array(3))`与

          本文链接:https://www.haomeiwen.com/subject/ddowlltx.html