老闆,幫我切一段香腸,從第三節到第六節,你手握著的那節不要。謝謝!
slice 的英文是切片或擷取,我們生活中常用的像是:「slice of life」生活的小片段、「slice of bread」一片麵包都是在表示一部分或「片狀」。但在陣列使用slice()
的情境,比較像是「切一段」,因為可以指定從某個元素切到某一個元素 的前一個。 切下來的部份是以複製的型態產生,所以也不會影響原本的陣列。
原型: Array.prototype.slice()
功能: 回傳一個新陣列物件,為原陣列選擇的 begin 至 end(不含 end)部分的淺拷貝(shallow copy)。
改變: 原本的陣列將不會被修改。
語法: arr.slice([begin[, end]])
回傳值: 傳新陣列
參數: begin 自此索引(起始為 0)開始提取拷貝。 end 至此索引值之前停止提取
slice()
有兩個預設參數,第一個參數是要從哪個索引值開始切,第二個參數是要在哪一個索引值結束,第二個參數常會讓人會錯意,因為第二個參數如果是三,slice()
其實只會取到索引值為二就停止。比較好記的方法是把第二個參數減一,那會比較符合我們平常對「從這裡切到那裡」的認知。
在使用slice()
的時候,如果不給參數,或只給零,那麼slice()
就會把陣列從頭到尾複製一份給我們,也因此,許多人拿slice()
來做陣列的淺拷貝,簡潔又方便。 就淺淺的拷貝喔
const colors1 = ["red", "yellow", "blue", "gray", "purple"]
const colors2 = colors1.slice();
const colors3 = colors1.slice(0);
colors2; // [ 'red', 'yellow', 'blue', 'gray', 'purple' ]
colors3; // [ 'red', 'yellow', 'blue', 'gray', 'purple' ]
如果我們給的參數是負數,又會發生什麼事?就像length-1
ㄧ樣,slice()
會從陣列的尾端開始數,如果是-1
,就會從陣列尾端取一個,如果這個負數超過陣列的長度,slice()
就會把所有能給我們都給出來。
const colors1 = ["red", "yellow", "blue", "gray", "purple"]
const colors2 = colors1.slice(-1);
const colors3 = colors1.slice(-6);
colors2; // [ 'purple' ]
colors3; // [ 'red', 'yellow', 'blue', 'gray', 'purple' ]
我們可以發現,當我們參數是-1
時,就好像是使用pop()
,只是pop()
回傳給我們的被刪掉值的索引值,但是slice(-1)
卻會回傳陣列最後一個元素。
雖然拿slice()
來複製陣列很方便,但如果遇到多維陣列,slice()
的複製就會失效。
// 多維陣列,slice() 深拷貝失效
const arr1 = [[1, 2, 3],[4, 5, 6]]
const arr2 = arr1.slice(0);
arr2; // [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]
// 修改原陣列
arr1[0][0] = "Hi";
// 兩個陣列都被修改了
arr1; // [ [ 'Hi', 2, 3 ], [ 4, 5, 6 ] ]
arr2; // [ [ 'Hi', 2, 3 ], [ 4, 5, 6 ] ]
slice()
的第二個參數頗曖昧我們都知道,明明是要擷取至索引值 4 卻只會擷取到 3,在記slice()
第二個參數的時候,只要把刪除的索引值再 +1 會比較好記 或是相反。
我們來看有第二個參數時的變化:
const friends1 = ['Ayda', 'Phi', 'Alex', 'Chris', 'Tracy', 'Thomas', 'Jean'];
// 從索引值 1 擷取 至 2 (2+1=3)
const friends2 = friends1.slice(1, 3);
friends2; // [ 'Phi', 'Alex' ]
// 只要第二個參數是 0 就會回傳空陣列
const friends3 = friends1.slice(1, 0);
friends3; // []
// -2 是從尾端開始數回來
const friends4 = friends1.slice(2, -2);
friends4; // [ 'Alex', 'Chris', 'Tracy' ]
const friends5 = friends1.slice(2, 2);
friends5; // []
如果第二個參數是負數,表示從陣列的尾端算回來。
如果第二個參數比原陣列的長度長,那麼slice()
就會擷取到陣列的最後一個元素。
如果第二個參數和第一個參數一樣,slice()
會回傳空陣列,因為第二個參數會 -1 也就把第一個參數給減掉了。
slice()
雖然是簡單的陣列方法,但是如果能夠靈活運用,相信對陣列的操控會更加方便。
這邊有篇以可愛的土司做示範的slice()
介紹文,也很直得參考喔~
Arrays, any way you slice it
週末愉快~
如有需要改進的地方,拜託懇求請告知,我會盡量快速度修改,感謝您~