一定很多人跟我一樣，slice()、splice()、split() 這三者從初學JS時一直沒記住。這次就來整理這三者的差別吧。

三者差異

這表格看不懂沒關係，我們再來細說吧！

slice( )

• 回傳一個新陣列物件，為原陣列選擇之開始位置至結束位置 ( 不含結束位置 ）部分的淺拷貝（shallow copy）。
• 原本的陣列將不會被修改。
• 對象：Array及String

arr.slice(開始位置, 結束位置-不包含)
str.slice(開始位置, 結束位置-不包含)

什麼意思呢？直接來看一下範例。

let friends = ['David', 'Peggy', 'Amy', 'Anna', 'Kiki'];
let friends2 = friends.slice(2);
let friends3 = friends.slice(1, 3);
let friends4 = friends.slice(-1);

console.log(friends2) //[ 'Amy', 'Anna', 'Kiki' ]
console.log(friends3) //[ 'Peggy', 'Amy' ]
console.log(friends4) //[ 'Kiki' ]
console.log(friends) //[ 'David', 'Peggy', 'Amy', 'Anna', 'Kiki' ]

arr.slice(2) 從陣列的索引位子 '2' 開始到最後。
friends.slice(1, 3) 從陣列的索引位子 '1' 開始到 '2'。
friends.slice(-1) 開始位子為負數的話，會從陣列的最後一個索引位子開始往前推。
friends 最後我們可以發現原陣列friends並未改變。

splice( )

• 可以藉由刪除既有元素或加入新元素來改變一個陣列的內容。
• 原本的陣列將會被修改。
• 對象：Array。

arr.splice(起始點, 要刪掉的個數, 要插入的值) // 插入一個或多個值
arr.splice(起始點, 要刪掉的個數) // 刪除中間的值

const nums = [0, 1, 2, 3, 4]
nums.splice(2, 0, 99) // 在陣列 2 的位子，刪掉 0 個，插入數字 99。
console.log(nums) // [0, 1, 99, 2, 3, 4]

const nums = [0, 1, 2, 3, 4]
nums.splice(2, 2) // 在陣列 2 的位子，刪掉 2 個。
console.log(nums) // [0, 1, 4]

當我們使用 splice 取值時，也可以運用另一個變數來接住回傳值（陣列），以便後續應用：

const nums = [0, 1, 2, 3, 4]
const deletedNumbers = nums.splice(2, 2)
console.log(deletedNumbers) // [2, 3]

split( )

• 使用指定的分隔符字符串將一個 string 分割成子字符串數組。
• 原本的陣列將不會被修改。
• 對象：String

str.split(分隔符, 限制的數量)

如果使用空字符串("")作為分隔符，則將會單獨拆分所有字符。
舉例來說：

let myString = 'hello, nihao, 你好'
let myNewArray1 = myString.split(',')
let myNewArray2 = myString.split('')
let myNewArray3 = myString.split(',',2)

console.log(myNewArray1) // ['hello', ' nihao', ' 你好']
console.log(myNewArray2) // [ 'h', 'e', 'l',  'l', 'o', ',', ' ',  'n',  'i', 'h', 'a',  'o',  ',', ' ', '你', '好' ]
console.log(myNewArray3) // [ 'hello', ' nihao' ]

myString.split(',') 以','做為分隔前後的字符。
myString.split('') 分隔所有字符。
myString.split(',',2) 以','做為分隔前後的字符，但只取前兩個。

參考資料：
MDN: splice()
MDN: slice()
MDN: splite()