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

Posted 2020-11-28 Stack Ocean

先来明白 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