JS數(shù)組slice方法是JS語(yǔ)言中最強(qiáng)大、最常用的內(nèi)建函數(shù)之一。

隨著React和其他面向功能的JavaScript實(shí)踐的興起，它變得越來(lái)越重要，原因有兩個(gè)：

• 函數(shù)式編程，尤其是高階函數(shù)，與數(shù)據(jù)列表密切配合
• 函數(shù)式編程需要純函數(shù)，即不會(huì)產(chǎn)生副作用或修改輸入數(shù)據(jù)的函數(shù)

JavaScript 數(shù)組slice方法符合這兩個(gè)標(biāo)準(zhǔn)。

[[284762]]

slice方法可以在不修改原始列表的情況下創(chuàng)建列表子集的淺拷貝。因此，它為編寫(xiě)函數(shù)式 JS 提供了一個(gè)關(guān)鍵的構(gòu)建塊。

在這篇文章中，我們將通過(guò)實(shí)例來(lái)掌握slice方法，探索它的8種不同用法。

注意:slice 方法不要與splice方法混淆，splice方法會(huì)修改原始數(shù)組。

slice 工作原理

在深入研究一些更高級(jí)的用法之前，讓我們看一下slice方法的基礎(chǔ)知識(shí)。

如MDN文檔，slice 是數(shù)組上的一個(gè)方法，它最多有兩個(gè)參數(shù)：

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

1. begin

從該索引處開(kāi)始提取原數(shù)組中的元素,如果該參數(shù)為負(fù)數(shù)，則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開(kāi)始提取，slice(-2)表示提取原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素(包含最后一個(gè)元素)。

如果省略 begin，則 slice 從索引 0 開(kāi)始。

2. end

在該索引處結(jié)束提取原數(shù)組元素(從0開(kāi)始)。slice會(huì)提取原數(shù)組中索引從 begin 到 end 的所有元素(包含begin，但不包含end)。

slice(1,4) 提取原數(shù)組中的第二個(gè)元素開(kāi)始直到第四個(gè)元素的所有元素 (索引為 1, 2, 3的元素)。

如果該參數(shù)為負(fù)數(shù)， 則它表示在原數(shù)組中的倒數(shù)第幾個(gè)元素結(jié)束抽取。 slice(-2,-1)表示抽取了原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素(不包含最后一個(gè)元素，也就是只有倒數(shù)第二個(gè)元素)。

如果 end 被省略，則slice 會(huì)一直提取到原數(shù)組末尾。如果 end 大于數(shù)組長(zhǎng)度，slice 也會(huì)一直提取到原數(shù)組末尾。

基本用法

我們的前4個(gè)例子突出slice的核心功能。

用法1：簡(jiǎn)單的復(fù)制

const arrarr2 = arr.slice 

沒(méi)有任何參數(shù)的slice執(zhí)行一個(gè)簡(jiǎn)單的淺拷貝。當(dāng)前，主流的用法還是使用展開(kāi)運(yùn)算符合來(lái)實(shí)現(xiàn)，但是如果在舊的代碼庫(kù)中，或者沒(méi)有使用babel的構(gòu)建步驟，可能仍然希望使用slice。

用法2：獲取從 N 開(kāi)始的子數(shù)組

使用slice方法最簡(jiǎn)單的方法就是原始數(shù)組從N開(kāi)始抽取的所有元素。

一種情況是希望彈出數(shù)組的第一個(gè)元素并使用它，返回剩余的數(shù)組，但希望在不修改原始數(shù)組的情況下執(zhí)行此操作。

function useone (arr) { 
 const usedItem = arr[0] 
 return arr.slice(1) 
} 

用法3：獲取從末尾 N 開(kāi)始的子數(shù)組

slice的另一種使用方法是獲取數(shù)組的末尾，利用的是負(fù)索引從末尾開(kāi)始計(jì)數(shù)。

這種負(fù)索引使刪除任意數(shù)量的元素變得超級(jí)簡(jiǎn)單。例如，如果你只想抓取3個(gè)

const last3 = arr.slice(-3) 

用法4：獲取數(shù)組的前n個(gè)

獲取數(shù)組的前面的數(shù)，我們需要使用第二個(gè)參數(shù)：end。

當(dāng)有兩個(gè)參數(shù)時(shí)，slice方法返回一個(gè)從begin開(kāi)始但不包括end的集合。

由于JavaScript數(shù)組是從0開(kāi)始的(索引從0開(kāi)始)，這使得獲取前N個(gè)元素變得非常簡(jiǎn)單：

const first4 = arr.slice(0, 4) 

用法5：獲取數(shù)組中某段子數(shù)組

如果我們想要使用slice從任何索引開(kāi)始獲取數(shù)組的一段，該怎么辦?

為此，我們需要從 (begin, length) 轉(zhuǎn)換為(begin, end)。 計(jì)算邏輯很簡(jiǎn)單，我們可以定義一個(gè)簡(jiǎn)單的函數(shù)來(lái)做到這一點(diǎn)：

function pullSegment(arr, begin, length) { 
 return arr.slice(begin, begin + length); 
} 

