8 種 Array.slice 不同用法,你需要知道

2021-02-20 web前端開發
原文地址 | https://codeburst.io/js-by-example-8-distinct-uses-of-javascript-array-slice-4e4e95a470e4JS數組slice方法是JS語言中最強大、最常用的內建函數之一。
隨著React和其他面向功能的JavaScript實踐的興起,它變得越來越重要,原因有兩個:

函數式編程,尤其是高階函數,與數據列表密切配合

函數式編程需要純函數,即不會產生副作用或修改輸入數據的函數

JavaScript 數組slice方法符合這兩個標準。slice方法可以在不修改原始列表的情況下創建列表子集的淺拷貝。因此,它為編寫函數式 JS 提供了一個關鍵的構建塊。在這篇文章中,我們將通過實例來掌握slice方法,探索它的8種不同用法。注意:slice 方法不要與splice方法混淆,splice方法會修改原始數組。slice 工作原理在深入研究一些更高級的用法之前,讓我們看一下slice方法的基礎知識。如MDN文檔,slice 是數組上的一個方法,它最多有兩個參數:
arr.slice([begin[, end]])

從該索引處開始提取原數組中的元素,如果該參數為負數,則表示從原數組中的倒數第幾個元素開始提取,slice(-2)表示提取原數組中的倒數第二個元素到最後一個元素(包含最後一個元素)。如果省略 begin,則 slice 從索引 0 開始。在該索引處結束提取原數組元素(從0開始)。slice會提取原數組中索引從 begin 到 end 的所有元素(包含begin,但不包含end)。slice(1,4) 提取原數組中的第二個元素開始直到第四個元素的所有元素 (索引為 1, 2, 3的元素)。如果該參數為負數, 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1)表示抽取了原數組中的倒數第二個元素到最後一個元素(不包含最後一個元素,也就是只有倒數第二個元素)。如果 end 被省略,則slice 會一直提取到原數組末尾。如果 end 大於數組長度,slice 也會一直提取到原數組末尾。基本用法用法1:簡單的複製沒有任何參數的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構造函數所創建的,它依然呈現出數組的行為,在這種情況下,這些對象被稱為 「類數組對象」 。一些類似數組包如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 functionat test (repl:2:18)at repl:1:1at 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 fnreturn function() {var remainingArgs = Array.prototype.slice.call(arguments);return fn.apply(this, args.concat(remainingArgs)); }}

