• 解析 Array.prototype.slice.call 的作用


    先来明白 Array.prototype.slice 和 call的作用

    Array.prototype.slice

    slice(begin, end) 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
    注意: 包含 begin,但不包含 end,如slice(0, 5) 截取的是数组中第0个索引到4个索引元素,是不包含结尾索引5的。
    参考链接:
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

    call

    call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

    参考链接:
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

    Array.prototype.slice.call 作用:

    最后加一个slice js原生代码实现:

    
    // Array.prototype.slice() 实现
    
    function slice (begin, end) {
        // 创建一个新数组,所以 slice 是不影响原数组的
        var newArrary = [];
        // 开始索引
        var begin = begin || 0;
        // 结束索引,默认为当前调用数组的长度,this是调用的数组,比如 [].slice(0, 5); this指的就是 [] 这个数组对象的引用
        var end = end || this.length;
        // 用开始索引 和 结束索引 去声明一个for循环
        for (var i = begin; i < end; i++) {
            // this 指向的是调用的数组,所以这里就实现了,截取的功能
            newArrary.push(this[i]);
        }
        // 最后返回新的数组
        return newArrary
    }
    
    console.log([1, 2, 3, 4, 5].slice(0, 3));
    // 所以 slice 是不包含结束索引值的, 因为 i < end 的原因,比如这里:  0 < 3, 1 < 3, 2 < 3, 3 < 3 吗? 不小于所以跳出循环,返回结果
    // 输出结果: [1, 2, 3]
    

    部分资料引自 MDN

  • 相关阅读:
    12.3
    团队项目第一阶段冲刺第一天
    4.22
    4.21 re重要功能
    12.1
    12.2
    4.17
    4.16
    css设置子元素相对于父元素保持位置不变(含有滚动条的父元素)
    git操作和npm操作清单
  • 原文地址:https://www.cnblogs.com/xiaolantian/p/12616947.html
Copyright © 2020-2023  润新知