JS 数组方法 splice 完全解读

（一）splice方法

splice 方法用于数组或伪数组，根据参数个数和形式的不同，可以在数组中删除指定元素或者插入元素、替换元素。

1. 参数个数为 1 的情况

1.1 语法

arr.splice(i)

当 splice 方法的参数只有 1 个的时候（i），表示删除数组中索引为 i 及 i 之后的所有元素。返回删除的元素，数组原地修改。其中，参数 i 是整数。
对于 i 分情况：

i 为非负整数：删除数组中索引为 i 及 i 之后位置上所有的元素
i 为负整数：索引从后往前计算，最后一位索引是 -1，倒数第二位是 -2，依次类推。删除 i 及 i 之后的所有元素。

1.2 举例

删除数组中最后三个元素

var a = [1, 2, 3, 4, 5]
a.splice(-3)
console.log(a) // [1, 2]

清空数组

var a = [1, 2, 3, 4, 5]
a.splice(0) // 或 a.splice(-5)
console.log(a) // []

2. 参数个数为 2 的情况

2.1 语法

arr.splice(i, j)

当 splice 方法有两个参数时，两个参数必须均为整数。表示从数组中索引为 i 开始删除，一共删除 j 个元素。

2.2 示例

删除数组中开头的 3 个元素

var a = [1, 2, 3, 4, 5]
a.splice(0, 3)
console.log(a) // [4, 5]

只留下数组值第一个和最后一个元素

var a = [1, 2, 3, 4, 5]
a.splice(1, a.length - 2)
console.log(a) // [1, 5]

从索引 -2 的位置开始删除 2 个元素

var a = [1, 2, 3, 4, 5]
a.splice(-2, 2)
console.log(a) // [1, 2, 3]

3. 参数个数为 3 或 3 个以上的情况

3.1 语法

a.splice(i, j, e1, e2, ...)

i：整数，表示索引的起始位置
j：整数，表示删除的个数
e1、e2、...：删除相应元素之后要添加的元素

当 splice 方法有 3 个参数时，表示从索引为 i 位置开始删除 j 个元素，然后在从 i 位置添加 e1,e2,...，返回删除的元素，原地修改。

若 j 为 0，则表示一个元素也不删除，则元素从 i 前一个位置开始插入
若 j > 0，则表示从 i 位置开始（包括 i 位置）删除 j 个元素，然后从 i 后面开始插入。

3.2 示例

替换索引位置为 2 的元素的值为 'aaa'

var a = [1, 2, 3, 4, 5]
a.splice(2, 1, 'aaa')
console.log(a) // [1, 2, 'aaa', 4, 5]

a.splice(2, 1, 'aaa') 表示从索引为 2 开始，删除 1 个元素，并插入 'aaa'（即实现了替换，替换了索引为 2 的元素）。

往数组中索引为 1 的位置插入元素 'a'、'b'、c。

var a = [1, 2, 3, 4, 5]
a.splice(1, 0, 'a', 'b', 'c')
console.log(a)
// [1, 'a', 'b', 'c', 2, 3, 4, 5]

往数组中索引为 -2 的位置插入元素 'a'、'b'。

var a = [1, 2, 3, 4, 5]
a.splice(-2, 0, 'a', 'b')
console.log(a)
// [1, 2, 3, 'a', 'b', 4, 5]

往数组的开头插入 3 个元素。

var a = [1, 2, 3]
a.splice(0, 0, 'a', 'b', 'c')
console.log(a)
// ['a', 'b', 'c', 1, 2, 3]

往数组的末尾插入 3 个元素。

var a = [1, 2, 3]
a.splice(a.length, 0, 'a', 'b', 'c')
console.log(a)
// [1, 2, 3, 'a', 'b', 'c']

（二）slice 方法

使用的时候很容易混淆 splice 和 slice 方法，记住 splice 方法只能用于数组，而 slice 方法可以用于数组和字符串，表示 “切片”。

arr.slice(i, j)
// 或 str.slice(i, j)

arr.slice(i, j) 表示将数组/字符串从 [i, j)（分界是前开后闭）切片，然后返回取出的片段，非原地操作，不改变原数组/字符串。

取出字符串剔除了首个和末尾的子串：

var str = 'abcdef'
var sub = str.slice(1, -1)
console.log(sub) // 'bcde'

类似的，slice 也能作用于数组：

var arr = [1, 2, 3, 4, 5]
var sub = arr.slice(1, 4)
console.log(sub) // [2, 3, 4]