強大的Array.prototype.splice()

之所以會單獨針對這個api寫這麼一篇博文，一方面是因爲最近在一次面試中聊到了這個API，我沒能完全說出它的用法；另一方面則是因爲通過熟悉後覺得這個api確實很靈活很強大，充分體現了javascript的靈活性。所以寫這麼一篇博文，可以讓自己更深刻地記住這個方法，也希望能讓更多地同仁用這個方法讓自己的javascript代碼更加簡潔，更加有效率。

MDN Web Docs中對Array.prototype.splice()的描述信息如下

splice(start, deleteCount, item1, item2, ...) 方法通過刪除或替換現有元素和/或添加新元素來更改數組的內容。

傳參信息如下

1. start 從什麼位置開始修改當前數組，這個參數有如下幾種情況

• 0到數組長度-1，即當前數組的任意位置。
• 大於數組長度-1，不報錯，但是不會刪除當前數組的元素，第二個參數無效。但是，如果這個時候傳入了第三個，以及第四個。。。參數，那麼，這些參數值會被添加到數組的末尾位置，也就類似於push方法。
• 小於0，如果開始位置爲負數，會從數組的末尾倒着查找，如，-1爲最後一個元素，-2爲倒數第二個元素。

2. deleteCount 要刪除的內容的長度，這個參數有如下幾種情況

• 0或負數 不刪除數組元素。
• 大於0並且小於start指定位置到數組最後一個元素的長度，則刪除指定長度的元素。
• 大於start指定位置到數組最後一個元素的長度，刪除從start位置後面所有的元素，如splice(0, 99999999)會晴空長度小於99999999的數組

3. 在start位置開始要添加或者替換的元素，可以有多個。

針對上面的描述，我們一一驗證它的所有用法。

刪除元素（第二個參數不爲0，後續參數不傳入，只刪除）

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(1, 1); // 從第二個位置開始刪掉一個元素
console.log(ary); // ['a', 'c', 'd', 'e', 'f']

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(1, 2); // 從第二個位置開始刪掉兩個元素
console.log(ary); // ['a', 'd', 'e', 'f']

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(-2, 1); // 刪掉倒數第二個元素‘e’
console.log(ary); // ['a', 'b', 'c', 'd', 'f']

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(0, ary.length); // 刪掉所有元素
console.log(ary); // []

添加元素(第二個參數爲0，後續參數不爲空，則只增加不刪除)

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(ary.length, 0, 'x'); // 在數組末尾追加一個元素
console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f', 'x']

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(1, 0, 'x'); // 在數組第二個元素前插入一個元素
console.log(ary); // ['a','x', 'b', 'c', 'd', 'e', 'f']

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(-2, 0, 'x'); // 在數組倒數第二個元素前插入一個元素
console.log(ary); // ['a', 'b', 'c', 'd', 'x', 'e', 'f']

let ary = ['a', 'b', 'c'];
let ary2 = ['d', 'e', 'f']
ary.splice(ary.length, 0, ...ary2); // 數組拼接
console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f']

更新/替換元素（第二個參數不爲0，後續參數不爲空，這裏需要注意的是，傳入的替換元素的個數可以等於前面的長度，也可以不等於前端的長度）

替換元素其實執行的是先刪除再插入，所以一定要清楚傳入參數的意義

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(1, 1, 'x'); // 替換第二個元素‘b’爲‘x’ (長度和傳入的替換元素個數都爲一)
console.log(ary); // ['a', 'x', 'c', 'd', 'e', 'f']

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(1, 2, 'x'); // 刪掉第二個和第三個元素‘b’ ‘c’，插入一個元素‘x’ (長度大於傳入的替換元素個數)
console.log(ary); // ['a', 'x', 'd', 'e', 'f']

let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
ary.splice(1, 2, 'x', 'y', 'z'); // 刪掉第二個和第三個元素‘b’ ‘c’，插入三個元素‘x’，‘y’， ‘z’ (長度小於傳入的替換元素個數)
console.log(ary); // ['a', 'x','y', 'z', 'd', 'e', 'f']

上面這些就是我目前總結的常用的splice的用法，如有更多使用方法，歡迎留言討論