详解JS中slice函数和splice函数区别

以前是职场小白时，经常经常搞混JS中操作数组的slice和splice函数。因为这两个函数的名字非常相似，语法也类似。
现在总结一下这两个函数的差异，方便以后调用。

1.slice()

slice的定义

从已有数组中返回返回你选择的某段元素集合

slice的语法

arrayObject.slice(start, end)
注意：

1. start表示从何处开始选取， end表示从何处结束选取，start和end表示一个选取的范围；
2. start可以为负数，此时它规定从数组尾部开始算起的位置。也就是-1 ，指最后一个元素，-2 指倒数第二个元素，以此类推
3. end如果没有被指定参数，数组会包含从 start 到最后一个数组元素的所有元素
4. slice()方法不会修改数组本身，而是返回所选取范围的数组元素。如果想删除数组中的某一个元素，需要使用splice()
   下面来看一些例子
5. 这里的取值范围是0-2（start-end），因为数组的下标是从0开始，所以这里的2就是下面数组中的 javascript元素
   这里需要注意的是0-2选取的元素是html和css，并不包括javascript

var arr = ['html', 'css', 'javascript', 'jQurery', 'Ajax'];
var sliceArr = arr.slice(0, 2);
//sliceArr值为['html', 'css']

如果只有start，则会选择start开始到end之间的所有数组元素

var arr = ['html', 'css', 'javascript', 'jQurery', 'Ajax'];
var sliceArr = arr.slice(1);
//sliceArr值为['css', 'javascript', 'jQurery', 'Ajax']

如果start是负数，则会从数组尾部开始算起。这里只有start没有end,且start为负数，所以只能获取到最后1个数组元素

var arr = ['html', 'css', 'javascript', 'jQurery', 'Ajax'];
var sliceArr = arr.slice(-1);
//sliceArr值为['Ajax']

如果你想获取除了最后1个元素以外的全部元素

var arr = ['html', 'css', 'javascript', 'jQurery', 'Ajax'];
var sliceArr = arr.slice(0, -1);
//sliceArr值为['html', 'css', 'javascript', 'jQurery']

如果start和end都是负1，结果为空

var arr = ['html', 'css', 'javascript', 'jQurery', 'Ajax'];
var sliceArr = arr.slice(-1, -1);
//sliceArr值为[]

2.splice()

splice的定义

从数组中添加或删除元素，然后返回被删除的数组元素

splice的语法

arrayObject.splice(index,howmany,item1,…,itemX)
注意：

1. index表示从什么位置开始添加或删除数组元素
2. howmany表示删除的元素数量，如果为0，则表示不删除数组元素
3. tem1,…,itemX表示新增的数组元素
4. splice()方法会改变原始数组
5. 不管index是负数还是正数，截取元素的顺序是从左到右的；
   下面来看一些例子
   从第3个元素（即 javascript）开始且不删除元素，并在第3个元素前面新增1个元素vue

var arr = ['html','css','javascript','jQuery','Ajax'];
 arr.splice(2, 0, 'vue');
//arr['html','css','vue','javascript','jQuery','Ajax']

从第3个元素开始且删除1个元素（这里删除的元素是 javascript），并在原来第3个元素的位置新增1个元素vue

var arr = ['html','css','javascript','jQuery','Ajax'];
 arr.splice(2, 1, 'vue');
//arr['html','css','vue','jQuery','Ajax']

从最后1个元素开始并删除最后1个元素，同时在删除的最后1个元素的位置新增1个元素hello

var arr = ['html','css','javascript','jQuery','Ajax'];
 arr.splice(-1, 1, 'vue');
//arr['html','css','javascript','jQuery','vue']

从最后1个元素开始且不删除元素，同时在最后1个元素前面新增1个元素hello

var arr = ['html','css','javascript','jQuery','Ajax'];
 arr.splice(-1, 0, 'vue');
//arr['html','css','javascript','jQuery','vue','Ajax']

截取到数组的最后一个元素后会停止

var arr = ['html','css','javascript','jQuery','Ajax'];
 arr.splice(-1, 2);
//arr['html','css','javascript','jQuery']