譯者：前端小智
原文：https://codeburst.io/js-by-example-8-distinct-uses-of-javascript-array-slice-4e4e95a470e4
為了保證的可讀性，本文採用意譯而非直譯。
JS數組 slice方法是JS語言中最強大、最常用的內建函數之一。
隨著React和其他面向功能的JavaScript實踐的興起，它變得越來越重要，原因有兩個:
函數式編程，尤其是高階函數，與數據列表密切配合
函數式編程需要純函數，即不會產生副作用或修改輸入數據的函數
JavaScript 數組 slice方法符合這兩個標準。
slice方法可以在不修改原始列表的情況下創建列表子集的淺拷貝。因此，它為編寫函數式 JS 提供了一個關鍵的構建塊。
在這篇文章中，我們將通過實例來掌握 slice方法，探索它的8種不同用法。
注意: slice 方法不要與 splice方法混淆， splice方法會修改原始數組。
slice 工作原理在深入研究一些更高級的用法之前，讓我們看一下 slice方法的基礎知識。
如MDN文檔， slice 是數組上的一個方法，它最多有兩個參數:
arr.slice([begin[, end]])
begin
從該索引處開始提取原數組中的元素,如果該參數為負數，則表示從原數組中的倒數第幾個元素開始提取， slice(-2)表示提取原數組中的倒數第二個元素到最後一個元素（包含最後一個元素）。如果省略 begin，則 slice 從索引 0 開始。
end
在該索引處結束提取原數組元素（從0開始）。 slice會提取原數組中索引從 begin 到 end 的所有元素（包含begin，但不包含end）。
slice(1,4) 提取原數組中的第二個元素開始直到第四個元素的所有元素 （索引為 1, 2, 3的元素）。
如果該參數為負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1)表示抽取了原數組中的倒數第二個元素到最後一個元素（不包含最後一個元素，也就是只有倒數第二個元素）。
如果 end 被省略，則 slice 會一直提取到原數組末尾。如果 end 大於數組長度， slice 也會一直提取到原數組末尾。
基本用法我們的前4個例子突出 slice的核心功能。
用法1：簡單的複製const arr2 = arr.slice
沒有任何參數的 slice執行一個簡單的淺拷貝。當前，主流的用法還是使用展開運算符合來實現，但是如果在舊的代碼庫中，或者沒有使用 babel的構建步驟，可能仍然希望使用 slice。
用法2：獲取從 N 開始的子數組使用 slice方法最簡單的方法就是原始數組從 N開始抽取的所有元素。
一種情況是希望彈出數組的第一個元素並使用它，返回剩餘的數組，但希望在不修改原始數組的情況下執行此操作。
function useone (arr) {
const usedItem = arr[0]
return arr.slice(1)
}
用法3：獲取從末尾 N 開始的子數組slice的另一種使用方法是獲取數組的末尾，利用的是 負索引從末尾開始計數。
這種負索引使刪除任意數量的元素變得超級簡單。例如，如果你只想抓取3個
const last3 = arr.slice(-3)
用法4：獲取數組的前n個獲取數組的前面的數，我們需要使用第二個參數： end。
當有兩個參數時， slice方法返回一個從 begin開始但不包括 end的集合。
由於JavaScript數組是從 0開始的（索引從0開始），這使得獲取前N個元素變得非常簡單：
const first4 = arr.slice(0, 4)
用法5：獲取數組中某段子數組如果我們想要使用 slice從任何索引開始獲取數組的一段，該怎麼辦？
為此，我們需要從 (begin,length) 轉換為 (begin,end)。計算邏輯很簡單，我們可以定義一個簡單的函數來做到這一點：
function pullSegment(arr, begin, length) {
return arr.slice(begin, begin + length);
}
處理類似數組的對象JavaScript中，數組是一個特殊的對象，其 property名為正整數，且其 length屬性會隨著數組成員的增減而發生變化，同時又從 Array構造函數中繼承了一些用於進行數組操作的方法。
而對於一個普通的對象來說，如果它的所有 property名均為正整數，同時也有相應的 length屬性，那麼雖然該對象並不是由 Array構造函數所創建的，它依然呈現出數組的行為，在這種情況下，這些對象被稱為 「類數組對象」 。
slice方法也可用於類似數組的對象。
一些類似數組包如 arguments(用於訪問傳遞給函數的所有參數的關鍵字）， NodeLists（從返回節點列表的任何DOM API方法返回），甚至是使用數字索引並添加 length屬性的原始對象。
要在類似數組的對象上使用 slice方法，需要直接從 Array.prototype引用它，如下所示：
Array.prototype.slice.call(arguments)
在這特定的場合中會很有用處。
用法6：將類似數組的對象轉換為數組slice在類似數組的對象上的一個常見用途是將它們轉換為實際數組。例如：
const args = Array.prototype.slice.call(arguments);
你為什麼要這麼做?為了使用數組方法。例如，想像一個像這樣的函數
function addOne() {
return arguments.map(i => i+1);
}
這看起來可行，但如果你試著去做，你就會得到錯誤：
> addOne(1, 2, 3)
TypeError: arguments.map is not a function
at test (repl:2:18)
at repl:1:1
at ContextifyScript.Script.runInThisContext (vm.js:44:33)
at REPLServer.defaultEval (repl.js:239:29)
at bound (domain.js:301:14)
at REPLServer.runBound [as eval] (domain.js:314:12)
at REPLServer.onLine (repl.js:440:10)
at emitOne (events.js:120:20)
at REPLServer.emit (events.js:210:7)
at REPLServer.Interface._onLine (readline.js:279:10)
這是因為 arguments 實際上不是數組，而是類似數組的對象。可以使用slice實現此功能，如下所示：
function addOne() {
return Array.prototype.slice.call(arguments).map(i => i+1)
}
現在就可以得到了你所希望的數據：
> addOne(1, 2, 3)
[ 2, 3, 4 ]
用法7：將任意長度多餘的參數強制轉換為數組有時希望接受函數的多餘參數，組成一個數組。
較新版本的JavaScript引入了所謂的 Rest語法來處理這個問題，但是如果為為了兼容舊瀏覽器，你可以使用 slice做到這一點：
function myFunc(a, b) {
const extraArgs = Array.prototype.slice.call(arguments, 2);
}
這允許使用任意數量的參數調用 myFunc， 例如：
myFunc(1, 2, 3, 4, 5, 6, 7, 8)
在函數裡面會得到 a==1， b===2， extraArgs===[3,4,5,6,7,8]
用法8：修改數組中的特定索引slice在函數上下文中一個強大而常見的用法是替換數組中特定項的值。
從本質上講，這很簡單，只需要分配新值，但是在函數世界中，不能修改原始數組。
相反，可以將 slice與擴展運算符一起使用，以返回一個相同但對於要更新的索引的新數組：
function replaceIdx(arr, index, newVal) {
return [
...arr.slice(0, index),
newVal,
...arr.slice(index + 1)
]
}
偏函數應用偏函數應用，英文是 partialapplication，也可以譯作「局部應用」、「部分應用」、「偏應用」
函數式編程中的另一種常見模式是所謂的偏函數應用：將函數預先應用於函數，然後返回一個新函數。
這種模式允許你組合函數，通過使用具有不同預應用參數的相同核心函數來創建更大的可重用性。
雖然像Haskell這樣的純函數語言本身支持偏函數應用程式，但是在JavaScript中，我們可以使用 slice實現一個函數來實現它
var partial = function() {
const fn = arguments[0];
const args = Array.prototype.slice.call(arguments, 1);
// Return a function that calls fn
return function() {
var remainingArgs = Array.prototype.slice.call(arguments);
return fn.apply(this, args.concat(remainingArgs));
}
}
交流我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！
關注公眾號，後臺回復福利，即可看到福利，你懂的。
延伸閱讀JS引擎:從調用堆棧到Promise，需要知道的所有內容
如何使用 Set 來提高代碼的性能
2019年，Fluter 和 React Native 誰主沉浮