相關焦點

  • Array.slice 8種不同用法
    譯者:前端小智 原文:https://codeburst.io/js-by-example-8-distinct-uses-of-javascript-array-slice
  • 【譯】Rust中的array、vector和slice
    地址的變化清楚地證明了其幕後分配了一個容量為 8 的新 array。如果你在 vector 中 push 進了一個元素但是卻沒有看到不同的地址,這可能是因為原始的 buffer 尾部還有足夠的空間,因此新舊 buffer 擁有相同的起始地址。嘗試 push 更多的元素,你就會看到不同的地址。閱讀 C 的庫函數realloc來理解這是如何運作的。
  • 【數組分享】PHP函數array_slice ()分享(2020-11-25)
    array_slice () 從數組中取出一段。 array array_slice ( array $array , int $offset [, int $length = NULL [, bool $preserve_keys = false ]] )array_slice() 返回根據 offset 和 length 參數所指定的 array 數組中的一段序列。
  • 【重學JS系列】slice用法大合集
    如果 end 大於數組長度,slice 也會一直提取到原數組末尾。基本用法我們的前4個例子突出slice的核心功能。用法1:簡單的複製沒有任何參數的slice執行一個簡單的淺拷貝。function useone (arr) { const usedItem = arr[0] return arr.slice(1)}用法3:獲取從末尾 N 開始的子數組slice的另一種使用方法是獲取數組的末尾
  • 從 JS 數組操作到 V8 array.js
    array.js源碼淺析如何自己實現常見的數組方法」,如果你想提高自己編碼能力,可以留下來看看這篇文章「閱讀完,你將收穫👏」如果喜歡的話可以點讚/關注,支持一下,希望大家可以看完本文有所收穫❝需要下載本文代碼的點GitHub❞
  • 區分JavaScript數組的slice()與splice()
    簡述JavaScript數組中存在兩個看起來十分相似的方法,分別是slice()與splice()。其中,JavaScript的 slice() 方法可從已有的數組中返回選定的元素,該方法不會改變原始數組。
  • Golang【源碼系列】深入了解slice
    本文將從四個方面逐步描繪Golang中slice的全貌,重點關注slice的實現原理,各位同學可以根據需要自行選擇位置開始閱讀。
  • 一種理解 Golang Slice 的模型
    【導讀】本文以圖示的方式給出一種理解 slice 的模型的方法,分析了在特殊場景的slice用法。概述Golang 中 slice 極似其他語言中數組,但又有諸多不同,因此容易使初學者產生一些誤解,並在使用時不易察覺地掉進各種坑中。
  • 徹底理解Golang Slice
    slice struct { array unsafe.Pointer  len   int  cap   int }array : 包含了一個指向一個數組的指針,數據實際上存儲在這個指針指向的數組上,佔用 8 byteslen:  當前 slice
  • JavaScript中原生Array數組方法詳解
    這篇文章中,我將盤點下定義在Array原型上的一些常用的方法,並逐一介紹其用法。1.forEach()forEach對數組的所有成員依次執行且只執行一次參數函數,參數函數包含以下3個參數:進一步,可以傳遞一個可選參數用作指定函數裡的這個。
  • 常見的數組基本用法
    */Array.of(8)//[8]Array.of(8.0)//[8]Array.of("8",8)// ["8", 8]   //第三種:Array.from(類似從一個可迭代對象中創建一個新的數組實例)   /*     Array.from(arg1,arg2,arg3)
  • JavaScript 特殊對象 Array-Like Objects 詳解
    我們簡單了解下,主要的原因是 slice 方法只需要參數有 length 屬性即可。首先,slice 方法得到的結果是一個 新的數組,通過 Array.prototype.slice.call 傳入的參數(假設為 a),如果沒有 length 屬性,或者 length 屬性值不是 Number 類型,或者為負,那麼直接返回一個空數組,否則返回 a[0]-a[length-1] 組成的數組。
  • python基礎-bytes和bytearray的用法
    Python中的序列類型有bytes和bytearray。二進位序列類型的用法比較少見,是python中少用的一種序列類型,對於二進位序列類型,大家基本了解即可。\xe6\xb5\xa9'b'\xd1\xee\xcb\xb9\xba\xc6'楊斯浩楊斯浩解析:utf-8:3個字節(3bytes)表示一個漢字,GBK使用兩個字節(2bytes)表示一個漢字,所以「楊斯浩」3個漢字,utf-8 需要9個字節,GBK 需要6個字節。
  • C++11學習 - Array的用法與vector用法
    作者丨淡淡_小孩https://blog.51cto.com/13475106/2554602C++11學習 - Array的用法與
  • JavaScript 數組:對比 slice 與 splice
    它們雖然名稱相似,但是功能卻完全不同。在使用中,可以通過選擇一個具有強語義表達性的 API 來減少混淆的發生。數組的 slice (ECMAScript 5.1 標準 15.4.4.10 節)非常類似於字符串的 slice。根據規範,slice 需要兩個參數,起點和終點。它會返回一個包含了從起點開始,到終點之前之間所有元素的新數組。
  • Golang 筆記(三):一種理解 Slice 的模型
    概述Golang 中 slice 極似其他語言中數組,但又有諸多不同,因此容易使初學者產生一些誤解,並在使用時不易察覺地掉進各種坑中。在 Go 語言中,切片(slice)和數組(array)是伴生的,切片基於數組,但更為靈活,因此在 Go 中,作為切片底層的數組反而很少用到。但,要理解切片,須從數組說起。
  • 從Golang Slice的內存洩漏來理解Slice的使用邏輯
    Golang是自帶GC的,如果資源一直被佔用,是不會被自動釋放的,比如下面的代碼,如果傳入的slice b是很大的,然後引用很小部分給全局量a,那麼b未被引用的部分就不會被釋放,造成了所謂的內存洩漏。var a []intfunc test(b []int) { a = b[:1] return}想要理解這個內存洩漏,主要就是理解上面的a = b[:1]是一個引用,其實新、舊slice指向的都是同一片內存地址,那麼只要全局量a在,b就不會被回收。
  • JS面試題之面試官問:數組slice和splice怎麼使用?有何區別?(二)
    今天要分享的題也是非常基礎的題,在平時的日常開發中肯定是用過數組的slice和splice方法,那麼你能準確的說出slice和splice數怎麼使用的嗎
  • 一文學會JS的數組函數:slice()
    本文結合實例講解slice(),後期將講解他的另兩個兄弟splice () 和split ()。這三個數組的原生函數,或許是因為它們的名字比較相似,會讓初學者有點摸不著頭腦。同時關於這三個函數之間的區別也是面試時的熱門話題!
  • JavaScript Array對象
    array1.concat(array2,array3,…,arrayX)every()檢測數組元素的每個元素是否都符合條件。array.every(function(currentValue,index,arr), thisValue)filter()檢測數組元素,並返回符合條件所有元素的數組。