強大的Array.prototype.splice()

龔明華發表於2019-02-16

之所以會單獨針對這個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的用法，如有更多使用方法，歡迎留言討論

相關文章