javascript中数组的splice操作

前言

大家对于切割操作或许经常用的是数组slice(根据索引值切割)和字符串split(根据分隔符分割),如下所示:

1
2
3
4
5
6
//slice操作
var colors = ['blue','red','green'];
var colors2 = colors.slice(0,2);//blue,red
//split操作
var s1 = "hello,hi,good";
var s2 = s1.split(',');//hello hi good

但其实还有一个很好用而且很强大的数组函数splice一直被人忽略,现在就让我们一起走进splice的世界。

splice介绍

splice是一个很强大的数组操作,上面所述的切割只是其中的一种,他主要用途是向数组的中部插入项,当然也可以作为切割和替换功能来使用。它的定义是:

1
array.splice(start, deleteCount[, item1[, item2[, ...]]])

其中,start是操作的起始位置,从0开始;deleteCount是删除的项数,后来的item是可选的插入项数,返回值是删除的项数,如果deleteCount为0的话返回一个空数组。那么splice是如何实现上述所说的三种操作的呢,请接着往下看。

splice的切割操作

对于切割操作的话,splice只需要指定前面两个参数start和deleteCount而不需要指定替换的操作item,与slice不同的是,slice的第二个参数是切割的末尾的下标索引值,而splice是你切割的项数,另外,slice不会改变你的原来数组,而splice会改变之前的数组。另外slice可以第二个参数可以设置负数来作为末尾的下标索引值,而splice不能(设置负数不会报错,对于原来数组不会有影响,返回值为空数组)。具体用法如下:

1
2
3
var colors = ['blue','red','green'];
var colors2 = colors.splice(1,2);//red,green
console.log(colors); //blue

上面splice2操作就是从下标1开始,切割2项,所以返回值colors2是”red,green”,而colors切割完后就剩下blue了。

splice的插入操作

对于插入操作的话,就要改变下思路,也就是说splice不能去删除项目,所以第二个参数deleteCount得为0,所以要设置3个以上参数,要开始插入的下标start,deleteCount为0,然后就是需要插入项。具体用法如下:

1
2
3
var colors = ['blue','red','green'];
var colors2 = colors.splice(1,0,"yellow","orange");//[]
console.log(colors); //blue,yellow,orange,red,green

上面的splice操作就是从下标1开始插入yellow和orange,对于原数组的数就会改变成插入以后的数组,对于colors2来说,因为这时候并没有删除项,所以返回为空数组。

splice的替换操作

对于替换操作来说,其实就是切割和插入的结合体,只要设置想要替换的项数为deleteCount的值,然后设置插入项就可以实现替换操作。具体用法如下:

1
2
3
var colors = ['blue','red','green'];
var colors2 = colors.splice(1,1,"yellow","orange");//red
console.log(colors); //blue,yellow,orange,green

上述操作就是把下标从1开始的1项替换成yellow和orange,所以colors就是替换后的数组,而colors是替换删除的项red。

splice实现数组的去重操作

对于splice的用法是可以实现数组的去重操作,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
function removeA(array){
var tmp;
for(var i = 0 ; i<array.length ; i++){
tmp = array.splice(i,1);
if(array.indexOf(tmp[0])<0){
//没有重复的
array.splice(i,0,tmp[0]);
}else{
i--;
}
}
}

做法的思路就是,遍历整个数组,然后切割出每一个元素,判断是否存在相同的元素,如果存在,切割的元素就丢弃,如果不存在,就把切割的元素放回原来的数组,这边有两个注意的地方:
1、因为tmp返回的是一个切割以后的数组,所以要取元素的话要用下标0来取;
2、如果找到重复的,丢弃tmp的同时要注意array的下标索引值已经改变,所以要用对i递减来恢复索引,不然会出现漏去重的元素。