splice 的含義是 拼接 意思是將 array 裁切之後，塞入新的元素。

array.splice(startFrom[, deleteCount[, item1[, item2[, ...]]]])

slice 的含義是 裁切 則只能擷取部分 array 的值，回傳新的 array。

arr.slice([startFrom[, end]])

兩者的第一個參數 start 皆代表開始裁切的位置
不一樣的是
splice 包含 1 個必填參數 2 個選填參數
第一個必填參數 start 皆代表開始裁切的位置
第二個選填參數代表的是從 start 開始按照順序要刪除的 element 數量，預設是 array 的總長度 - 開始裁切的位置
第三個參數之後則是代表，從開始從開始裁切的位置裁切之後，要加入的元素。

slice 包含 2 個選填參數
第一個選填參數 start 皆代表開始裁切的位置
第二個選填參數代表要裁切到第幾個位置之前，預設是array 的總長度

兩者都可以做到同樣的事情

裁切

splice

const arr = [1, 2, 3, 4, 5]
arr.splice(1)
console.log(arr) // [1]

slice

const arr = [1, 2, 3, 4, 5]
const newArr = arr.slice(0, 1)
console.log(newArr) // [1]

拼接

splice

const arr = [1, 2, 3, 4, 5]
arr.splice(1, 0, 1.5)
console.log(arr) // [1, 1.5, 2, 3, 4, 5]

slice

const arr = [1, 2, 3, 4, 5]
const newArr = [
	...arr.slice(0, 1),
	1.5,
	...arr.slice(1)
]
console.log(newArr) // [1, 1.5, 2, 3, 4, 5]

由於 splice 是 mutable 的，使用之後會改變原來 array 的值，因此建議先 clone 一個新的 array 之後再做使用。

let arr = [1, 2, 3, 4, 5]

const newArr = arr.slice()

newArr.splice(1, 0, 1.5)

arr = [
	...arr.slice(0, 1),
	1.5,
	...arr.slice(1)
]

console.log(newArr) // [1, 1.5, 2, 3, 4, 5]
console.log(arr) // [1, 1.5, 2, 3, 4, 5]

總結

參考資料

Array.prototype.splice()
Array.prototype.slice()
JavaScript Array Slice vs Splice: the Difference Explained with Cake
Array slice vs splice in JavaScript