JavaScript Array 的瑞士刀函式 | splice

2021-08-14

筆記從 JavaScript 令人迷惑的 slice, split 以及 splice。其中 splice 可以稱 JavaScript 中的瑞士刀函式方法，足抵數個函式方法所能提供的功能。藉由 splice 不論是要增加陣列元素、刪除特定元素，甚至是要將 Array 切段也沒有問題。

說明

slice

Array 的函式方法，可以用於取出 Array 特定片段範圍的陣列元素，屬於 Immutable 的操作，不會對執行函式的物件造成影響。

// Array.prototype.slice(StartIndex, EnIndex[Not Included1])
// index   0  1  2  3  4
// index  -5 -4 -3 -2 -1
let arr = [1, 2, 3, 4, 5]

arr.slice(1, 2)
// [2]

arr.slice(2)
// [3, 4, 5]

arr.slice(-3)
// [3, 4, 5]

arr.slice(-4, -1)
// [2, 3, 4]

split

**String 的函式方法，不是 Array 的函式方法。**可以用於將字串依特定字元或字串進行分割成陣列。

'foo, bar, egg, ham, spam'.spliit()
// [ 'foo', 'bar', 'egg', 'ham', 'spam' ]

splice

Array 的函式方法，也稱為 Array 的瑞士刀函式 (Swiss Knife)，如同瑞士刀的多功能，splice 函式能達成多種 Array 操作需求，此外與 slice 相同都可以將陣列進行分段，但 splice 屬於 mutable 的操作，會對執行函式的物件造成影響。

Array.prototype.splice(startIndex, deleteNumber, item1, item2, ...)

陣列分段

// index   0  1  2  3  4  5
let arr = [1, 2, 3, 4, 5, 6]

arr.splice(0, 3)
// return [1, 2, 3]
// arr: [4, 5, 6]

如果不使用 splice 瑞士刀，可以使用 slice 做下列方式的操作：

arr.slice(0, 3)
// [1, 2, 3]
arr.slice(3)
// [4, 5, 6]

新增元素

// index   0  1  2  3
let arr = [1, 2, 4, 5]

arr.splice(2, 0, 3)
// return []
// arr: [1, 2, 3, 4, 5]

如果不使用 splice 瑞士刀，可以使用 unshift, push 的方式來加入元素：

arr = [1, 2, 3]
arr.unshift(0)
// arr: [0, 1, 2, 3]

arr.push(4, 5)
// arr: [0, 1, 2, 3, 4, 5]

或是使用 array index 的方式：

arr = [1, 2, 3]
arr[arr.length] = 4
// arr: [1, 2, 3, 4] 

刪除元素

// index   0  1  2  3
let arr = [1, 2, 9, 3]

arr.splice(2, 1)
// return [9]
// arr: [1, 2, 3]

如果不使用 splice 瑞士刀，可以使用 shift, pop 的方式來移除元素：

let arr = [1, 2, 3]

arr.shift()
// return 1
// arr: [2, 3]

let arr = [1, 2, 3]

arr.pop()
// return 3
// arr: [1, 2]

修改元素

// index   0  1  2  3  4
let arr = [1, 2, 3, 4, 5]

arr.splice(2, 1, 0)
// return 3
// arr: [1, 2, 0, 4, 5]

另外也可以使用 array index 的方式；

arr[2] = 0

以上就是 JavaScript slice, split 以及 splice 的介紹與比較，同時詳細的說明 Array 瑞士刀函式 splice 的使用方式，相信未來在 JS Array 操作上能夠更隨心所欲 😍

參考資料

Array.prototype.splice() | MDN