JavaScript中split、splice、slice的用法

split()

定义与用法(字符串对象的方法)

把一个字符串分割成字符串数组
返回一个新数组
注:split() 方法不改变原始字符串。

语法

1
string.split(separator,howmany)
参数 描述
separator 可选。字符串或正则表达式,从该参数指定的地方分割 string Object。
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

实例

1
2
3
4
5
6
7
8
var str = 'hello today!'
console.log(str.split(''))     //[ 'h', 'e', 'l', 'l', 'o', ' ', 't', 'o', 'd', 'a', 'y', '!' ]
console.log(str.split('', 5))  //[ 'h', 'e', 'l', 'l', 'o' ]
console.log(str.split(' '))    //[ 'hello', 'today!' ]
console.log(str.split(' '), 1) //[ 'hello' ]
console.log(str.split('o'))    //[ 'hell', ' t', 'day!' ]
console.log(str.split('o'), 2) //[ 'hell', ' t' ]
console.log(str)   // hello today! 不改变原字符串

splice()

定义与用法(数组对象的方法)

用于添加或删除数组中的元素。
返回被删除的元素组成的数组
注:splice() 方法会改变原始数组。

语法

1
array.splice(index,howmany,item1,.....,itemX)

参数 描述
index 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。负数则表示从原数组中的倒数第几个元素开始提取
howmany 可选。规定应该删除多少元素。必须是数字,可以是 0,如果设置为0,则不会删除元素,负数也不会删除元素。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
iitem1,…,itemX 可选。要添加到数组的新元素

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var arr = ['red', 'orange', 'yellow', 'green', 'blue']
console.log(arr.splice(2))  // [ 'yellow', 'green', 'blue' ] 返回删除的元素组成的数组,即删除了索引值为2以及之后的元素
console.log(arr)    // [ 'red', 'orange' ] 原来的数组改变了


var arr = ['red', 'orange', 'yellow', 'green', 'blue']
console.log(arr.splice(1,1)) // [ 'orange' ] 删除从索引值为1开始数起的1个元素
console.log(arr)  // [ 'red', 'yellow', 'green', 'blue' ]


var arr = ['red', 'orange', 'yellow', 'green', 'blue']
console.log(arr.splice(-3,2)) // [ 'yellow', 'green' ] 从索引值5+(-3)= 2(倒数第三个元素)开始,删除两个元素,5是数组的长度
console.log(arr)   // [ 'red', 'orange', 'blue' ]

var arr = ['red', 'orange', 'yellow', 'green', 'blue']
console.log(arr.splice(2, 2, 'purple', 'pink')) // [ 'yellow', 'green' ] 从索引值为2开始删除两个元素,再插入两个元素
console.log(arr)  // [ 'red', 'orange', 'purple', 'pink', 'blue' ]


var arr = ['red', 'orange', 'yellow', 'green', 'blue']
console.log(arr.splice(3, 1, 'pink')) // [ 'green' ] 将索引值为3的元素替换为'pink',即删除索引值为3的元素,再插入一个元素
console.log(arr)  // [ 'red', 'orange', 'yellow', 'pink', 'blue' ]


var arr = ['red', 'orange', 'yellow', 'green', 'blue']
console.log(arr.splice(2, 0, 'purple', 'pink'))  // [] 不删除元素,在索引值为2的元素前面插入两个元素
console.log(arr) // [ 'red', 'orange', 'purple', 'pink', 'yellow', 'green', 'blue' ]

slice()

定义与用法(字符串对象、数组对象的方法)

操作字符串:提取一个字符串的一部分,并以新的字符串返回被提取的部分。
操作数组:从已有的数组中返回选定的元素。
注:slice()不改变原字符串或原数组

语法

1
string.slice(start,end)  //字符串
参数 描述
start 必须。要抽取的片断的起始下标。第一个字符位置为 0
end 可选。 紧接着要截取的片段结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。
1
array.slice(start,end)  // 数组
参数 描述
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 字符串
var str = 'hello today!'
console.log(str.slice(3))  // lo today! 返回索引值为3以及之后的字符所组成的字符串
console.log(str.slice(1, 7)) // ello t  返回索引值为1到7(不包括索引值为7的字符)的字符所组成的字符串
console.log(str.slice(-3))  // ay! 返回最后三个字符组成的字符串
console.log(str.slice(2, -3)) // llo tod 返回索引值为2到倒数第三个字符(不包括倒数第三个字符)所组成的字符串
console.log(str.slice(-4, -1)) //day  返回倒数第四个字符到最后一个字符(不包括最后一个字符)所组成的字符串
console.log(str)    // hello today! 不改变原字符串

// 数组
var arr = ['red', 'orange', 'yellow', 'green', 'blue']
console.log(arr.slice(3))  // [ 'green', 'blue' ]  返回索引值为3以及之后的元素所组成数组
console.log(arr.slice(1,4))  // [ 'orange', 'yellow', 'green' ]  返回索引值为1到4(不包括索引值为4的元素)的元素所组成的数组
console.log(arr.slice(-3))  // [ 'yellow', 'green', 'blue' ]  返回最后三个元素组成数组
console.log(arr.slice(2, -1))   // [ 'yellow', 'green' ]  返回索引值为2到倒数第一个元素(不包括倒数第一个元素)所组成的数组
console.log(arr.slice(-3, -1))  // [ 'yellow', 'green' ]  返回倒数第三个字符到最后一个元素(不包括最后一个元素)所组成的数组
console.log(arr)    // [ 'red', 'orange', 'yellow', 'green', 'blue' ]  不改变原数组