JavaScript数组中的slice()和aplice()方法的区别

背景

由于在面试的时候在这个问题上吃了亏，当时的那个尴尬呀，自己明知道是很基础的知识，但是由于平时用的比较少，居然没有回答上来，特此在这里做一个记录，记住当时那个面试尴尬的教训！

区别

Array.slice()

Array.slice()方法返回指定数组的一个片段或者子数组。它的两个参数分别指定了片段的开始和结束的位置。返回的数组包含第一个参数指定的位置和所有到但不包含第二个参数指定的位置之间的所有数组元素，如下所示：

var a=[1,2,3,4,5,6,7];
a.slice(0,1)  //返回[1]
a.slice(0,3)  //返回[1,2,3]

脚下留心

1、如果只指定一个参数，则返回的数组将包含从开始位置到数组结尾的所有元素。如下所示：

 

a.slice(2)  //返回[3,4,5,6,7]

2、如果参数中出现了负数，它表示相对于数组最后一个元素的位置，例如，参数-1指定了最后一个元素，而-3指定了数组第三个元素，如下所示：

a.slice(-3,-1)  //返回[5,6]

3、如果不给参数，则返回的数组包含所有元素，如下所示：

a.slice()   //返回[1,2,3,4,5,6,7]

但是此处需要注意一个问题：a.slice()方法虽然返回了一个新的数组，但是不能贸然的使用该方法用作数组的拷贝。看如下代码：

var c=[{c1:1},[1,2,3]];  //定义一个元素为引用类型的数组
var b=c.slice()          //b=[{c1:1},[1,2,3]]
b[0].c1=99;              //改变b数组内部引用类型的值
b[1][0]=99;              //改变b数组内部引用类型的值
console.log(c)           //c=[{c1:99},[99,2,3]]

可以看到如果数组元素为引用类型，并没有实现深拷贝的作用，与这个方法具有同样坑的数组方法还有map()方法，如下所示：

var b=c.map(function(i){return i;})  //返回新数组，但是不能用作数组深拷贝

特别注意！

slice()方法不会修改调用的数组。如下所示：

a.slice(0,1)    //返回[1]
console.log(a)  //[1,2,3,4,5,6,7]

Array.splice()

Array.splice()方法是在数组中插入或删除元素的通用方法。不同于slice()方法，splice会修改调用的数组。

该方法可以完成三种数组的操作，分别是：

1、从数组中删除元素

2、插入元素到数组中

3、同时完成以上两种操作

splice()的第一个参数指定了插入和（或）删除的起始位置。第二个参数指定了应该从数组中删除元素的个数。如果省略第二个参数，则从起始点开始到数组结尾的所有元素都将被删除。例如：

var a=[1,2,3,4,5,6,7];
a.splice(0,2);              //返回[1,2],a=[3,4,5,6,7]
a.splice(0);                //返回[3,4,5,6,7],a=[]

splice()的前两个参数指定了需要删除的数组元素，更多紧随其后的任意个数的参数指定了需要插入到数组里面的参数，从第一个参数的指定位置开始插入。例如：

var a=[1,2,3,4,5,6,7];
a.splice(2,0,"a","b",[1,2,3])   //返回[] a=[1,2,"a","b",[1,2,3],3,4,5,6,7]
a.splice(2,2,"a","b",[1,2,3])   //返回["a","b"] a=[1,2,"a","b",[1,2,3],[1,2,3],3,4,5,6,7]

脚下留心

如果不传参数呢？不传参数不会改变调用的数组，返回[],例如：

a.splice()    //返回[] a=[1,2,"a","b",[1,2,3],[1,2,3],3,4,5,6,7]

特别注意！

splice()方法会修改调用的数组。