JavaScript中數組slice和splice的對比小結

前言

今天重溫了一下Javascript，看到了數組的方法，其中有兩個比較相似的方法——splice和splice，看著很像，就是多了一個p，但是用法卻相當不一樣。

在使用中，可以通過選擇一個具有強語義表達性的 API 來減少混淆的發生。

1、slice

slice是指定在一個數組中的元素創建一個新的數組，即原數組不會變

數組的 slice （ECMAScript 5.1 標準 15.4.4.10 節）非常類似于字符串的 slice。根據規范，slice 需要兩個參數，起點和終點。它會返回一個包含了從起點開始，到終點之前之間所有元素的新數組。

理解 slice 的功能并不是太難：

?

1 2	'abc'.slice(1,2)?? // "b" [14, 3, 77].slice(1, 2) // [3]

需要特別注意的是它并不會修改原數組。

下面的代碼段描述了這個行為，x 的值沒有變，y 則是被截取的部分。

?

1 2 3 4

var x = [14, 3, 77]; var y = x.slice(1, 2); console.log(x);?? // [14, 3, 77] console.log(y);?? // [3]

2、splice

splice是JS中數組功能最強大的方法，它能夠實現對數組元素的刪除、插入、替換操作，返回值為被操作的值。

???? splice刪除：color.splice(1,2)?（刪除color中的1、2兩項）；

???? splice插入：color.splice(1,0,'brown','pink')?（在color鍵值為1的元素前插入兩個值）；

???? splice替換：color.splice(1,2,'brown','pink')??（在color中替換1、2元素）；

雖然 splice（15.4.4.12 節）也需要（至少）兩個參數，但它的意義則完全不同。

?

1 2	[14, 3, 77].slice(1, 2)? // [3] [14, 3, 77].splice(1, 2) // [3, 77]

除此之外，splice 還會改變原數組。

不要太驚訝，這正是 splice 的本意。

?

1 2 3 4

var x = [14, 3, 77] var y = x.splice(1, 2) console.log(x)?? // [14] console.log(y)?? // [3, 77]