DIV CSS 佈局教程網

splice與slice是數組中的兩個常用方法，但是很多初學者很容易將二者混淆。

slice的操作不影響原數組。會返回所選擇的元素。

splice往數組中指定位置添加或刪除元素，會影響原數組。返回被刪除的元素。

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() 方法向/從數組中添加/刪除項目，然後返回被刪除的項目。

注釋：該方法會改變原始數組。
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/ strinigfy 進行深度復制

可以使用 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元素沒有變化

參考：

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

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