Array.slice 8種不同用法

張春雷發布于2019-08-23 18:35 / 2092人閱讀

摘要：而對于一個普通的對象來說，如果它的所有名均為正整數，同時也有相應的屬性，那么雖然該對象并不是由構造函數所創建的，它依然呈現出數組的行為，在這種情況下，這些對象被稱為類數組對象。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

JS數組slice方法是JS語言中最強大、最常用的內建函數之一。

隨著React和其他面向功能的JavaScript實踐的興起，它變得越來越重要，原因有兩個:

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

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

JavaScript 數組slice方法符合這兩個標準。

slice方法可以在不修改原始列表的情況下創建列表子集的淺拷貝。因此，它為編寫函數式 JS 提供了一個關鍵的構建塊。

在這篇文章中，我們將通過實例來掌握slice方法，探索它的8種不同用法。

注意:slice 方法不要與splice方法混淆，splice方法會修改原始數組。

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 也會一直提取到原數組末尾。

基本用法

我們的前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));
  }
}

交流

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。

云服務器 GPU云服務器四種用法 js輸出8個不同的數不同域名內容不同 8

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105491.html

Javascript數組詳解

摘要：創建數組判斷比是否是個數組取數組元素屬性返回數組的成員數量。增加數組元素方法在數組的末尾增加一個或多個元素，并返回數組的新長度。表示要移除的數組元素的個數要添加進數組的元素最主要的的用途是向數組的中部插入元素。數組的定義數組是按序號排列的一組值，每個值的位置都有編號（從0開始）。數組本質上是一種特殊的對象。它的鍵名是按（0，1，2...）排列的一組數字。創建數組： var a...

geekidentity 2019-08-21 14:05 評論0 收藏0
Javascript數組系列五之增刪改和強大的 splice()

摘要：刪除數組元素的開始索引需要刪除元素的個數，插入數組的元素語法因為參數變化多樣，我們主要從三個方面來展示的用法。今天是我們介紹數組系列文章的第五篇，也是我們數組系列的最后一篇文章，只是數據系列的結束，所以大家不用擔心，我們會持續的更新干貨文章。生命不息，更新不止！今天我們就不那么多廢話了，直接干貨開始。我們在《Javascript數組系列一之棧與隊列》中描述我們是如何利用 pus...

chavesgu 2019-08-23 12:01 評論0 收藏0
js數組用法

摘要：方法是方法的逆向操作，后者是將字符串分割成數組。不是所有的值都是偶數含有偶數和將數組元素進行組合，生成單個值數組求和數組求積求最大值函數需要兩個函數，第一個是執行簡化操作的函數，第二個是初始值。數組的添加和刪除 push()方法在數組的尾部添加一個或者多個元素 a = []; a.push(zero) // a = [zero] a.push(on...

Harriet666 2019-08-26 11:50 評論0 收藏0
愛上Javascript數組Array（二）——方法解讀

摘要：返回一個將數組所有元素用分隔符拼接成的字符串，默認分隔符為逗號。重復的次數就是數組長度減一，因為字符串是分隔符。由于數組本身是對象，擁有方法，利用它也能實現將數組拼接成一個字符串，只不過分隔符只能是逗號了。接上一篇《愛上Javascript數組Array（一）——基礎介紹》，這一篇詳細介紹Array的所有方法。所有數組的方法都定義在Array.prototype上,而Array.p...

CoffeX 2019-08-19 17:49 評論0 收藏0
Slice無參調用可以將類數組對象（含有length屬性）轉化成數組

摘要：首先，有兩個用法，一個是一個是，第一個返回的是字符串，第二個返回的是數組，這里我們看第個。最后，附個轉成數組的通用函數據說這樣比快 Array.prototype.slice.call(arguments) 根據call的使用方法，我們可以猜測以下可能相等： [].slice.call(arguments) => arguments.slice() 我帶著好像少了一個必需參數的疑問去...

MudOnTire 2019-08-22 18:31 評論0 收藏0