slice() 方法將數組部分的副本返回到新的數組對象中。這個對象是從 start 到 end 選擇的。需要注意的是，此方法不會修改原始數組。此外，如果向其中一個數組添加新元素，則另一個數組不會受到影響。

語法

slice() 方法的參數是數組的開始和結束索引。

start

start 是一個從 0 開始的索引，用于開始復制數組的一部分。如果未定義，start 的默認值為 0。如果 start 大于數組的索引范圍， slice() 方法將返回一個空數組。

此外，start 還可以使用負索引。 slice(-1) 提取數組的最后一個元素。

end

end 參數是可選的。如果 slice() 函數中只有一個參數，那就是 start。如果省略， slice() 方法從數組的末尾開始提取。

如果end 大于數組的長度，slice() 一直提取到數組的末尾，只是在它被省略的情況下。

end 是提取此索引之前的元素，不包括索引 end 在內。因此，索引的最后一個元素不包含在數組的副本中。例如，slice(1,3) 提取是數組的第二個和第三個元素，即從數組的索引 1 開始，包含索引 1 的值到索引 3 之間的數組，但不包含索引為 3 的元素。

const arrNumbers = [1,3,5,6,7];
console.log(arrNumbers.slice(0, 3)); // [ 1, 3, 5 ]

這意味著復制數組 arrNumbers 從索引 0 開始到索引 3 之間的元素，不包含索引為 3 的元素 。

1. 復制數組

第一個示例是 slice() 函數的基本功能，沒有參數的數組復制原始數組。有時，可能想要更新數組中的某些元素。但是，可能需要保護原始數組中的元素，可以使用 slice()創建原始數組的淺復制。

const arrNumbers = [1, 2, 3, 4, 5, 6];
const copyNumbers = arrNumbers.slice();
console.log(copyNumbers); // [ 1, 2, 3, 4, 5, 6 ]
copyNumbers[1] = 0;
console.log(copyNumbers); // [ 1, 0, 3, 4, 5, 6 ]
console.log(arrNumbers); // [ 1, 2, 3, 4, 5, 6 ]

2. 從索引 n 開始的子數組

slice() 方法的第二個示例是復制從數組索引 n 開始的子數組。

const arrNumbers = [1, 2, 3, 4, 5, 6];
const copyNumbers = arrNumbers.slice(2);
console.log(copyNumbers); // [ 3, 4, 5, 6 ]

也可以復制數組最后 n 位元素，就是使用 -n 作為參數，如下：

const arrNumbers = [1, 2, 3, 4, 5, 6];
const copyNumbers = arrNumbers.slice(-2);
console.log(copyNumbers); // [ 5, 6 ]

3. 類數組對象轉換為數組

可以使用 slice() 方法將看起來像數組的對象轉換為數組。例如，如下代碼片段：

function transformToArray() {
    return Array.prototype.slice.call(arguments);
}

const newArray = transformToArray("1", "2", "3", "4");
console.log(newArray); // [ '1', '2', '3', '4' ]

以上代碼片段可以用來定義可變參數的函數。

4. 將 NodeList 轉換為數組

NodeList 對象是從文檔中提取的節點集合，可以使用方法 querySelectorAll() 方法返回節點列表對象。例如，可以選擇HTML文檔中的所有<p>節點，可以使用 slice() 將選定的節點列表轉換為數組。

const elemP = document.querySelectorAll("p");
const elemNodes = Array.prototype.slice.call(elemP);
console.log(elemNodes);

5. 替換字符串中的特定索引

可以使用 slice() 函數創建替換函數。

String.prototype.append = function (index, value) {
    return `${this.slice(0, index)}${value}${this.slice(index)}`;
};

const testString = "新年";
console.log(testString.append(2, "快樂")); // 新年快樂

總結

學習 JavaScript 內置函數的使用方法和示例可以提高編碼技能，擴展編碼思維，增加更多解決問題的方法。slice() 是數組中非常有用的內置函數。