獲取Object物件的length

李文楊發表於2017-11-10
Object物件

所有JS程式猿（甚至不止JS）都知道，陣列（Array）是有length的，通過length屬性，可以很方便的獲取陣列的長度。可以說，只要使用到了陣列，就必會使用到其length屬性。

而Object物件是沒有length屬性或方法的，它確實沒有存在的必要，因為人們只會在乎該物件能提供什麼樣的方法，而沒有必要知道它到底有多少方法。的確，這確實不是一個普遍性的需求，

因此ECMAScript中也不會為自己增加額外的負擔。

我之前一直沒有考慮過這個問題，我們通過CGI獲取資料，對於一條一條的資料，後臺將其做成陣列並以json返回。如下所示：

try{callback({
     data:[{a:1},{a:2}]
     });
}catch(e){}

這是非常合理的，因為我在前端可以用length得到資料的長度，並逐條將其插入表格，或者是通過其他的方式表現出來。但是你永遠也不能用一成不變的思維方式來解決所有問題。

某天寫後臺介面的同事決定換一種資料格式，改用object來表示資料，併為每個資料新增一個索引，如下所示：

1 try{callback({
2     data:{1:{a:1},2:{a:2}}
3     });
4 }catch(e){}

面對這樣的資料，我就犯愁了，因為object不能獲取物件長度。當然我可以叫後臺同事改一下介面返回的格式，但是既然他可以寫出以這樣格式返回的程式碼，那其他的後臺同事也同樣

可以寫出。為了不影響到更多的人，就需要我在前端來做處理了。其實要獲取物件的長度也不難，用for in 語句就能實現，如下程式碼所示：

 var a = {a:1,b:2,c:3,d:4};
 function length(obj) {
     var count = 0;
     for(var i in obj){
         count ++;
     }
     return count;
 };
 alert(length(a));    //5

至於為什麼是5而不是4那是因為每個物件都有一個內部屬性（__proto__指向原型）。

為了更方便的使用這個方法，可以把它寫到Object原型裡面去，並且不去計算它的原型長度，如下程式碼所示：

 var a = {a:1,b:2,c:3,d:4};
 Object.prototype.length = function() {
 　　var count = 0;
    for(var i in obj){
        if(obj.hasOwnProperty(i)){//如果包含除它的原型本身之外的屬性
            count++;
        };
    };
    return count;   

 };
 alert(a.length());    //5

這樣用起來會更直觀，跟接近Array的使用習慣。

相關文章