摘要:而對于一個(gè)普通的對象來說,如果它的所有名均為正整數(shù),同時(shí)也有相應(yīng)的屬性,那么雖然該對象并不是由構(gòu)造函數(shù)所創(chuàng)建的,它依然呈現(xiàn)出數(shù)組的行為,在這種情況下,這些對象被稱為類數(shù)組對象。
為了保證的可讀性,本文采用意譯而非直譯。
想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你!
JS數(shù)組slice方法是JS語言中最強(qiáng)大、最常用的內(nèi)建函數(shù)之一。
隨著React和其他面向功能的JavaScript實(shí)踐的興起,它變得越來越重要,原因有兩個(gè):
函數(shù)式編程,尤其是高階函數(shù),與數(shù)據(jù)列表密切配合
函數(shù)式編程需要純函數(shù),即不會(huì)產(chǎn)生副作用或修改輸入數(shù)據(jù)的函數(shù)
JavaScript 數(shù)組slice方法符合這兩個(gè)標(biāo)準(zhǔn)。
slice方法可以在不修改原始列表的情況下創(chuàng)建列表子集的淺拷貝。因此,它為編寫函數(shù)式 JS 提供了一個(gè)關(guān)鍵的構(gòu)建塊。
在這篇文章中,我們將通過實(shí)例來掌握slice方法,探索它的8種不同用法。
注意:slice 方法不要與splice方法混淆,splice方法會(huì)修改原始數(shù)組。slice 工作原理
在深入研究一些更高級(jí)的用法之前,讓我們看一下slice方法的基礎(chǔ)知識(shí)。
如MDN文檔,slice 是數(shù)組上的一個(gè)方法,它最多有兩個(gè)參數(shù):
arr.slice([begin[, end]])
begin
從該索引處開始提取原數(shù)組中的元素,如果該參數(shù)為負(fù)數(shù),則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開始提取,slice(-2)表示提取原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素(包含最后一個(gè)元素)。
如果省略 begin,則 slice 從索引 0 開始。
end
在該索引處結(jié)束提取原數(shù)組元素(從0開始)。slice會(huì)提取原數(shù)組中索引從 begin 到 end 的所有元素(包含begin,但不包含end)。
slice(1,4) 提取原數(shù)組中的第二個(gè)元素開始直到第四個(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ù)組長度,slice 也會(huì)一直提取到原數(shù)組末尾。
基本用法我們的前4個(gè)例子突出slice的核心功能。
用法1:簡單的復(fù)制const arr2 = arr.slice
沒有任何參數(shù)的slice執(zhí)行一個(gè)簡單的淺拷貝。當(dāng)前,主流的用法還是使用展開運(yùn)算符合來實(shí)現(xiàn),但是如果在舊的代碼庫中,或者沒有使用babel的構(gòu)建步驟,可能仍然希望使用slice。
用法2:獲取從 N 開始的子數(shù)組使用slice方法最簡單的方法就是原始數(shù)組從N開始抽取的所有元素。
一種情況是希望彈出數(shù)組的第一個(gè)元素并使用它,返回剩余的數(shù)組,但希望在不修改原始數(shù)組的情況下執(zhí)行此操作。
function useone (arr) { const usedItem = arr[0] return arr.slice(1) }用法3:獲取從末尾 N 開始的子數(shù)組
slice的另一種使用方法是獲取數(shù)組的末尾,利用的是負(fù)索引從末尾開始計(jì)數(shù)。
這種負(fù)索引使刪除任意數(shù)量的元素變得超級(jí)簡單。例如,如果你只想抓取3個(gè)
const last3 = arr.slice(-3)用法4:獲取數(shù)組的前n個(gè)
獲取數(shù)組的前面的數(shù),我們需要使用第二個(gè)參數(shù):end。
當(dāng)有兩個(gè)參數(shù)時(shí),slice方法返回一個(gè)從begin開始但不包括end的集合。
由于JavaScript數(shù)組是從0開始的(索引從0開始),這使得獲取前N個(gè)元素變得非常簡單:
const first4 = arr.slice(0, 4)
用法5:獲取數(shù)組中某段子數(shù)組如果我們想要使用slice從任何索引開始獲取數(shù)組的一段,該怎么辦?
為此,我們需要從 (begin, length) 轉(zhuǎn)換為(begin, end)。 計(jì)算邏輯很簡單,我們可以定義一個(gè)簡單的函數(shù)來做到這一點(diǎn):
function pullSegment(arr, begin, length) { return arr.slice(begin, begin + length); }處理類似數(shù)組的對象
JavaScript中,數(shù)組是一個(gè)特殊的對象,其property名為正整數(shù),且其length屬性會(huì)隨著數(shù)組成員的增減而發(fā)生變化,同時(shí)又從Array構(gòu)造函數(shù)中繼承了一些用于進(jìn)行數(shù)組操作的方法。
而對于一個(gè)普通的對象來說,如果它的所有property名均為正整數(shù),同時(shí)也有相應(yīng)的length屬性,那么雖然該對象并不是由Array構(gòu)造函數(shù)所創(chuàng)建的,它依然呈現(xiàn)出數(shù)組的行為,在這種情況下,這些對象被稱為 “類數(shù)組對象” 。
slice方法也可用于類似數(shù)組的對象。
一些類似數(shù)組包如arguments(用于訪問傳遞給函數(shù)的所有參數(shù)的關(guān)鍵字),NodeLists(從返回節(jié)點(diǎn)列表的任何DOM API方法返回),甚至是使用數(shù)字索引并添加length屬性的原始對象。
要在類似數(shù)組的對象上使用slice方法,需要直接從Array.prototype引用它,如下所示:
Array.prototype.slice.call(arguments)
在這特定的場合中會(huì)很有用處。
用法6:將類似數(shù)組的對象轉(zhuǎn)換為數(shù)組slice在類似數(shù)組的對象上的一個(gè)常見用途是將它們轉(zhuǎn)換為實(shí)際數(shù)組。 例如:
const args = Array.prototype.slice.call(arguments);
你為什么要這么做?為了使用數(shù)組方法。例如,想象一個(gè)像這樣的函數(shù)
function addOne() { return arguments.map(i => i+1); }
這看起來可行,但如果你試著去做,你就會(huì)得到錯(cuò)誤:
> 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)
這是因?yàn)?b>arguments 實(shí)際上不是數(shù)組,而是類似數(shù)組的對象。 可以使用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:將任意長度多余的參數(shù)強(qiáng)制轉(zhuǎn)換為數(shù)組
有時(shí)希望接受函數(shù)的多余參數(shù),組成一個(gè)數(shù)組。
較新版本的JavaScript引入了所謂的Rest語法來處理這個(gè)問題,但是如果為為了兼容舊瀏覽器,你可以使用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)大而常見的用法是替換數(shù)組中特定項(xiàng)的值。
從本質(zhì)上講,這很簡單,只需要分配新值,但是在函數(shù)世界中,不能修改原始數(shù)組。
相反,可以將slice與擴(kuò)展運(yùn)算符一起使用,以返回一個(gè)相同但對于要更新的??索引的新數(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ù)式編程中的另一種常見模式是所謂的偏函數(shù)應(yīng)用:將函數(shù)預(yù)先應(yīng)用于函數(shù),然后返回一個(gè)新函數(shù)。
這種模式允許你組合函數(shù),通過使用具有不同預(yù)應(yīng)用參數(shù)的相同核心函數(shù)來創(chuàng)建更大的可重用性。
雖然像Haskell這樣的純函數(shù)語言本身支持偏函數(shù)應(yīng)用程序,但是在JavaScript中,我們可以使用slice實(shí)現(xiàn)一個(gè)函數(shù)來實(shí)現(xiàn)它
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)); } }交流
我是小智,公眾號(hào)「大遷世界」作者,對前端技術(shù)保持學(xué)習(xí)愛好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨,在進(jìn)階的路上,共勉!
關(guān)注公眾號(hào),后臺(tái)回復(fù)福利,即可看到福利,你懂的。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/105491.html
摘要:創(chuàng)建數(shù)組判斷比是否是個(gè)數(shù)組取數(shù)組元素屬性返回?cái)?shù)組的成員數(shù)量。增加數(shù)組元素方法在數(shù)組的末尾增加一個(gè)或多個(gè)元素,并返回?cái)?shù)組的新長度。表示要移除的數(shù)組元素的個(gè)數(shù)要添加進(jìn)數(shù)組的元素最主要的的用途是向數(shù)組的中部插入元素。 數(shù)組的定義 數(shù)組是按序號(hào)排列的一組值,每個(gè)值的位置都有編號(hào)(從0開始)。數(shù)組本質(zhì)上是一種特殊的對象。它的鍵名是按(0,1,2...)排列的一組數(shù)字。 創(chuàng)建數(shù)組: var a...
摘要:刪除數(shù)組元素的開始索引需要?jiǎng)h除元素的個(gè)數(shù),插入數(shù)組的元素語法因?yàn)閰?shù)變化多樣,我們主要從三個(gè)方面來展示的用法。 今天是我們介紹數(shù)組系列文章的第五篇,也是我們數(shù)組系列的最后一篇文章,只是數(shù)據(jù)系列的結(jié)束,所以大家不用擔(dān)心,我們會(huì)持續(xù)的更新干貨文章。 生命不息,更新不止! 今天我們就不那么多廢話了,直接干貨開始。 我們在《Javascript數(shù)組系列一之棧與隊(duì)列》中描述我們是如何利用 pus...
摘要:方法是方法的逆向操作,后者是將字符串分割成數(shù)組。不是所有的值都是偶數(shù)含有偶數(shù)和將數(shù)組元素進(jìn)行組合,生成單個(gè)值數(shù)組求和數(shù)組求積求最大值函數(shù)需要兩個(gè)函數(shù),第一個(gè)是執(zhí)行簡化操作的函數(shù),第二個(gè)是初始值。 數(shù)組的添加和刪除 push()方法在數(shù)組的尾部添加一個(gè)或者多個(gè)元素 a = []; a.push(zero) // a = [zero] a.push(on...
摘要:返回一個(gè)將數(shù)組所有元素用分隔符拼接成的字符串,默認(rèn)分隔符為逗號(hào)。重復(fù)的次數(shù)就是數(shù)組長度減一,因?yàn)樽址欠指舴S捎跀?shù)組本身是對象,擁有方法,利用它也能實(shí)現(xiàn)將數(shù)組拼接成一個(gè)字符串,只不過分隔符只能是逗號(hào)了。 接上一篇《愛上Javascript數(shù)組Array(一)——基礎(chǔ)介紹》,這一篇詳細(xì)介紹Array的所有方法。 所有數(shù)組的方法都定義在Array.prototype上,而Array.p...
摘要:首先,有兩個(gè)用法,一個(gè)是一個(gè)是,第一個(gè)返回的是字符串,第二個(gè)返回的是數(shù)組,這里我們看第個(gè)。最后,附個(gè)轉(zhuǎn)成數(shù)組的通用函數(shù)據(jù)說這樣比快 Array.prototype.slice.call(arguments) 根據(jù)call的使用方法,我們可以猜測以下可能相等: [].slice.call(arguments) => arguments.slice() 我?guī)е孟裆倭艘粋€(gè)必需參數(shù)的疑問去...
閱讀 1605·2021-09-23 11:31
閱讀 920·2021-09-23 11:22
閱讀 1337·2021-09-22 15:41
閱讀 4062·2021-09-03 10:28
閱讀 2907·2019-08-30 15:55
閱讀 3536·2019-08-30 15:55
閱讀 1942·2019-08-30 15:44
閱讀 2712·2019-08-30 13:50