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

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

苏南大叔:javascript,如何理解数组array的切片slice()方法? - js-slice
javascript,如何理解数组array的切片slice()方法?(图5-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文的故事,是对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' ]

苏南大叔:javascript,如何理解数组array的切片slice()方法? - 基本用法slice
javascript,如何理解数组array的切片slice()方法?(图5-2)

主要注意的地方就是:

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

特殊用例,不传参数

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

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

输出:

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

苏南大叔:javascript,如何理解数组array的切片slice()方法? - slice-code-2
javascript,如何理解数组array的切片slice()方法?(图5-3)

特殊用例,结合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();

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

苏南大叔:javascript,如何理解数组array的切片slice()方法? - slice-code-3
javascript,如何理解数组array的切片slice()方法?(图5-4)

相关文章.call()用法,参考文章:

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

特殊用例,结合call和bind

这里再加上.bind()用法,参考文章:

范例代码:

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

苏南大叔:javascript,如何理解数组array的切片slice()方法? - slice-code-4
javascript,如何理解数组array的切片slice()方法?(图5-5)

相关链接

总结

更多javascript经验文章,请参考下面的链接:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js