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 也會一直提取到原數組末尾。
http://www.ssnd.com.cn 化妝品OEM代加工
基本用法
我們的前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)
]
}
偏函數應用
偏函數應用,英文是 partial application ,也可以譯作“局部應用”、“部分應用”、“偏應用”
函數式編程中的另一種常見模式是所謂的偏函數應用:將函數預先應用於函數,然后返回一個新函數。
這種模式允許你組合函數,通過使用具有不同預應用參數的相同核心函數來創建更大的可重用性。
雖然像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));
}
}