slice() 與 splice() 聰明分得清楚
其實只是想表達傻傻分不清楚的反面
最後更新時間：2023–01–21
本文目錄
簡介：slice() 是什麼？splice() 又是什麼？
slice() 功能與使用範例
splice() 功能與使用範例
slice() 與 splice() 的比較
其他與 slice()、splice() 相關的用法補充
總結
簡介：slice() 是什麼？splice() 又是什麼？
大家記不記得，以前背英文單字，老師很愛把很像的字一次列出來整理成一張表，然後跟你說這些字很像不要搞混了要背好，或是學到一個單字就跟你補充有另一個很像的字考試很愛考，例如 desert（沙漠）與 dessert（甜點）、compliment（讚美）與 complement（補充）等等族繁不及備載，以前的我覺得老師把這些東西整理好很貼心，而我記憶力也不錯，所以一直覺得這樣做沒啥毛病，但後來漸漸領悟出一個心得，其實有更好的做法，至少是比較適合我的作法，就是這些很像的東西不要一起學，反而應該在不同時期、不同情境下學習，之後再把這些東西做個統整複習，自然不會搞混。舉個例子，當初高中時我是用發音去記 desert 與 dessert 差異，因為 desert 的「de」與 death 很像，而沙漠很危險容易跟死亡聯想在一起，所以考聽力就容易分辨，但如果小明去沙漠旅行一個月，事前查資料或在當地一直用到 desert 這個字，我相信在那之後小明不需要特別去記 desert 與 dessert 怎麼區分因為已經對 desert 太熟了。當然，在升學主義下老師這種做法或許更有效率，而當可以跳脫這種方式時，就可以思考其他更好或更適合自己的學習方法。
因此當學習 coding 時，有些很像的東西我倒覺得不必硬記，可以透過刻意練習來加深印象，例如，當遇到 slice 與 splice 這兩個很像的字，我就去查了一下牛津字典：
slice：slice something (up) to cut something into slices
slice：a thin flat piece of bread, meat, cheese, etc. that has been cut off a larger piece; a piece of cake that has been cut from a larger cake
所以意思是把東西切成薄片
那 splice 呢？
splice：splice something (together) to join the ends of two pieces of rope by twisting them together; splice something (together) to join the ends of two pieces of film, tape, etc. by sticking them together
意思是把兩個東西接起來
那接下來怎麼辦？很簡單，從兩個選一個你熟的先去刻意練習使用，slice 這個字應該相對常見，所以可以快速看一下這篇了解兩者差異，接著刻意練習 slice()，如此一來，以後遇到 slice() 就可以很快反應「啊是我練習的那個」，如果碰到 splice() 就知道「啊跟 slice() 不一樣，來查查看 splice() 怎麼用好了」，於是腦海中就會把使用 slice() 與 splice() 的情境分開了，以後比較不怕搞混。如果你是屬於不怕搞混東西的人，那當然一次學起來比較快。
所以 slice() 是什麼？splice() 又是什麼？
JavaScript 中 slice() 和 splice() 方法都是用來操作陣列的，但二者的用法和功能不太一樣。slice() 就是擷取一些元素出來，而 splice() 則是剔除或新增某些元素。
以下說明中的第幾個都是以陣列 index 來看，例如陣列左邊第一個東西是第 0 個元素
繼續閱讀 | 回到目錄
slice() 功能與使用範例
slice() 方法用於從陣列中選取一部分元素，並將選取的元素組成一個新陣列。在使用 slice() 方法時，需要傳入兩個參數：要選取的開始位置和結束位置（擷取內容不包含結束位置的元素）。如果只傳入一個參數，則會選取從該開始位置到最後一個元素的所有元素。
例如，要從陣列 [1, 2, 3, 4, 5] 中選取第 1 個元素到第 3 個元素，可以使用以下語法：
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4);
console.log(newArr); // [2, 3, 4]如果只傳入一個參數，則會從開始位置到末尾截取元素：
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1);
console.log(newArr); // [2, 3, 4, 5]
let arr2 = [1, 2, 3, 4, 5];
let newArr2 = arr.slice(2);
console.log(newArr2); // [3, 4, 5]除了基本用法以外，slice() 還可以用於字串的處理，例如：
let str = "hello world";
let newStr = str.slice(0, 5);
console.log(newStr); // "hello"暫時逃離數字一下，再用水果陣列來看一次
slice() 接收兩個參數，分別是起始位置和結束位置（不包含結束位置）：
let fruits = ["Apple", "Banana", "Cherry", "Date"];
let selectedFruits = fruits.slice(1, 3);
console.log(selectedFruits); // 輸出 ["Banana", "Cherry"]如果只傳入一個參數，則會從該位置開始選取到陣列最後一個元素：
let fruits = ["Apple", "Banana", "Cherry", "Date"];
let selectedFruits = fruits.slice(1);
console.log(selectedFruits); // 輸出 ["Banana", "Cherry", "Date"]繼續閱讀 | 回到目錄
splice() 功能與使用範例
splice() 方法用於在陣列中新增、刪除或替換元素。在使用 splice() 方法時，需要傳入三個參數：要操作的開始位置、要刪除的元素個數、要新增的元素（可以不傳）。如果要刪除元素，則第二個參數需要傳入正整數；如果要新增元素，則第三個參數需要傳入一個或多個元素。
例如，要在陣列 [1, 2, 3, 4, 5] 中刪除第 1 個元素到第 3 個元素，可以使用以下語法：
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3);
console.log(arr); // [1, 5]slice() 方法不會影響到原陣列，但是 splice() 方法卻會改變原陣列。
可以在陣列中新增元素：
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 0, 6, 7);
console.log(arr); // [1, 6, 7, 2, 3, 4, 5]可以在陣列中替換元素：
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, 6, 7);
console.log(arr); // [1, 6, 7, 4, 5]再複習一次：
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2);
console.log(arr); // [1, 4, 5]
arr.splice(1, 0, 6, 7);
console.log(arr); // [1, 6, 7, 4, 5]
arr.splice(2, 1, 8);
console.log(arr); // [1, 6, 8, 4, 5]在第一個範例中，從陣列刪除了第 1 個元素到第 2 個元素，並將刪除後的陣列存入了 arr 中。
在第二個範例，在陣列中新增了兩個元素 6 和 7，並將新增後的陣列存入了 arr 中。
在第三個範例，在陣列中刪除了第 2 個元素，並新增了一個元素 8，並將更改後陣列存入了 arr 中。
再用水果陣列來看一次：
let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2, "Orange", "Lemon");
console.log(fruits); // 輸出 ["Apple", "Orange", "Lemon", "Date"]在刪除元素時，如果第二個參數為 0，則不會刪除任何元素，但會返回一个空陣列：
let fruits = ["Apple", "Banana", "Cherry", "Date"];
let removedFruits = fruits.splice(1, 0, "Orange", "Lemon");
console.log(removedFruits); // 輸出 []
console.log(fruits); // 輸出 ["Apple", "Orange", "Lemon", "Banana", "Cherry", "Date"]當然，在使用 splice() 方法時，如果第三個參數沒有傳入，則不會插入任何元素。
另外需要注意的是，在使用 splice() 方法時，如果刪除元素個數大於原陣列中剩餘元素個數，則會直接將原陣列刪除到最後一個元素，例如：
let fruits = ["Apple", "Banana", "Cherry", "Date"];
let removedFruits = fruits.splice(1, 10);
console.log(removedFruits); // 輸出 ["Banana", "Cherry", "Date"]
console.log(fruits); // 輸出 ["Apple"]在使用 splice() 方法時還有一些需要注意的細節：
- 如果第一個參數是負數, 那麼就會從陣列末端開始計算
- 如果第二個參數是負數, 那麼就不會刪除任何元素
因此，使用 splice() 方法時需要特別注意參數的傳遞。
繼續閱讀 | 回到目錄
slice() 與 splice() 的比較
slice()：適合用於選取陣列中的一部分元素，不會影響到原陣列
splice()：適合在陣列中進行新增、刪除或替換元素的操作，並且會改變原陣列
在使用 slice 和 splice 方法時，可留意以下幾點：
- slice() 選取的元素不包括結束位置，如果需要選取到最後一個元素，可以省略結束位置的參數
- splice() 在新增元素時，可以傳入多個元素，如果只傳入一個元素，則只會新增一個元素
- splice() 在刪除元素時，如果不傳入第二個參數，則會從開始位置刪除到最後一個元素
- splice() 會回傳被刪除的元素組成的陣列，如果沒有刪除任何元素則回傳空陣列
- 如果需要複製一個陣列而不影響原陣列, 可以使用slice() 方法，例如：
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice();
console.log(newArr); // [1, 2, 3, 4, 5]繼續閱讀 | 回到目錄
其他與 slice()、splice() 相關的用法補充
除了使用 slice() 和 splice() 方法外，JavaScript 中還有其他陣列操作方法，如 concat()、join()、push()、pop()、shift()、unshift()、reverse()、sort() 等等，挑兩個出來講
concat() 可以將多個陣列合併為一個陣列，join() 則是將陣列中的元素以指定的字串連接起來。
concat()：
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4, 5, 6]join()：
let arr = [1, 2, 3];
let str = arr.join(",");
console.log(str); // "1,2,3"join() 常在初階練習題用到，至少我在練習 Codewars 頻繁用到，不知道 Codewars 的話可以看這篇介紹文
另外補充，還有一個和 slice() 類似的方法是 substring()，都是用來選取一部分東西，但是substring() 只能用於字串而非陣列，例如 MDN 上的範例：
let str = 'Mozilla';
console.log(str.substring(1, 3));
// Expected output: "oz"
console.log(str.substring(2));
// Expected output: "zilla"繼續閱讀 | 回到目錄
總結
總的來說，slice() 和 splice() 都是 Javascript 中常用的陣列操作函數，它們的功能都是處理陣列中的元素，但是有所不同。slice() 主要功能是截取陣列中的一部分元素且不影響原陣列，而 splice() 則是在陣列中插入、刪除或替換元素，但會影響原陣列。
繼續閱讀，開玩笑的，文章就到這 | 回到目錄
