Array.prototype.slice.call 將偽數組轉成真數組的原理是什么？

shinezejian 發布于2019-08-23 13:56 / 3215人閱讀

摘要：好久沒上，昨天上來看到一個問題，引起了我的興趣。請看上面的例子可能很多前端童鞋都很知道可以用于將類數組對象轉為數組，和的用法和作用網上一搜一大堆。在這里主要是為了讓借用構造函數原型上的方法，并且改變方法里的的指向。

好久沒上SF，昨天上來看到一個問題，引起了我的興趣。一番探索和研究后，有了此篇文章，也算是對該問題的解答。

let pretendArr = {0:0,1:1,2:2,length:3};
[].slice.call(pretendArr); //[0,1,2]

請看上面的例子
可能很多前端童鞋都很知道 Array.prototype.slice.call 可以用于將類數組對象轉為數組，call 和 apply 的用法和作用網上一搜一大堆。
在這里主要是為了讓 pretendArr 借用Array構造函數原型上的 slice 方法，并且改變 slice 方法里的 this 的指向。
所以這個問題其實不在于 call 或者 apply，關鍵在于 Array.prototype.slice 這個方法上。

slice這個方法是js原生方法，自然而然，我會想到去找找 es 的規范，看看這個方法是怎樣定義，以及如何實現的。

以下是es對該方法定義的截圖，圖片看不清楚的童鞋可以看看鏈接

嫌英文字母太多的可以直接看以下我寫的slice方法的偽代碼：

Array.prototype.slice = (start, end) => {
  let O = ToObject(this)
  let A = new Array()
  let lenVal = O.length
  let len = ToUnit32(lenVal)
  let relativeStart = ToInteger(start)
  let k, final, relativeEnd
  if (relativeStart < 0) {
    k = max(len + relativeStart, 0)
  } else {
    k = min(relativeStart, len)
  }
  if (end === undefined) {
    relativeEnd = len
  } else {
    relativeEnd = ToInteger(end)
  }
  if (relativeEnd < 0) {
    final = max(len + relativeEnd, 0)
  } else {
    final = min(relativeEnd, len)
  }
  let n = 0
  while (k < final) {
    let Pk = ToString(k)
    let kPresent = O.hasOwnProperty(Pk)
    if (kPresent) {
      let kValue = O[Pk]
      Object.defineProperty(A, ToString(n), {
        value: kValue,
        writable: true,
        enumerable: true,
        configurable: true
      })
    }
    k++
    n++
  }
  return A
}

ToObject、ToUnit32、ToInteger、ToString
slice 方法不要求 this 必須是數組，因此類數組對象也可以調用該方法，在本例中入參 start 和 end 均為 undefined，實際上是根據類數組對象的 length 屬性，從0到length-1去把類數組對象對應的值取出來，放到前面聲明的數組 A 里，最終再return A
因此，類數組對象的 length 屬性很重要，并且該對象里的數序也很重要，都會影響到轉換為數組的結果。如以下例子：

let pretendArrA = {0:0, 1:1, 2:2, length:2};
[].slice.call(pretendArrA); //[0,1]

let pretendArrB = {0:0, 2:2, length:3};
[].slice.call(pretendArrB); //[0, undefined, 2]

第一次寫文章，想到哪寫到哪，寫得有點亂，各位看官勿怪，如果對你有用，還請點個贊~

GPU云服務器云服務器 php數組的原理數組是什么什么是數組 php的變量轉數組

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

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

偽數組及其轉換為真數組原理

摘要：偽數組及其轉換為真數組原理什么是偽數組定義擁有屬性和數值下標屬性。不具有數組所具有的方法。偽數組是一個，而真實的數組是一個常見的偽數組參數數組對象列表比如通過得到的列表對象比如舉例通過得到的對象列表是一個偽數組。偽數組及其轉換為真數組原理什么是偽數組定義：擁有length屬性和數值下標屬性。不具有數組所具有的方法。偽數組是一個Object，而真實的數組是一個Array ...

fobnn 2019-08-23 17:54 評論0 收藏0
深入理解 Javascript 之 this

摘要：深入淺出的理解問題的由來寫法一寫法二雖然和指向同一個函數，但是執行結果可能不一樣。該變量由運行環境提供。所以，就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。深入淺出this的理解問題的由來 var obj = { foo: function(){} } var foo = obj.foo; // 寫法一 obj.foo(); // 寫法二 foo...

OnlyMyRailgun 2019-08-23 10:54 評論0 收藏0
將偽數組轉換為數組的幾個方法

摘要：第一個借用數組的方法請輸入代碼第二個新增的一個方法第三個原型將對象轉換為數組第一個借用數組的slice方法 var a ={ 0:t, 1:a, 2:r, length:3 } let b=Array.prototype.slice.call(a); console.log(b) 請輸入代碼第二...

陸斌 2019-08-23 18:35 評論0 收藏0
【進階3-3期】深度解析 call 和 apply 原理、使用場景及實現

摘要：之前文章詳細介紹了的使用，不了解的查看進階期。不同的引擎有不同的限制，核心限制在，有些引擎會拋出異常，有些不拋出異常但丟失多余參數。存儲的對象能動態增多和減少，并且可以存儲任何值。這邊采用方法來實現，拼成一個函數。之前文章詳細介紹了 this 的使用，不了解的查看【進階3-1期】。 call() 和 apply() call() 方法調用一個函數, 其具有一個指定的 this 值和分...

godlong_X 2019-08-23 14:31 評論0 收藏0
JavaScript基礎知識整理（1）

摘要：從這段描述可以得到以下對象小芒和小賢一樣，原來也是一條可愛的小狗，可是突然有一天瘋了，一看到人就會每隔半秒叫一聲地不停叫喚。將一個函數的對象上下文從初始的上下文改變為由指定的新對象。 1、JavaScript數據類型有哪些？基本數據類型：Number、String、Boolean、Null、Undefined 引用數據類型：Object（Array、Date、RegExp、Funct...

macg0406 2019-08-21 16:22 評論0 收藏0