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

前言

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

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

1、slice

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

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

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

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

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

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

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','color鍵值為1的元素前插入兩個值）；

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

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

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

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

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

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

當你寫自己的模組時，選擇一個最不容易混淆的 API 非常重要。理論上，你的用戶不應該總是透過閱讀文件來判斷他們需要哪一個。那我們應該遵循哪一種命名規範呢？

我最熟悉的規範（與我之前在 QT 上的經驗有關）是正確地選擇動詞：現在式表示可能的修改行為，過去式則不會修改原對象，而是返回一個新的版本。如果可以的話，這兩種版本都要提供。

參考下面的例子：

var p = new Point(100, 75);
p.translate(25, 25);
console.log(p);  // { x: 125, y: 100 }
var q = new Point(200, 100);
var s = q.translated(10, 50);
console.log(q);  // { x: 200, y: 100 }
console.log(s);  // { x: 210, y: 150 }

注意（在二維笛卡爾座標系中）移動位置的 translate() 和僅創建一個移動過的座標的 translated() 之間的差異。呼叫 translate 會修改點 p 的值。然而，因為 translated() 不修改原對象，對象 q 沒有被修改，而只回傳了一個新的拷貝 s。

總結

如果這個規範能夠非常一致地部署到你的應用中，那麼上面提到的那種混淆則會被最大化地減低。以上就是這篇文章的全部內容了，希望能對大家的學習或工作帶來一定的幫助。

更多JavaScript中數組slice和splice的對比小結相關文章請關注PHP中文網！