成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Array.prototype.slice.call 將偽數(shù)組轉(zhuǎn)成真數(shù)組的原理是什么？

shinezejian / 3223人閱讀

摘要：好久沒(méi)上，昨天上來(lái)看到一個(gè)問(wèn)題，引起了我的興趣。請(qǐng)看上面的例子可能很多前端童鞋都很知道可以用于將類(lèi)數(shù)組對(duì)象轉(zhuǎn)為數(shù)組，和的用法和作用網(wǎng)上一搜一大堆。在這里主要是為了讓借用構(gòu)造函數(shù)原型上的方法，并且改變方法里的的指向。

好久沒(méi)上SF，昨天上來(lái)看到一個(gè)問(wèn)題，引起了我的興趣。一番探索和研究后，有了此篇文章，也算是對(duì)該問(wèn)題的解答。

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

請(qǐng)看上面的例子
可能很多前端童鞋都很知道 Array.prototype.slice.call 可以用于將類(lèi)數(shù)組對(duì)象轉(zhuǎn)為數(shù)組，call 和 apply 的用法和作用網(wǎng)上一搜一大堆。
在這里主要是為了讓 pretendArr 借用Array構(gòu)造函數(shù)原型上的 slice 方法，并且改變 slice 方法里的 this 的指向。
所以這個(gè)問(wèn)題其實(shí)不在于 call 或者 apply，關(guān)鍵在于 Array.prototype.slice 這個(gè)方法上。

slice這個(gè)方法是js原生方法，自然而然，我會(huì)想到去找找 es 的規(guī)范，看看這個(gè)方法是怎樣定義，以及如何實(shí)現(xiàn)的。

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

嫌英文字母太多的可以直接看以下我寫(xiě)的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 必須是數(shù)組，因此類(lèi)數(shù)組對(duì)象也可以調(diào)用該方法，在本例中入?yún)?start 和 end 均為 undefined，實(shí)際上是根據(jù) 類(lèi)數(shù)組對(duì)象 的 length 屬性，從0到length-1去把類(lèi)數(shù)組對(duì)象對(duì)應(yīng)的值取出來(lái)，放到前面聲明的數(shù)組 A 里，最終再return A
因此，類(lèi)數(shù)組對(duì)象的 length 屬性很重要，并且該對(duì)象里的數(shù)序也很重要，都會(huì)影響到轉(zhuǎn)換為數(shù)組的結(jié)果。如以下例子：

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]

第一次寫(xiě)文章，想到哪寫(xiě)到哪，寫(xiě)得有點(diǎn)亂，各位看官勿怪，如果對(duì)你有用，還請(qǐng)點(diǎn)個(gè)贊~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99805.html

相關(guān)文章

  • 偽數(shù)組及其轉(zhuǎn)換為真數(shù)組原理

    摘要：偽數(shù)組及其轉(zhuǎn)換為真數(shù)組原理什么是偽數(shù)組定義擁有屬性和數(shù)值下標(biāo)屬性。不具有數(shù)組所具有的方法。偽數(shù)組是一個(gè)，而真實(shí)的數(shù)組是一個(gè)常見(jiàn)的偽數(shù)組參數(shù)數(shù)組對(duì)象列表比如通過(guò)得到的列表對(duì)象比如舉例通過(guò)得到的對(duì)象列表是一個(gè)偽數(shù)組。 偽數(shù)組及其轉(zhuǎn)換為真數(shù)組原理 什么是偽數(shù)組 定義： 擁有l(wèi)ength屬性和數(shù)值下標(biāo)屬性。 不具有數(shù)組所具有的方法。 偽數(shù)組是一個(gè)Object，而真實(shí)的數(shù)組是一個(gè)Array ...

    fobnn 評(píng)論0 收藏0

  • 深入理解 Javascript 之 this

    摘要：深入淺出的理解問(wèn)題的由來(lái)寫(xiě)法一寫(xiě)法二雖然和指向同一個(gè)函數(shù)，但是執(zhí)行結(jié)果可能不一樣。該變量由運(yùn)行環(huán)境提供。所以，就出現(xiàn)了，它的設(shè)計(jì)目的就是在函數(shù)體內(nèi)部，指代函數(shù)當(dāng)前的運(yùn)行環(huán)境。 深入淺出this的理解 問(wèn)題的由來(lái) var obj = { foo: function(){} } var foo = obj.foo; // 寫(xiě)法一 obj.foo(); // 寫(xiě)法二 foo...

    OnlyMyRailgun 評(píng)論0 收藏0

  • 將偽數(shù)組轉(zhuǎn)換為數(shù)組的幾個(gè)方法

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

    陸斌 評(píng)論0 收藏0

  • 【進(jìn)階3-3期】深度解析 call 和 apply 原理、使用場(chǎng)景及實(shí)現(xiàn)

    摘要：之前文章詳細(xì)介紹了的使用，不了解的查看進(jìn)階期。不同的引擎有不同的限制，核心限制在，有些引擎會(huì)拋出異常，有些不拋出異常但丟失多余參數(shù)。存儲(chǔ)的對(duì)象能動(dòng)態(tài)增多和減少，并且可以存儲(chǔ)任何值。這邊采用方法來(lái)實(shí)現(xiàn)，拼成一個(gè)函數(shù)。 之前文章詳細(xì)介紹了 this 的使用，不了解的查看【進(jìn)階3-1期】。 call() 和 apply() call() 方法調(diào)用一個(gè)函數(shù), 其具有一個(gè)指定的 this 值和分...

    godlong_X 評(píng)論0 收藏0

  • JavaScript基礎(chǔ)知識(shí)整理（1）

    摘要：從這段描述可以得到以下對(duì)象小芒和小賢一樣，原來(lái)也是一條可愛(ài)的小狗，可是突然有一天瘋了，一看到人就會(huì)每隔半秒叫一聲地不停叫喚。將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛芍付ǖ男聦?duì)象。 1、JavaScript數(shù)據(jù)類(lèi)型有哪些？ 基本數(shù)據(jù)類(lèi)型：Number、String、Boolean、Null、Undefined 引用數(shù)據(jù)類(lèi)型：Object（Array、Date、RegExp、Funct...

    macg0406 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<