Array.slice 8種不同用法
JS數(shù)組slice方法是JS語言中最強大、最常用的內建函數(shù)之一。
隨著React和其他面向功能的JavaScript實踐的興起，它變得越來越重要，原因有兩個：
- 函數(shù)式編程，尤其是高階函數(shù)，與數(shù)據(jù)列表密切配合
- 函數(shù)式編程需要純函數(shù)，即不會產生副作用或修改輸入數(shù)據(jù)的函數(shù)
JavaScript 數(shù)組slice方法符合這兩個標準。
slice方法可以在不修改原始列表的情況下創(chuàng)建列表子集的淺拷貝。因此，它為編寫函數(shù)式 JS 提供了一個關鍵的構建塊。
在這篇文章中，我們將通過實例來掌握slice方法，探索它的8種不同用法。
注意:slice 方法不要與splice方法混淆，splice方法會修改原始數(shù)組。
slice 工作原理
在深入研究一些更高級的用法之前，讓我們看一下slice方法的基礎知識。
如MDN文檔，slice 是數(shù)組上的一個方法，它最多有兩個參數(shù)：
- arr.slice([begin[, end]])
1. begin
從該索引處開始提取原數(shù)組中的元素,如果該參數(shù)為負數(shù)，則表示從原數(shù)組中的倒數(shù)第幾個元素開始提取，slice(-2)表示提取原數(shù)組中的倒數(shù)第二個元素到最后一個元素(包含最后一個元素)。
如果省略 begin，則 slice 從索引 0 開始。
2. end
在該索引處結束提取原數(shù)組元素(從0開始)。slice會提取原數(shù)組中索引從 begin 到 end 的所有元素(包含begin，但不包含end)。
slice(1,4) 提取原數(shù)組中的第二個元素開始直到第四個元素的所有元素 (索引為 1, 2, 3的元素)。
如果該參數(shù)為負數(shù)， 則它表示在原數(shù)組中的倒數(shù)第幾個元素結束抽取。 slice(-2,-1)表示抽取了原數(shù)組中的倒數(shù)第二個元素到最后一個元素(不包含最后一個元素，也就是只有倒數(shù)第二個元素)。
如果 end 被省略，則slice 會一直提取到原數(shù)組末尾。如果 end 大于數(shù)組長度，slice 也會一直提取到原數(shù)組末尾。
基本用法
我們的前4個例子突出slice的核心功能。
用法1：簡單的復制
- const arrarr2 = arr.slice
沒有任何參數(shù)的slice執(zhí)行一個簡單的淺拷貝。當前，主流的用法還是使用展開運算符合來實現(xiàn)，但是如果在舊的代碼庫中，或者沒有使用babel的構建步驟，可能仍然希望使用slice。
用法2：獲取從 N 開始的子數(shù)組
使用slice方法最簡單的方法就是原始數(shù)組從N開始抽取的所有元素。
一種情況是希望彈出數(shù)組的第一個元素并使用它，返回剩余的數(shù)組，但希望在不修改原始數(shù)組的情況下執(zhí)行此操作。
- function useone (arr) {
- const usedItem = arr[0]
- return arr.slice(1)
- }
用法3：獲取從末尾 N 開始的子數(shù)組
slice的另一種使用方法是獲取數(shù)組的末尾，利用的是負索引從末尾開始計數(shù)。
這種負索引使刪除任意數(shù)量的元素變得超級簡單。例如，如果你只想抓取3個
- const last3 = arr.slice(-3)
用法4：獲取數(shù)組的前n個
獲取數(shù)組的前面的數(shù)，我們需要使用第二個參數(shù)：end。
當有兩個參數(shù)時，slice方法返回一個從begin開始但不包括end的集合。
由于JavaScript數(shù)組是從0開始的(索引從0開始)，這使得獲取前N個元素變得非常簡單：
- const first4 = arr.slice(0, 4)
用法5：獲取數(shù)組中某段子數(shù)組
如果我們想要使用slice從任何索引開始獲取數(shù)組的一段，該怎么辦?
為此，我們需要從 (begin, length) 轉換為(begin, end)。 計算邏輯很簡單，我們可以定義一個簡單的函數(shù)來做到這一點：
- function pullSegment(arr, begin, length) {
- return arr.slice(begin, begin + length);
- }
處理類似數(shù)組的對象
JavaScript中，數(shù)組是一個特殊的對象，其property名為正整數(shù)，且其length屬性會隨著數(shù)組成員的增減而發(fā)生變化，同時又從Array構造函數(shù)中繼承了一些用于進行數(shù)組操作的方法。
而對于一個普通的對象來說，如果它的所有property名均為正整數(shù)，同時也有相應的length屬性，那么雖然該對象并不是由Array構造函數(shù)所創(chuàng)建的，它依然呈現(xiàn)出數(shù)組的行為，在這種情況下，這些對象被稱為 “類數(shù)組對象” 。
slice方法也可用于類似數(shù)組的對象。
一些類似數(shù)組包如arguments(用于訪問傳遞給函數(shù)的所有參數(shù)的關鍵字)，NodeLists(從返回節(jié)點列表的任何DOM API方法返回)，甚至是使用數(shù)字索引并添加length屬性的原始對象。
要在類似數(shù)組的對象上使用slice方法，需要直接從Array.prototype引用它，如下所示：
- Array.prototype.slice.call(arguments)
在這特定的場合中會很有用處。
用法6：將類似數(shù)組的對象轉換為數(shù)組
slice在類似數(shù)組的對象上的一個常見用途是將它們轉換為實際數(shù)組。 例如：
const args = Array.prototype.slice.call(arguments);
你為什么要這么做?為了使用數(shù)組方法。例如，想象一個像這樣的函數(shù)
- function addOne() {
- return arguments.map(i => i+1);
- }
這看起來可行，但如果你試著去做，你就會得到錯誤：
這是因為arguments 實際上不是數(shù)組，而是類似數(shù)組的對象。 可以使用slice實現(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：將任意長度多余的參數(shù)強制轉換為數(shù)組
有時希望接受函數(shù)的多余參數(shù)，組成一個數(shù)組。
較新版本的JavaScript引入了所謂的Rest語法來處理這個問題，但是如果為為了兼容舊瀏覽器，你可以使用slice做到這一點：
- function myFunc(a, b) {
- const extraArgs = Array.prototype.slice.call(arguments, 2);
- }
這允許使用任意數(shù)量的參數(shù)調用myFunc， 例如：
- myFunc(1, 2, 3, 4, 5, 6, 7, 8)
在函數(shù)里面會得到a == 1，b === 2，extraArgs=== [3,4,5,6,7,8]
用法8：修改數(shù)組中的特定索引
slice在函數(shù)上下文中一個強大而常見的用法是替換數(shù)組中特定項的值。
從本質上講，這很簡單，只需要分配新值，但是在函數(shù)世界中，不能修改原始數(shù)組。
相反，可以將slice與擴展運算符一起使用，以返回一個相同但對于要更新的索引的新數(shù)組：
- function replaceIdx(arr, index, newVal) {
- return [
- ...arr.slice(0, index),
- newVal,
- ...arr.slice(index + 1)
- ]
- }
偏函數(shù)應用
偏函數(shù)應用，英文是partial application，也可以譯作“局部應用”、“部分應用”、“偏應用”
函數(shù)式編程中的另一種常見模式是所謂的偏函數(shù)應用：將函數(shù)預先應用于函數(shù)，然后返回一個新函數(shù)。
這種模式允許你組合函數(shù)，通過使用具有不同預應用參數(shù)的相同核心函數(shù)來創(chuàng)建更大的可重用性。
雖然像Haskell這樣的純函數(shù)語言本身支持偏函數(shù)應用程序，但是在JavaScript中，我們可以使用slice實現(xiàn)一個函數(shù)來實現(xiàn)它
