JavaScript中splice与slice的区别及数组复制技巧

splice与slice的核心区别

splice和slice是JavaScript数组操作中常用的两个方法，但初学者常因名称相似而混淆。

slice方法不会修改原始数组，而是返回一个包含选定元素的新数组。

splice方法用于在数组的指定位置添加或删除元素，会直接改变原数组，并返回被删除的元素组成的数组。

slice方法详解

slice()方法的基本用法

该方法用于从已有数组中截取并返回选定的元素子集。

语法结构

arrayObject.slice(start,end)

start参数为必填项，指定开始选取的索引。若为负数，则从数组末尾开始计算，例如-1代表最后一个元素，-2代表倒数第二个，依此类推。

end参数为可选项，指定结束选取的索引（不包含该位置）。若省略，则截取从start到数组末尾的所有元素。若为负数，同样表示从数组末尾倒数计算。

var arr = [1,2,3,4,5,6]
arr.slice(2, 3) //返回[3]

splice方法详解

splice()方法的基本用法

splice()方法用于向数组中添加或删除项目，并返回被删除的项目。

注意：该方法会直接修改原始数组。arrayObject.splice(index,howmany,item1,.....,itemX)

index参数为必填项，整数类型，指定添加或删除项目的起始位置。使用负数可从数组尾部开始计算位置。

howmany参数为必填项，指定要删除的项目数量。若设置为0，则不执行删除操作。

item1至itemX为可选参数，指定要添加到数组中的新项目。

例如，向数组起始位置插入一个新元素-1的操作示例如下。

var arr = [1,2,3,4,5,6]
arr.splice(0,0, -1) //返回[]，第二个参数为0，即不删除任何元素
console.log(arr)

> [-1, 1, 2, 3, 4, 5, 6]

数组复制与深度拷贝技巧

使用slice进行数组复制

调用slice(0)可以快速生成一个新数组，但新数组中的元素仍引用原数组中的对象（浅拷贝）。例如：

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = arr.slice(0)
console.log(clone)
> [3, 4, Array[2]]

使用concat进行数组复制

Array.concat方法也可用于复制数组，例如：

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = arr.concat()
console.log(clone)
> [3, 4, Array[2]]

同样，slice和concat生成的新数组中，嵌套元素仍引用原对象。例如：

clone[2].push(3)
console.log(o)
> [1, 2, 3]

使用JSON.parse和JSON.stringify进行深度复制

可以通过JSON.parse(JSON.stringify(arr))对对象或数组进行快速深度复制。注意，此方法无法处理function等无法序列化的对象。例如：

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = JSON.parse(JSON.stringify(arr))
console.log(clone)

> [3, 4, Array[2]]


clone[2].push(3)
console.log(o)
> [1, 2] //o元素没有变化

参考链接：

//www.jb51.net/w3school/jsref/jsref_slice_array.htm

//www.jb51.net/w3school/jsref/jsref_splice.htm