JS 数组方法 splice 的三种用法

每次需要用到这个方法的时候总是忘记,这里记录一下。

Posted by MurphyChen on November 21, 2021

(一)splice 方法

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

1. 参数个数为 1 的情况

1.1 语法

1
arr.splice(i)

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

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

1.2 举例

删除数组中最后三个元素

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

清空数组

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

2. 参数个数为 2 的情况

2.1 语法

1
arr.splice(i, j)

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

2.2 示例

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

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

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

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

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

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

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

3.1 语法

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'

1
2
3
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

1
2
3
4
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'

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

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

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

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

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

(二)slice 方法

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

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

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

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

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

类似的,slice 也能作用于数组:

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