JavaScript中易混淆的方法之split、splice、slice辨析比較

寫在前面的話

• 很多時候，一門語言總有那麼些相似的方法，容易讓人傻傻分不清楚，尤其在不經常用的時候。而本文主要簡單總結了JavaScript中的關於字符串和數組中三個容易混淆的方法。旨在方便查閱，在容易混淆的時候有據可查。如讀者有疑問，歡迎留言交流。謝謝！

Split

• Split是切割字符串的一種方法，該方法主要用於把一個字符串分割成字符串數組。
• 用於字符串對象。
• s.split(separator, howmany)

參數	描述
separator	必需。字符串或正則表達式，從該參數指定的地方分割s。
howmany	可選。該參數可指定返回的數組的最大長度。如果設置了該參數，返回的子串不會多於這個參數指定的數組。如果沒有設置該參數，整個字符串都會被分割，不考慮它的長度(一般情況下不設定這個參數).

- 注意：字符串是不可變的，因此本方法是產生新的字符串數組。

var s = "How do you do";
var arr = s.split(" "); // 使用 " " 空格來切割字符串
alert(arr.length);  // 4
alert(arr); // How,do,you,do

• 1
• 2
• 3
• 4

---

Splice

• splice()方法向/從數組中添加/刪除元素，然後返回被刪除的元素組成的數組。
• 用於數組對象。
• arr.splice(index, howmany, item1,…, itemX)

參數	描述
index	必需。整數，規定了添加/刪除元素的位置，使用負數可從數組結尾處規定位置。
howmany	必需。要刪除的元素的數量。如果設置爲0，則不會刪除元素。如果添加元素則這裏應該設置爲0.
itemX	可選。向數組添加的新項目。在添加的時候用。

• 注意：這個方法會對原數組做出修改。獲得的也是新數組。
• 刪除元素

<script type="text/javascript">     
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    //因爲第2個參數不爲0，所以表示刪除元素：從小標爲1的位置開始刪除，共刪除2個元素。(2箇中包括下標爲1的元素)
    var deleted = arr1.splice(1, 2);    //返回值爲刪除的元素組成的數組
    //原數組
    alert(arr1);  // a,d,e,f
    alert(deleted); // b,c
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 添加元素

<script type="text/javascript">     
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    //因爲第2參數爲0，所以表示添加元素：從下標爲1的位置插入元素。其餘的元素會自動向後移動
    var v = arr1.splice(1, 0, "m", "n");    // 因爲是添加元素，所以返回的數組長度爲 0
    alert(v.length);  // 0
    alert(arr1);    // a,m,n,b,c,d,e,f
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

---

Slice

• slice()方法主要用於截取數組，並返回截取到的新數組。
• 數組和字符串對象均可以使用。
• arr.slice(start, end)

參數	描述
start	必需。從原數組中的start位置開始截取（包括下標爲start的元素）。如果是負數表示從尾部開始截取：-1表示最後一個元素
end	可選。截取到指定的位置（不包括下標爲end的元素）。如果沒有指定，則指的是截取到最後一個元素。注意：end要大於start，否則截取不到元素。

- 注意：該方法是返回的一個新的數組，原數組沒有做任何改變。

<script type="text/javascript">     
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    // 從下標爲0的位置開始截取，截取到下標2，但是不包括下標爲2的元素. 原數組沒有任何的變化
    var newArr = arr1.slice(0, 2);
    alert(newArr);// a, b
    alert(arr1.slice(1, 4)); // b,c,d
    //從下標爲2的元素開始截取，一直到最後一個元素
    alert(arr1.slice(2));  //c,d,e,f
    //從倒數第5個元素，截取到倒數第2個
    alert(arr1.slice(-5, -2)); // b c d
</script>
<script type="text/javascript">
    //如果不傳入參數二，那麼將從參數一的索引位置開始截取，一直到數組尾
    var a=[1,2,3,4,5,6];
    var b=a.slice(0,3);  //[1,2,3]
    var c=a.slice(3);    //[4,5,6]
    //如果兩個參數中的任何一個是負數，array.length會和它們相加，試圖讓它們成爲非負數，舉例說明：
    //當只傳入一個參數，且是負數時，length會與參數相加，然後再截取
    var a=[1,2,3,4,5,6];
    var b=a.slice(-1);  //[6]
    //當只傳入一個參數，是負數時,並且參數的絕對值大於數組length時，會截取整個數組
    var a=[1,2,3,4,5,6];
    var b=a.slice(-6);  //[1,2,3,4,5,6]
    var c=a.slice(-8);  //[1,2,3,4,5,6]
    //當傳入兩個參數一正一負時，length也會先於負數相加後，再截取
    var a=[1,2,3,4,5,6];
    var b=a.slice(2,-3);  //[3]
    //當傳入一個參數，大於length時，將返回一個空數組
    var a=[1,2,3,4,5,6];
    var b=a.slice(6);　　//[]
</script>
原文鏈接 : https://blog.csdn.net/zpw91/article/details/53705462