如何理解javascript中偽數(shù)組

這篇文章主要講解了“如何理解javascript中偽數(shù)組”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何理解javascript中偽數(shù)組”吧！

網站建設哪家好，找成都創(chuàng)新互聯(lián)！專注于網頁設計、網站建設、微信開發(fā)、小程序制作、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了和龍免費建站歡迎大家使用！

在javascript中，偽數(shù)組又稱類數(shù)組，是一個類似數(shù)組的對象，是一種按照索引存儲數(shù)據(jù)且具有l(wèi)ength屬性的對象；因為是對象，所以偽數(shù)組不具有數(shù)組的push()、forEach()等方法。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

偽數(shù)組的定義和特性

偽數(shù)組 (ArrayLike) ，又稱類數(shù)組。是一個類似數(shù)組的對象，是一種按照索引存儲數(shù)據(jù)且具有 length 屬性的對象。但是有如下幾個特征。

按索引方式儲存數(shù)據(jù)
0: xxx, 1: xxx, 2: xxx...
具有length屬性
但是length屬性不是動態(tài)的，不會隨著成員的變化而改變

不具有數(shù)組的push()、forEach()等方法

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

常見的典型偽數(shù)組，包括jQuery中通過 $() 獲取的DOM元素集, 函數(shù)中的的 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

偽數(shù)組轉化成真數(shù)組的方法

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

1、遍歷添加入一個空數(shù)組

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

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

2、利用數(shù)組的slice()方法【推薦】

    ;[].slice.call(arrLike);

或者

    Array.prototype.slice.apply(arrLike);

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

注意這個返回的數(shù)組中，不會保留索引值以外的其他額外屬性。

比如jQuery中$()獲取的DOM偽數(shù)組，里面的context屬性在被此方法轉化之后就不會保留。

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

    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值也會隨之動態(tài)改變。

另外這種直接修改原型鏈的方法，還會保留下偽數(shù)組中的所有屬性，包括不是索引值的屬性。

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

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

    var arr = Array.from(arrLike);

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

感謝各位的閱讀，以上就是“如何理解javascript中偽數(shù)組”的內容了，經過本文的學習后，相信大家對如何理解javascript中偽數(shù)組這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

名稱欄目：如何理解javascript中偽數(shù)組
網頁路徑：http://bm7419.com/article18/jcsggp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站設計、電子商務、App設計、App開發(fā)、自適應網站、域名注冊

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容