處理類(lèi)似數(shù)組的對(duì)象

JavaScript中，數(shù)組是一個(gè)特殊的對(duì)象，其property名為正整數(shù)，且其length屬性會(huì)隨著數(shù)組成員的增減而發(fā)生變化，同時(shí)又從Array構(gòu)造函數(shù)中繼承了一些用于進(jìn)行數(shù)組操作的方法。

而對(duì)于一個(gè)普通的對(duì)象來(lái)說(shuō)，如果它的所有property名均為正整數(shù)，同時(shí)也有相應(yīng)的length屬性，那么雖然該對(duì)象并不是由Array構(gòu)造函數(shù)所創(chuàng)建的，它依然呈現(xiàn)出數(shù)組的行為，在這種情況下，這些對(duì)象被稱為　“類(lèi)數(shù)組對(duì)象”　。

slice方法也可用于類(lèi)似數(shù)組的對(duì)象。

一些類(lèi)似數(shù)組包如arguments(用于訪問(wèn)傳遞給函數(shù)的所有參數(shù)的關(guān)鍵字)，NodeLists(從返回節(jié)點(diǎn)列表的任何DOM API方法返回)，甚至是使用數(shù)字索引并添加length屬性的原始對(duì)象。

要在類(lèi)似數(shù)組的對(duì)象上使用slice方法，需要直接從Array.prototype引用它，如下所示：

Array.prototype.slice.call(arguments) 

在這特定的場(chǎng)合中會(huì)很有用處。

用法6：將類(lèi)似數(shù)組的對(duì)象轉(zhuǎn)換為數(shù)組

slice在類(lèi)似數(shù)組的對(duì)象上的一個(gè)常見(jiàn)用途是將它們轉(zhuǎn)換為實(shí)際數(shù)組。 例如：

const args = Array.prototype.slice.call(arguments);

你為什么要這么做?為了使用數(shù)組方法。例如，想象一個(gè)像這樣的函數(shù)

function addOne() {  
 return arguments.map(i => i+1);  
} 

這看起來(lái)可行，但如果你試著去做，你就會(huì)得到錯(cuò)誤：

這是因?yàn)閍rguments 實(shí)際上不是數(shù)組，而是類(lèi)似數(shù)組的對(duì)象。 可以使用slice實(shí)現(xiàn)此功能，如下所示：

function addOne() { 
 return Array.prototype.slice.call(arguments).map(i => i+1) 
} 

現(xiàn)在就可以得到了你所希望的數(shù)據(jù)：

> addOne(1, 2, 3)  
 [ 2, 3, 4 ] 

用法7：將任意長(zhǎng)度多余的參數(shù)強(qiáng)制轉(zhuǎn)換為數(shù)組

有時(shí)希望接受函數(shù)的多余參數(shù)，組成一個(gè)數(shù)組。

較新版本的JavaScript引入了所謂的Rest語(yǔ)法來(lái)處理這個(gè)問(wèn)題，但是如果為為了兼容舊瀏覽器，你可以使用slice做到這一點(diǎn)：

function myFunc(a, b) {  
 const extraArgs = Array.prototype.slice.call(arguments, 2);  
} 

這允許使用任意數(shù)量的參數(shù)調(diào)用myFunc， 例如：

myFunc(1, 2, 3, 4, 5, 6, 7, 8) 

在函數(shù)里面會(huì)得到a == 1，b === 2，extraArgs=== [3,4,5,6,7,8]

用法8：修改數(shù)組中的特定索引

slice在函數(shù)上下文中一個(gè)強(qiáng)大而常見(jiàn)的用法是替換數(shù)組中特定項(xiàng)的值。

從本質(zhì)上講，這很簡(jiǎn)單，只需要分配新值，但是在函數(shù)世界中，不能修改原始數(shù)組。

相反，可以將slice與擴(kuò)展運(yùn)算符一起使用，以返回一個(gè)相同但對(duì)于要更新的​​索引的新數(shù)組：

function replaceIdx(arr, index, newVal) { 
 return [ 
 ...arr.slice(0, index), 
 newVal, 
 ...arr.slice(index + 1) 
 ] 
} 

偏函數(shù)應(yīng)用

偏函數(shù)應(yīng)用，英文是partial application，也可以譯作“局部應(yīng)用”、“部分應(yīng)用”、“偏應(yīng)用”

函數(shù)式編程中的另一種常見(jiàn)模式是所謂的偏函數(shù)應(yīng)用：將函數(shù)預(yù)先應(yīng)用于函數(shù)，然后返回一個(gè)新函數(shù)。

這種模式允許你組合函數(shù)，通過(guò)使用具有不同預(yù)應(yīng)用參數(shù)的相同核心函數(shù)來(lái)創(chuàng)建更大的可重用性。

雖然像Haskell這樣的純函數(shù)語(yǔ)言本身支持偏函數(shù)應(yīng)用程序，但是在JavaScript中，我們可以使用slice實(shí)現(xiàn)一個(gè)函數(shù)來(lái)實(shí)現(xiàn)它