最近在面试中遇到过考察这两种方法的试题，而且这两个方法长得特别像，自己十分容易混淆，所以在此总结一下，并且彻底搞清楚这个问题。

splice

数组原型方法，方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。（官方定义）

语法

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

参数

start(必需)

指定修改的开始位置（从0计数）。

如果超出了数组的长度，则从数组末尾开始添加内容。

let nameArray = ['John', 'Paul', 'James', 'Tom', 'Jerry']
nameArray.splice(10, 0, 'eric')
console.log(nameArray);

// 运行结果
[ 'John', 'Paul', 'James', 'Tom', 'Jerry', 'eric' ]

如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）。

let nameArray = ['John', 'Paul', 'James', 'Tom', 'Jerry']
nameArray.splice(-1, 0, 'eric')
console.log(nameArray);

// 运行结果
[ 'John', 'Paul', 'James', 'Tom', 'eric', 'Jerry']

如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

let nameArray = ['John', 'Paul', 'James', 'Tom', 'Jerry']
nameArray.splice(-10, 0, 'eric')

// 运行结果
[ 'eric', 'John', 'Paul', 'James', 'Tom', 'Jerry' ]

deleteCount(可选)

整数，表示要移除的数组元素的个数。

如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

let nameArray = ['John', 'Paul', 'James', 'Tom', 'Jerry']
nameArray.splice(1, 10)
console.log(nameArray);

// 运行结果
[ 'John' ]

如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。

let nameArray = ['John', 'Paul', 'James', 'Tom', 'Jerry']
nameArray.splice(1)
console.log(nameArray);

// 运行结果
[ 'John' ]

如果 deleteCount是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

let nameArray = ['John', 'Paul', 'James', 'Tom', 'Jerry']
nameArray.splice(1, -1, 'eric')
console.log(nameArray);

// 运行结果
[ 'John', 'eric', 'Paul', 'James', 'Tom', 'Jerry' ]

Array.prototype.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

语法

arr.slice([begin[, end]])

参数

begin(可选)

提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(1,3))

// 运行结果[ 'bison', 'camel' ]

如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(-2))

//运行结果[ 'duck', 'elephant' ]

如果省略 begin，则 slice 从索引 0 开始。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice())

//运行结果[ 'ant', 'bison', 'camel', 'duck', 'elephant' ]

end(可选)

提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice会提取原数组中索引从 begin到end的所有元素（包含 begin，但不包含 end）。

// slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 
//（索引为 1, 2, 3的元素）。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(1,4))

//运行结果
[ 'bison', 'camel', 'duck' ]

如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(1,-2))

// 运行结果
[ 'bison', 'camel' ]

如果 end 被省略，则 slice 会一直提取到原数组末尾。

如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(0))
console.log(animals.slice(0,100))

//运行结果
[ 'ant', 'bison', 'camel', 'duck', 'elephant' ]
[ 'ant', 'bison', 'camel', 'duck', 'elephant' ]

做道题吧

// 已有数组
const names = ['John', 'Paul', 'James', 'Tom', 'Jerry']
// 依次执行以下代码
console.log(names.splice(1,2))
console.log(names);
console.log(names.slice(1,4))
console.log(names)
console.log(names.slice())
// 输出结果如何？

答案

[ 'Paul', 'James' ] at names.splice(1, 2) 
[ 'John', 'Tom', 'Jerry' ] at names
[ 'Tom', 'Jerry' ] at names.slice(1, 4) 
[ 'John', 'Tom', 'Jerry' ] at names  
[ 'John', 'Tom', 'Jerry' ] at names.slice()

对比

splice第二个参数是deleteCount，也就是删除个数；slice第二个参数是end，也就是结束的index。
splice会改变原数组，而slice不会。
splice可以向数组中添加元素，slice不行。
slice获取数组时包括begin，但是不包含end。

JS中的splice slice方法