javascript，如何理解数组array的切片slice()方法？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

js中的数组array的切片功能，如何切分数组呢？本文试图对这个slice功能进行探讨。当然，这个数组的切片函数也非常基础，很容易理解。但是，你真的了解这个函数么？在文末有个这个函数的特例，也许可以稍稍颠覆一下读者对这个函数的三观。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文的故事，是对js编程中的slice函数的理解。测试环境：node@16.14.2。

基本使用方法

下面先介绍一下传统最常见的使用方式：

arr.slice(start,end)

• start，必选，设定起始位置。end，可选，设定数组的结束位置，默认到数组结尾，以0开始计数。
• start/end，如果是负数，则表示从尾部开始算起（-1指最后一个元素，-2指倒数第二个元素）。
• start <= 目标 < end。即不包括end，如果想包括，就加一，或者不传递（默认到结尾位置）。

范例代码如下：

var arr = ["pku","sunan","beijing","newsn.net"];
var a1 = arr.slice(1,2);     // 第二个到第三个（不含）
var a2 = arr.slice(-1);      // 最后一个开始
var a3 = arr.slice(0, -1);   // 不包含最后一个
var a4 = arr.slice(1);       // 第二个开始

输出值为：

[ 'sunan' ]
[ 'newsn.net' ]
[ 'pku', 'sunan', 'beijing' ]
[ 'sunan', 'beijing', 'newsn.net' ]

主要注意的地方就是：

• 从零开始计数。
• 包括start，不包括end。
• 允许负数存在，-1表示最后一个位置。

特殊用例，不传参数

下面开始说明特殊用例，也就是不走寻常路的那种。虽然所有的教程上都说start是必须传递的，但是事实上一个参数也不传递，也是可以的。测试代码如下：

var arr = ["pku","sunan","beijing","newsn.net"];
var a5 = arr.slice();       // 返回原数组

输出：

[ 'pku', 'sunan', 'beijing', 'newsn.net' ]

特殊用例，结合call

既然不传参数是可以的，那么改写this.执行也是可以的。

function test() {
    return Array.prototype.slice.call(arguments);
}
var arr1 = test("sunan","newsn.net");               
console.log(arr1);                           // [ 'sunan', 'newsn.net' ]

test()函数通过arguments变量，获得所有传递进来的参数"sunan","newsn.net"，形成一个数组。然后数组传递到.call()的第一个参数，改写了this.指向。

这个slice()方法是定义在array上的，所以，this.实际上就是改变了数组本身。相当于：

return ["sunan","newsn.net"].slice();

实际上的效果就是：定义了一个数组。

相关文章.call()用法，参考文章：

• https://newsn.net/say/js-call.html

本例子中还涉及到一个arguments变量的问题，参考文章:

• https://newsn.net/say/func-args.html

特殊用例，结合call和bind

这里再加上.bind()用法，参考文章：

• https://newsn.net/say/js-bind.html

范例代码：

function test() {
    return Array.prototype.slice.call(arguments);
}
var test2 = test.bind(undefined, "sunan");
var arr2 = test2("newsn.net");    // [ 'sunan', 'newsn.net' ]
console.log(arr2);

.bind()可以：

• 第一个参数改变this.指向。（this指的是调用对应方法的对象本身，并不局限于字面上的this）
• 其返回值是一个函数，可以再次()。
• 函数的真正的参数，可以分开传递，传递位置可以在第一个小括号，也可以在第二个小括号。

在这里例子中，首先test.bind()第一个参数undefined，改变的是test()的引用对象，毫无意义。然后所有的参数分开传递了，第一个参数sunan放在了第一个括号里面，第二个参数newsn.net放在了第二个括号里面，两者共同组成arguments变量。然后传递到了.call()的第一个参数，改变了其引用对象array。然后调用array.slice()没有后续的参数传递，所以返回原本的数组array。

相关链接

• https://newsn.net/say/js-call.html
• https://newsn.net/say/js-apply.html
• https://newsn.net/say/js-bind.html

总结

更多javascript经验文章，请参考下面的链接：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。