chaihongjun.me

Javascrip中经常弄混的split(),slice()和splice()

在学习JS的字符串和数组中,我们遇到过这三个函数split(),slice()和splice(),特别是后两个函数,在运用过程中,经常会模糊他们的区别。

我们直接从MDN的定义来说明区分它们的区别:

Array.prototype.splice() 

splice:粘接。

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容 。原始数组会被修改。

可以看出splice()是针对Array类型操作,其他比如字符串无法操作

语法:

array.splice(start) 

array.splice(start, deleteCount) 

array.splice(start, deleteCount, item1, item2, ...)

参数说明:

start:表示的是从0开始计数的索引

deleteCount:整数,表示要移除的数组元素的个数。如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

如果deleteCount被省略,则其相当于(arr.length - start)。

item1, item2, ...:表示被添加的元素。如果没有,则splice()则只是做删除。

以上可以看出splice()会对被操作的数组进行变动。

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); // 从索引为2的位置删除一项(也就是'drum'这一项)
// myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]


Array.prototype.slice()

slice:切片的意思,理解剪切一部分。

slice() 方法返回一个从开始结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

可以看出slice()也是针对Array类型操作,其他比如字符串无法操作

语法:

array.slice() 

array.slice(begin) 

array.slice(begin,end)

参数说明:

begin:表示从0开始计数的索引.如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略了beign,则从索引0开始。

end:结束索引值.在该索引处结束提取原数组元素(从0开始)。slice会提取原数组中索引从 begin 到 end的所有元素(包含begin,但不包含end)。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']


String.prototype.split()

split() 方法将一个String对象分割成字符串数组,通过将字符串分成子串。

语法:

str.split([separator[, limit]])

参数说明:

separator:指定用来分割字符串的字符(串)。separator 可以是一个字符串或正则表达式。 如果忽略 separator,则返回整个字符串的数组形式。如果 separator 是一个空字符串,则 str 将会把原字符串中每个字符的数组形式返回。

limit:一个整数,限定返回的分割片段数量。split 方法仍然分割每一个匹配的 separator,但是返回的数组只会截取最多 limit 个元素。

"Webkit Moz O ms Khtml".split( " " )   // ["Webkit", "Moz", "O", "ms", "Khtml"]


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:chaihongjun»