JavaScript中slice、splice和split函数的区别与用法详解

作者:代码拾荒

时间:2026-10-30

浏览:660

本文详细解析JavaScript中易混淆的slice、splice和split三个函数。重点介绍slice截取数组或字符串副本、splice修改原数组并返回移除元素、split按分隔符分割字符串生成数组的具体用法、参数含义及边界情况,帮助开发者准确选择合适的方法。

文章目录

每次遇到slice、splice和split这三个函数时,开发者往往会感到困惑,需要查阅资料才能确认用法。既然今天再次遇到它们,不如借此机会整理一份清晰的笔记,以便日后参考。

数组与字符串的slice方法

1. slice(数组操作)

语法:array.slice(start, end)

说明:该方法用于截取数组的一部分,并返回一个包含截取元素的新数组。参数start指定截取的起始索引位置;参数end为可选参数,表示截取结束的索引位置,实际截取范围包含start但不包含end(即end对应位置的元素不被截取,需取最后一个字符位置加1)。


//如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾
var a=[1,2,3,4,5,6];
var b=a.slice(0,3);  //[1,2,3]
var c=a.slice(3);    //[4,5,6]

//如果两个参数中的任何一个是负数,array.length会和它们相加,试图让它们成为非负数,举例说明:
//当只传入一个参数,且是负数时,length会与参数相加,然后再截取
var a=[1,2,3,4,5,6];
var b=a.slice(-1);  //[6]

//当只传入一个参数,是负数时,并且参数的绝对值大于数组length时,会截取整个数组
var a=[1,2,3,4,5,6];
var b=a.slice(-6);  //[1,2,3,4,5,6]
var c=a.slice(-8);  //[1,2,3,4,5,6]

//当传入两个参数一正一负时,length也会先于负数相加后,再截取
var a=[1,2,3,4,5,6];
var b=a.slice(2,-3);  //[3]

//当传入一个参数,大于length时,将返回一个空数组
var a=[1,2,3,4,5,6];
var b=a.slice(6);  //[]

2. slice(字符串操作)

语法:string.slice(start, end)

说明:该方法用于复制字符串的一部分,构造一个新的字符串。其用法和参数规则与数组的slice方法一致:start为起始索引,end为结束索引(可选),返回的子字符串包含start索引处的字符,但不包含end索引处的字符。


//举个简单的例子
var a="i am a boy";
var b=a.slice(0,6);  //"i am a"

数组的splice方法

3. splice(数组操作)

语法:array.splice(start, deleteCount, item...)

说明:splice方法用于修改原数组,通过移除现有元素并插入新元素来实现。参数start指定从哪个索引开始移除元素;参数deleteCount指定要移除的元素数量。

如果提供了额外的参数item,这些新元素将插入到被移除元素的位置。该方法返回一个由被移除元素组成的数组。


//举一个简单的例子
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');  //a=['a','e','f','c'],b=['b']

字符串的split方法

4. split(字符串操作)

语法:string.split(separator, limit)

说明:split方法将字符串按照指定的分隔符分割成多个片段,并返回一个包含这些片段的字符串数组。可选参数limit用于限制返回数组的最大长度。参数separator可以是字符串或正则表达式。

如果separator为空字符串,则返回的数组将包含原字符串中每个字符作为单独的元素。


//再举一个简单的例子
var a="0123456";
var b=a.split("",3);  //b=["0","1","2"]

以上就是关于JavaScript中slice、splice和split三个函数的主要内容,希望对各位的学习和工作有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章