偽數組(ArrayLike)

zlyBear 發布于2019-08-22 18:03 / 1469人閱讀

摘要：偽數組偽數組的定義和特性偽數組，又稱類數組。利用數組的方法推薦或者使用返回一個新的數組用或把他的作用環境指向偽數組。注意這個返回的數組中，不會保留索引值以外的其他額外屬性。

偽數組(ArrayLike) 偽數組的定義和特性

偽數組 (ArrayLike) ，又稱類數組。是一個類似數組的對象，但是有如下幾個特征。

按索引方式儲存數據

0: xxx, 1: xxx, 2: xxx...

具有length屬性

但是length屬性不是動態的，不會隨著成員的變化而改變

不具有數組的push()， forEach()等方法

    arrayLike.__proto__ === Object.prototype;   //true 
    arrayLike instanceof Object; //true 
    arrayLike instanceof Array; //false

常見的典型偽數組，包括jQuery中通過 $() 獲取的DOM元素集, 函數中的的 arguments 對象，以及字符串String對象。

例子:

    var arrLike = {
        0: "a",
        1: "b",
        2: "c",
        length: 3,
    }

    arrLike[1]; //"a"
    arrLike.length; //3
    arrLike.push("d"); //Uncaught TypeError: arrLike.push is not a function

偽數組轉化成真數組的方法

    var arrLike = {
        0: "a",
        1: "b",
        2: "c",
        length: 3,
    };

1.遍歷添加入一個空數組

    var arr = [];

    for(var i = 0; i < arrLike.length; i++){
        arr.push(arrLike[i]);
    }

比較簡單易懂，但是步驟略顯繁瑣。

2.利用數組的slice()方法 【推薦】

    ;[].slice.call(arrLike);

或者

    Array.prototype.slice.apply(arrLike);

使用slice()返回一個新的數組,用call()或apply()把他的作用環境指向偽數組。

注意這個返回的數組中，不會保留索引值以外的其他額外屬性。
比如jQuery中$()獲取的DOM偽數組，里面的context屬性在被此方法轉化之后就不會保留。

模擬一下slice()的內部實現

    Array.prtotype.slice = function(start, end){
        var result = new Array();
        var start = start | 0;
        var end = end | this.length;

        for(var i = start; i < end; i++){
            result.push(this[i]);
        }

        return result;
    }

3.修改原型指向

    arrLike.__proto__ = Array.prototype;

這樣arrLike就繼承了Array.prototype中的方法，可以使用push()，unshift()等方法了，length值也會隨之動態改變。
另外這種直接修改原型鏈的方法，還會保留下偽數組中的所有屬性，包括不是索引值的屬性。

4.ES2015中的Array.from()方法

Array.from() 方法從一個類似數組或可迭代對象中創建一個新的數組實例。

可以參考MDN的Array.from()

    var arr = Array.from(arrLike);

得到的結果與第二種方法類似，只保留索引值內的屬性。

參考文獻

http://javascript.ruanyifeng....

https://www.cnblogs.com/NTWan...

https://www.cnblogs.com/guora...

https://developer.mozilla.org...

GPU云服務器云服務器偽數組 js自定義一個偽數組 ArrayLike 偽參數

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

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

深入理解 Javascript 之 this

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

OnlyMyRailgun 2019-08-23 10:54 評論0 收藏0
js中call、apply、bind那些事

摘要：應用場景求數組中的最大值和最小值并不是最佳選擇是中的靜態方法，因此必然是沒有使用上下文的必要的。因此綁定只需要用或者占位就可以了。前言面試，幾乎每次都會問到一個js中關于call、apply、bind的問題，比如… 怎么利用call、apply來求一個數組中最大或者最小值如何利用call、apply來做繼承 apply、call、bind的區別和主要應用場景作用首先問個問...

shiyang6017 2019-08-21 14:43 評論0 收藏0
this的指向（附面試題）

摘要：是的幾乎是全部。語法和區別在里面的指向的不是事件的調用者，而是奇葩，而指向的事件調用者。舉例來說使用作為來調用面試題四明確綁定的優先權要高于隱含綁定綁定的優先級高于隱含綁定和不能同時使用，所以是不允許的，也就是不能直接對比測試綁定和明確綁定 ES5中this的指針按照this指針的優先級，列出下面常會遇到的四種情況，從上到下依次是優先級從高到低（后面會詳細比較優先級）。函數是和n...

blair 2019-08-21 17:22 評論0 收藏0
es6基礎0x017：新的 Math、Number、String、Array、Object 的 Ap

摘要：更新了幾個方法，但是一般情況下沒有太大的用處反雙曲線函數，返回一個數字的反雙曲余弦值算數平方根函數，返回所有參數的算術平方根類的位整數乘法運算函數該常量表示與可表示的大于的最小的浮點數之間的差值，那有什么用呢可以用來解決浮 0x001 Math Math更新了幾個方法，但是一般情況下沒有太大的用處反雙曲線函數，返回一個數字的反雙曲余弦值 Math.acosh(-1); // N...

why_rookie 2019-08-26 12:22 評論0 收藏0